[ JavaScript ] ES6의 화살표 함수

화살표 함수(arrow function)

---

화살표 함수(arrow function)는 ES6 문법에서 함수를 표현하는 새로운 방식이다.

그렇다고 해서 기존 function을 이용한 함수 선언 방식을 사용하지 않는건 아니다.

사용 용도에 따라 달라진다.

 

일반 함수를 이용한 선언

setTimeout(function() {
	console.log('Hello world');
}, 1000);

 

화살표 함수를 이용한 선언

setTimeOut(() => {
	console.log('Hello world')
}), 1000);

 

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

서로 가리키고 있는 this 값이 다르다.

일반 함수는 자신이 종속된 객체를 this로 가리킨다.

화살표 함수는 자신이 종속된 인스턴스를 가리킨다.

 

 

일반 함수의 예제

function BlackDog(){
	this.name = '흰둥이';
    return {
    	name: '검둥이',
        bark: function() {
        	console.log(this.name + '멍멍!');
        }
    }
}

const blackDog = new BlackDog();
blackDog.bark(); //검둥이: 멍멍!

 

화살표 함수의 예제

function WhiteDog(){
	this.name = '흰둥이';
    return {
    	name: '검둥이',
        bark: () => {
        	console.log(this.name + '멍멍!');
        }
    }
}

const blackDog = new BlackDog();
blackDog.bark(); //흰둥이: 멍멍!