ES6 lessons 3. 화살표 함수

2023.03.26

자바스크립트 스터디 10회차

공부 사이트: https://poiemaweb.com/

3. 화살표 함수

function 키워드 대신 화살표를 사용하여 간략한 방법으로 함수를 선언할 수 있다.

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


// 함수 바디 지정
x => { return x * x } 
x => x * x   // 함수 바디가 한 줄의 구문이라면, 중광호 생략 가능. 암묵적으로 return


// 예시
() => { return {a : 1}; }
() => ({a: 1})  // 위 표현과 동일한 의미

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

 

 

1) 화살표 함수 호출

화살표 함수는 익명 함수로만 사용할 수 있다. → 호출을 위해 함수 표현식을 사용해야 함.

// ES5
var func1 = function(x) { return x * x; };
console.log(func1(10));

// ES6
const func2 = x => x*x;
console.log(func2(10));

/*
콜백 함수로 사용하는 경우
*/

// ES5
var arr1 = [1,2,3];
var func1 = arr1.map(function(x) {
    return x*x;
});


// ES6
const arr2 = [1,2,3];
const func2 = arr2.map(x => x*x);

 

 

2) 일반 함수와 화살표 함수의 큰 차이점

[일반 함수]

일반 함수의 this는 함수 호출 시 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

1. 기본적으로 this는 전역 객체에 바인딩 됨. (window, global)
2. 메소드 내부의 this는 해당 메소드를 호출한 객체
3. 생성자 함수의 경우, 새로 생성한 객체(인스턴스) 바인딩

 

[화살표 함수]

함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

언제나 상위 스코프의 this를 가리킨다. ▶ Lexical this

또한 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

 

 

3) 화살표 함수를 사용해선 안되는 경우

① 화살표 함수로 메소드 정의

화살표 함수로 메소드를 정의하면, 화살표 함수 내부의 this가 메소드를 소유한 객체를 가리키는 것이 아니라.. 상위 스코프인 전역 객체를 가리킬 수 있기 때문이다.

const person = {
    name : "홍길동",
    sayHello : () => console.log(`hello ${this.name}`)
};

person.sayHello(); // hello undefined

 

이런 경우 화살표 함수가 아니라 축약 메소드 표현을 사용하자.

const person = {
    name : "홍길동",
    sayHello(){
        console.log(`hello ${this.name}`)
    }
};

person.sayHello(); // hello 홍길동

 

② prototype

화살표 함수로 정의된 메소드를 prototype에 할당하는 경우, 문제가 발생한다.

prototype에 메소드를 할당할 때는 일반 함수를 할당할 것.

const person = {
    name : "홍길동",
};

Object.prototype.sayHello = () => console.log(`hello ${this.name}`);
person.sayHello(); // hello undefined

 

③ 생성자 함수

화살표 함수는 생성자 함수로 사용할 수 없다. 

생성자 함수는 prototype 프로퍼티를 가지며, 해당 프로퍼티가 가리키는 프로토타입 객체의 cosntructor를 사용하는데.. 화살표 함수는 prototype 프로퍼티가 없기 때문이다.

const func = () => {};

// hasOwnProperty: 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환
console.log(func.hasOwnProperty('prototype'));  // false

 

④ addEventListener 함수의 콜백 함수

addEventListener(): 이벤트 핸들러 등록 방법 중 가장 권장되는 방식.

- 메소드를 통해 대상 DOM 요소에 이벤트를 바인딩하고, 이벤트 발생 시 실행될 콜백함수를 지정할 수 있음

- 하나의 이벤트에 대해 여러개의 이벤트 핸들러 추가 가능

- 버블링 / 캡처링 지원

＃ 버블링: 한 요소에 이벤트 발생 시 요소가 할당된 핸들러가 동작하고, 부모 요소의 핸들러가 동작하고 ... 최상단 부모 요소를 만날 때까지 반복하여 핸들러가 동작 (최하위에서 최상위까지 반복하여 핸들러 동작)

＃ 캡처링: 최상위 태그에서 해당 태그를 찾아서 내려가는 흐름

- HTML 요소 뿐만아니라 DOM 요소에 대해서도 동작함.

 

해당 함수의 콜백 함수로 화살표 함수를 정의하면, this가 상위 스코프인 전역 객체를 가리킨다.

따라서 콜백함수 내에서 this를 사용하는 경우, 일반 함수를 사용해야 한다.

(이 때 this는 이벤트 리스너에 바인딩된 요소를 가리킴)

// 사용금지
var button = document.getElementById('myButton');

button.addEventLister('click', () => {
    console.log(this === window); //true
    this.innerHTML = 'Clicked button';
});