[ JavaScript ] ES6 : Arrow Function & this (화살표 함수)

자바스크립트로 개발을 하다보면,

 

function 키워드를 이용해 익명함수를 자주 사용하게 될 것이다.

 

 

ES6 에서의 화살표 함수는 이러한 익명함수를 간단하게 나타낼 수 있다.

 

 

1. Arrow Function

 

 

 

아래와 같은 형태로 화살표 함수를 나타낼 수 있다.

 

 

( )=>{

}

 

 

소괄호와 화살표를 사용하여 function 키워드 없이 함수를 선언할 수 있다.

 

 

function 대신 화살표가 생겼다고 생각하면 된다.

 

 

 

const func = () => {
	console.log("arrow function");
};
func();

 

 

 

 

 

화살표 함수 안에 실행문이 하나면, 중괄호도 없앨 수 있다.

 

 

const func = () => 	console.log("arrow function");
func()

 

 

이렇게도 가능하다는 말이다.

 

 

 

2. this

 

 

객체 지향 관점에서 콜백을 정의할 때 더 유연하게 컨텍스트 활용이 가능하다.

 

 

자바스크립트의 함수 실행에서의 this 는 기본적으로 전역객체 이다.

 

그렇기 때문에 아래와 같은 코드를 실행 했을 때

 

첫번째 출력이 ES5 가 나온 것이다.

 

 

 

var version = "ES5";

function Ver(){
	this.version = "ES6";
    
    setTimeout(function(){
    	console.log("js Version : "+ this.version);
    },100);
    setTimeout(()=>{
    	console.log("js Version : "+ this.version);
    },100)
}

var ver = new Ver();

 

 

 

 

하지만 화살표 표현식 함수 안의 this.version 은 ES6 에 접근해 ES6 를 출력한다.

 

 

 

화살표 함수 표현식은 표현 방법만 달라진 것이 아니라,

 

this 도 다르므로 기존과 다른 결과가 출력된다.