javascript arrow function 화살표 함수

arrow function는 es6에서 사용하는 함수로 function 키워드 대신 화살표(=>)를 쓸 수 있다.

화살표 함수는 익명 함수(anonymous function)일 때 사용할 수 있다.

 

함수 표현식(function expression)

//BEFORE
hello = function() {
  return "Hello World!";
}


//AFTER(arrow function)
hello = () => {
  return "Hello World";
}

hello = () => {return "Hello World";}

//AFTER 매개변수가 하나일 경우 개행, {}브라캣, return 키워드 생략 가능
hello = () => "Hello World";

 

//es6이전 함수
function hello(val) = {
	return "Hello"+val;
}

//화살표 함수 
hello = (val) => "Hello " + val;

//괄호 생략 가능
hello = val => "Hello " + val;

console.log(hello("World")); 
//Hello World

 

 

this 바인딩

화살표 함수와 일반 함수는 각각 this를 다르게 바인딩한다.

 

 일반 함수(regular function) 

 

See the Pen Regular JavaScript "this" by sonia (@sophyspick) on CodePen.

 

 

 

일반 함수의 this 키워드는 함수가 실행되기 전에는 전역(window)객체를 가르키지만, 함수를 실행한 후에는 함수를 호출한 객체를 가르킨다. 따라서 this가 바인딩할 객체가 동적으로 변하게 된다.

 

 화살표 함수(arrow function) 

See the Pen poyPVMM by sonia (@sophyspick) on CodePen.

 

 

화살표 함수의 this 키워드는 화살표 함수가 선언된 곳의 상위 context를 가르킨다.(laxical this) 기본적으로 콜백 함수 내부의 this는 전역 객체 window를 가르킨다.

 

 

짧고 간단해보이는 화살표 함수, 이럴 땐 화살표 함수를 쓰지 말자.

1. 메소드(method)로 정의하지 하지 않기
화살표 함수에서의 this 키워드는 상위 context의 this를 그대로 계승(laxical this)하기 때문에 위험하다.

2. 프로토타입(prototype)

3. 생성자

4. 콜백 함수

 

 

ref.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98