ES2015+(화살표 함수, 비구조화 할당)

4. 화살표 함수

화살표 함수(arrow function)라는 새로운 함수가 추가되었으며, 기존의 function() {}도 그대로 사용할 수 있습니다.

 

function add1(x, y) {
	return x + y;
}
const add2 = (x, y) => {
	return x + y;
};

const add3 = (x, y) => x + y;
const add4 = (x, y) => (x + y);

function not1(x) {
	return !x;
}
const not2 = x => !x;

add1, add2, add3, add4는 같은 기능을 하는 함수입니다. 

마찬가지로 not1, not2도 같은 기능을 합니다. 

 

화살표 함수에서는 function 선언 대신 = > 기호로 함수를 선언합니다. 

또한, 변수에 대입하면 나중에 재사용할 수 있습니다.

화살표 함수에서는 return문을 줄일 수 있습니다. 

 

중괄호 대신 add3과 add4처럼 return할 식을 바로 적어주면 됩니다. 

add4처럼 보기 좋게 소괄호로 감쌀 수도 있습니다. 

not2처럼 매개변수가 한 개면 매개변수를 소괄호로 묶어주지 않아도 됩니다.

기존의 function과 다른 점은 this 바인드 방식입니다. 다음 예제를 봅시다.

 

var relationship1 = {
	name:'zero',
	friends: ['nero','hero','xero'],
	logFriends: function() {
		var that = this; // relationship1을 가리키는 this를 that에 저장
		this.friends.forEach(function(friend) {
			console.log(that.name, friend);
		});
	},
};

relationship1.logFriends();

const relationship2 = {
	name:'zero',
	friends: ['nero','hero','xero'],
	logFriends() {
		this.friends.forEach(friend => {
			console.log(this.name, friend);
		});
	},
};
relationship2.logFriends();

relationship1.logFriends() 안의 forEach문에서는 function 선언문을 사용했습니다.

 

각자 다른 함수 스코프의 this를 가지므로 that이라는 변수를 사용해서 relationship1에 간접적으로 접근하고 있습니다.

하지만 relationship2.logFriends() 안의 forEach문에서는 화살표 함수를 사용했습니다. 

따라서 바깥 스코프인 logFriends()의 this를 그대로 사용할 수 있습니다. 

상위 스코프의 this를 그대로 물려받는 것입니다.

따라서 기본적으로 화살표 함수를 쓰되, this를 사용해야 하는 경우에는 화살표 함수와 함수 선언문(function) 둘 중에 하나를 고르면 됩니다.

 

5. 비구조화 할당

 

이름은 어색하지만 매우 유용한 기능입니다. 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.

 

var candyMachine = {
	status: {
		name:'node',
		count: 5,
	},
	getCandy: function() {
		this.status.count--;
		return this.status.count;
	}
};
var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;

 

객체의 속성을 같은 이름의 변수에 대입하는 코드입니다. 이를 다음과 같이 바꿀 수 있습니다.

 

const candyMachine = {
	status: {
        name:'node',
        count: 5,
    },
	getCandy() {
    	this.status.count--;
    	return this.status.count;
    }
};
const { getCandy, status: { count } } = candyMachine;

당황스럽겠지만, 위 문법은 유효한 문법입니다. 

 

candyMachine 객체 안의 속성을 찾아서 변수와 매칭해줍니다. count처럼 여러 단계 안의 속성도 찾을 수
있습니다. getCandy와 count 변수가 초기화된 것입니다.

배열도 비구조화할 수 있습니다.

 

var array = ['nodejs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[array.length - 1];

array란 배열의 첫 번째, 두 번째 요소와 마지막 요소를 변수에 대입하는 코드입니다. 

다음과 같이 바꿀 수 있습니다.

 

const array = ['nodejs', {}, 10, true];
const [node, obj, , bool] = array;

어색해 보이지만, 나름대로 규칙이 있습니다.

 

node, obj와 bool의 위치를 보면 node는 배열의 첫 번째 요소, obj는 두 번째 요소, bool은 마지막 요소라는 것을 알 수 있습니다. obj와 bool 사이의 요소들은 무시합니다.

비구조화 할당 문법도 코드 줄 수를 상당히 줄여주므로 유용합니다. 

특히 노드는 모듈을 사용하므로 이러한 방식을 자주 사용합니다. 

 

다음 포스팅에서는 promise에 대해 설명하겠습니다.