가라멜의 달달한 세상 탐방

출처 : https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

 

이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로,

정확한 내용은 위의 출처에서 보는 것이 좋다.

 

 

1. 화살표 함수의 선언

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 모든 경우 화살표 함수를 사용 할 수 있는 것은 아니며, 기본 문법은 아래와 같다.

//매개 변수 지정 방법
() => { ... } //매개 변수 없음
x => { ... } // 매개변수 한개인 경우 소괄호 생략
(x, y) => { ... } // 매개변수 여러 개인 경우 소괄호 생략 불가

// 함수 몸체 지정 방법
x => {return x*x}
x => x*x // 위 표현과 동일

() => { return {a:1};}
() -> ({a:1}) // 동일 표현

() => {
	const x = 10;
    return x * x;
    };

2. 화살표 함수의 호출

화살표 함수는 익명 함수로만 사용이 가능. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식 사용

const pos = x => x * x;
console.log(pow(10));//100

혹은 콜백 함수로 사용 가능하다.

const arr = [1,2,3];
const pow = arr.map(x => x * x);
console.log(pow);//[ 1, 4, 9]

 

3. this

3.1 일반 함수의 this

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출도었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

콜백함수 내부의 this는 전역 객체 window를 가리킨다.

 3.2 화살표 함수의 this

화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다 이를 Lexical this라 한다. 

 

4. 화살표 함수를 사용해서는 안되는 경우

4.1 메소드

화살표 함수로 메소드를 정의하는 것은 피해야 한다. 

4.2 prototype

4.3 생성자 함수

화살표 함수는 생성자 함수로 사용할 수 없다. 생성자 함수는 prototype 프로퍼ㅣ를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다.

4.4 addEventListener 함수의 콜백 함수

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window 를 가리킨다.

따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우 , function 키워드로 정의한 일반 함수를 사용하여야 한다. 일반 함수로 정의된 addEVentListener 함수의 콜백 함수 내부의 this 는 이벤트 리스너에 바인딩된 요소를 가리킨다.