[JS] Arrow Function / 화살표 함수란 ❓

화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다.

 

일반적인 화살표함수의 모습은 이러하다.

const fun1 = () => {
	return true;
}

 

화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까?

 

1. this의 차이.

 

기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다.

 

• 기존 함수 (동적인 this)

var obj = {
  state: 0,
  addState: function(){
    btn.addEventListener('click', function(){
    	this.state += 1;
    });
  }
};

 

• 화살표 함수 (정적인 this)

var obj = {
  state: 0,
  addState: function(){
  btn.addEventListener('click', () => {
    this.state += 1
    })
  }
}    

 

두 함수 언뜻 보면 같은 함수같다.

하지만 위 함수의 this는 스코핑상 btn 의 this로 되어 this.state 는 null (undefiened?) 로 되어 오류가 발생하고,

아래 화살표함수의 this는 변수 obj 선언시의 this 로 인식이 되기 때문에, this.state 는 obj.state 로 정상적으로 반환이 된다.

 

 

2. arguments 의 차이.

 

const originFun = function () {
  console.log(arguments);
}

const arrowFun = () => {
  console.log(arguments);
}


originFun(1,2);

/* 
Arguments(2)
0: 1
1: 2
length: 2
callee: ƒ outter()
Symbol(Symbol.iterator): ƒ values()
__proto__: Object
라는 arguments 값 반환
*/

arrowFun(1,2);     // => 에러

기존 function 에서는 arguments 라는 것을 가지고 있어서

인자 값을 받아와 정보를 표현하지만, 화살표 함수에서는 없다!

function outter(){
  const arrowFun2 = () => {
    console.log(arguments);
  }
  arrowFun2();
}

outter(1,2);  // 

/*  
Arguments(2)
0: 1
1: 2
length: 2
callee: ƒ outter()
Symbol(Symbol.iterator): ƒ values()
__proto__: Object
라는 arguments 값 반환
*/

아까 1의 예시 처럼

화살표 함수는 본인 범위에 arguments 가 없을 시에 자신 바깥에서의 arguments 로 가져온다.