본문 바로가기
Javascript/ECMAScript 2015 (ES6)

[ES 6] Arrow Function - 화살표 함수

by parkjp 2017. 9. 11.

 

1. 화살표 함수 (Arrow Function)

 

 ES6부터 '=>' 연산자로 함수를 생성하는, 화살표 함수가 처음 생겼다. 화살표 함수는 보다 간결한 구문을 지닌 익명 함수이다.

 

let add = (x, y) => {
    return x + y;
};

let result = add(1, 2);

console.log(result); // 3;

 

 문이 하나 밖에 없는 화살표 함수는 {}를 생략할 수 있다.

 


let add = (x, y) => x + y;

 

2. 화살표 함수에서의 this

 

 화살표 함수에 this 값은 해당 스코프의 this 값과 같다. 여타 함수에서 this가 콘텍스트 객체를 가리키는 것과는 대조적이다.

 


var obj = {
func : function() {
console.log(this); // Object
}
};


var obj2 = {
func: () => {
console.log(this); // Window
}
};

 

obj.func은 Object의 프로퍼티이므로 func 함수의 this는 Object이다. 반면에 obj2.func의 스코프는 전역이므로 func의 this는 전역 스코프의 this 값이다.

 

* 화살표 함수와 일반 함수의 차이점

 

- 화살표 함수는 객체 생성자로 사용할 수 없다. 즉, new 연산자를 못 쓴다.

 

화살표 함수는 Function 생성자의 인스턴스로, 구문, this 값, new 연산자를 제외하면 차이점이 없다.

반응형

'Javascript > ECMAScript 2015 (ES6)' 카테고리의 다른 글

[ES 6] 모듈이란?  (0) 2017.09.19
[ES 6] Class 구문과 상속  (0) 2017.09.19
[ES 6] Promise 패턴을 사용한 http request 요청  (0) 2017.09.15
[ES 6] Symbol  (0) 2017.09.11
[ES 6] 블록 스코프 let과 상수 const  (0) 2017.09.11