[JavaScript] 화살표 함수와 일반 함수의 차이

자바스크립트에서 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다.

아래 함수가 어떻게 실행될 지 예상해보자.

const obj = {
    name: 'minho',
    
    intro: function() {
    	console.log(this.name)
        
        setTimeout(function() {
        	console.log(this.name)
        }, 1000)
    }
}

obj.intro()

논리적으로 생각해보면 당연히 minho가 두 번 뜰거라 생각한다.
그러나 두 번째 console.log는 undefined가 뜨는 걸 확인할 수 있다. 이유는 무엇일까?

 

setTimeout 내부의 this는 window를 가르키기 때문이다.
해당 문제를 아래 코드와 같이 bind, call, apply를 통해 어디에 바인딩할지 정해줄 수 있지만 더 편리한 방법이 있다.

const obj = {
	name: 'minho',
    
    intro: function() {
    	console.log(this.name)
        
        setTimeout(function() {
        	console.log(this.name)
        }.bind(this), 1000)
    }
}

obj.intro()

 

화살표 함수

const obj = {
	name: 'minho',
    
    intro: function() {
    	console.log(this.name)
        
        setTimeout(() => {
        	console.log(this.name)
        }, 1000)
    }
}

obj.intro()

예상과 같이 minho가 두 번 뜨는 걸 확인할 수 있다.

화살표 함수는 일반 함수와 달리 언제나 상위 스코프의 this를 가르키기 때문에 생각하지 못한 오류를 방지할 수 있다.

 

그러나 화살표 함수를 사용하면 안되는 경우가 있다.

 

메소드를 정의할 때 

const obj = {
    name: 'minho',
    intro: () => console.log(`Hi my name is ${this.name}`)
};

obj.intro();

실제 호출을 확인해보면 'Hi my name is undefined` 가 뜨는 걸 확인할 수 있다.

당연하다. 메소드를 호출한 객체를 가르키는 게 아니라 저기서의 this는 상위 컨택스트인 전역 객체일 수 밖에 없다.

const obj = {
    name: 'minho',
    intro() {
    	console.log(`Hi my name is ${this.name}`)
    }
};

obj.intro();

메서드는 정의할 때는 축약 메소드 표현을 사용하자. 

 

 

문제점들을 주의하며 화살표함수를 사용하자!