[ ES6 Script ] JS 화살표함수 와 this

 

- ES6 화살표 함수

 

 

 

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

 

( )=>{

}

 

 

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

 

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

 

const func = () => {
	console.log("화살표 함수");
};
func();

 

 

 

 

 

 

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

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

위와같이도 가능합니다.

 

 

 

- 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 도 다르므로 기존과 다른 결과가 출력됩니다.