[Javascript] Arrow function는 뭐? 왜 쓰는데?

[Javascript] Arrow function는 뭐? 왜 쓰는데?

 

Arrow function의 특징

Arrow function에는 기존 function과 다르게 3가지가 다르다.

1. 함수 이름이 없다.
2. this가 선언시 정적으로 결정된다.
3. arguments 가 없다.

 

 

1. 함수 이름이 없다.

 

함수 선언 방법

function myFunc() {} // 함수 이름 지정

const myFunc = function() {} // 변수에 할당

// Arrow function
const myFunc = () => {} // 변수에 할당

 

2. this가 선언시 정적으로 결정된다.

일반 함수에서 this는 호출시 동적으로 결정되었다.

하지만 arrow function에서 this는 선언시 정적으로 결정된다. 이 때 this는 함수를 호출한 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.

또한 this가 없으므로 binding 하지 못한다.

 

 

 

3. arguments 가 없다.

 

 

const myFunc = function (){
	console.log(arguements);
}

myFunc(1,2,3,4) // Arguments(4) [1,2,3,4, callee: ~

/////////////////////////////////////////////////////////////////

const myFunc2 = () => {
	console.log(arguemnts)
}

myFunc2(1,2,3,4) // error. arguments is not defined

 

Arrow function의 장점

코드가 짧아진다. 가독성 향상