Javascript 화살표 함수

화살표 함수는 es6에서 등장하였습니다.

화살표 함수의 기본문법은 아래와 같습니다.

() => {}

const test = () => { console.log('hihi') }

 

화살표 함수는 함수 표현식으로 사용하여야 합니다. 익명함수로서만 사용할 수 있기 때문입니다.

fuction test() {
	console.log('hihi')
}

const test = () => { console.log('hihi') }

 

화살표 함수는 this를 가지지 않습니다. 

따라서 화살표 함수 내부에서의 this는 항상 상위 스코프의 this를 가리킵니다.

bind, call, apply를 통하여 화살표 함수의 this를 변경할수가 없습니다.

 

const people = {
    age: 0,
    older() {
    	setTimeout(() => {
        	this.age++;
            console.log(this.age);
        }, 100)
    }
}

const person = {
	age: 0,
    older() {
    	setTimeout(function() {
        	this.age++;
            console.log(this.age);
        }, 100)
    }
}
 
people.older() // 1
person.older() // NaN

화살표 함수는 this를 가지지 않는다고 하였습니다.

위의 실행결과는 1과 NaN을 출력하게 됩니다.

this는 동적으로 binding되게 됩니다.

하지만 화살표 함수에는 this가 없습니다. 그래서 상위 스코프의 this를 참조하게 됩니다. 그래서 people.older()는 1이 출력됩니다.

함수의 스코프는 선언되는 위치에 따라 결정됩니다. 화살표 함수가 선언된 위치의 상위 스코프는 older이고 older의 this는 객체로서 호출되었으므로 people을 가리킵니다.

 

person.older()의 this는 window를 가리킵니다.

일반 함수는 this를 가지고 있고 이 this는 일반함수로서 호출되었을때 전역객체를 가리킵니다. person.older()의 내부함수는 일반함수로서 호출이 되었습니다. 

따라서 이때의 this는 window를 가리킵니다.

 

화살표 함수를 사용하지 말아야 할때가 있습니다.

이 내용이 이 글의 핵심입니다.

 

메소드

객체의 메소드로서 호출했을때 화살표 함수를 사용하면 this는 전역객체를 가리킵니다.

const a = {
	b: 'b',
    c: () => { console.log(this.b)}
}

a.c() // undefined


const a = {
	b: 'b',
    c: function(){ console.log(this.b)}
}
a.c()// b

// 위아래 객체의 c 메서드는 같은 내용입니다. 표기법만 다른것입니다.

const a = {
	b: 'b',
    c() { console.log(this.b)}
}
a.c()// b

 

prototype

프로토타입에 동적으로 메서드를 할당하는 경우에 문제가 발생합니다.

const a = {
	b: 'b',
}

Object.prototype.sayHi = () => console.log(this.b);
a.sayHi() // undefined


const a = {
	b: 'b',
}

Object.prototype.sayHi = function() {console.log(this.b)}
a.sayHi() // 'b'

 

생성자함수

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

생성자 함수는 prototype 프로퍼티를 가지고 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용합니다.

하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않습니다.

const Person = () => {};

console.log(Person.hasOwnProperty('prototype')); false

const foo = new Foo(); // error 발생, foo is not a constructor

 

addEventListener 함수의 콜백함수

일반함수로 콜백함수를 정의하게 되면 this는 이벤트 타겟을 가리키게 됩니다. 

화살표 함수로 콜백함수를 정의하게 되면 상위 스코프인 전역스코프의 this를 가리키게 됩니다.

el.addEventListener('click', function(){
	console.log(this) // target을 호출
}); 

el.addEventListener('click', () => {
	console.log(this) // 전역객체를 호출
});

 

 

 

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