[Javascript/ES6+] 화살표 함수

출처

자바스크립트 ES6+ 기본 - 인프런 | 강의

 

---

 

🚀 화살표 함수

 

◽ 화살표 함수 구조

function을 =>로 표기한다. 이 것이 전부가 아니라 구조가 다르다.

 

 

◽ 화살표 함수와 this

- strict 모드에서 함수를 호출할 때 함수 앞에 오브젝트 작성은 필수이다.

ex) window.book(); // 이렇게 하지않으면 undefined

- 화살표 함수에서는 this가 글로벌 오브젝트를 참조하기 때문에 오브젝트를 적어주지 않아도 된다.

- 화살표 함수는 함수에 this를 갖고 있지 않지만, this는 window 오브젝트를 참조하기 때문에 글로벌 변수의 값을 알 수 있다.

 

 

◽ this가 정적 스코프 참조

화살표 함수에서 *정적 스코프의 this를 사용한다.

* 정적 스코프: 엔진이 해석될 때 화살표 함수를 만나면 Function Obejct를 생성하는데 화살표 함수가 속한 스코프를 생성한 오브젝트에 바인딩한다.

오브젝트에 바인딩된 스코프의 this를 화살표 함수에서 this로 사용한다.

함수가 안에 변수가 없으면 밖에서 변수를 찾듯이, 화살표 함수에서는 스코프가 그러하다.

var title = "책";
// book Object에 설정된 스코프의 this를 화살표 함수에서 this로 사용한다.
// book Object가 글로벌 오브젝트에 설정되므로 this가 window 오브젝트를 참조하게 된다.
const book = {
    show: () => console.log(this.title);
};
book.show();

 

 

◽ 화살표 함수와 인스턴스

인스턴스에서 화살표 함수의 작성 위치에 따라 this가 참조하는 오브젝트가 다르다.

 

 

◽ 화살표 함수의 특징

- prototype과 constructor가 없기때문에 가볍다.

- 생성자가 없으므로, new로 인스턴스를 생성할 수 없다.

- this가 없다. 화살표 함수가 속한 스코프의 this를 화살표함수가 바인딩하고 그것을 this로 사용한다.

- 일반 함수는 call()로 참조를 바꿀 수 있지만, 화살표 함수는 참조가 바뀌지 않는다.

- 메소드보다는 함수로 사용하는 것이 효율성이 좋다.