[JavaScript] 화살표 함수

seungyeon·2021년 2월 24일

목록 보기

8/10

ES6에서 새로 도입한 화살표 함수(arrow function)는 보통 함수 표현식을 축약한 형태로 표시된다.

// 함수 표현식
const add = function(a, b) {
	return a + b;
}

// 화살표 함수
const add = (a, b) => {
	return a + b;

화살표 함수는 function 키워드를 화살표 => 로 축약해서 표시할 수 있다.
함수의 본문(body)에 return문만 있는 경우, 화살표 함수는 중괄호 {} 와 return을 생략할 수 있다. 이 경우 반드시 return과 중괄호는 함께 생략해야 한다.
- return 없이 소괄호 () 만 사용하는 것은 가능하다. 이는 일반적으로 수식에서 괄호로 묶어주는 것과 같은 의미이다.

const add = (a, b) => a + b;   // 정상작동
const add = (a, b) => (a + b); // 정상작동
const add = (a, b) => {a + b}; // undefined 리턴

함수 내의 표현식이 두 줄 이상인 경우에는 명시적으로 return과 중괄호를 사용하는 것이 좋다.

파라미터가 한 개라면 소괄호를 생략할 수 있다.

const add5 = (x) => x + 5;
const add5 = x => x + 5;

화살표 함수를 사용하면 클로저를 연속된 여러 개의 화살표로 표시할 수 있다.
화살표 함수로 얼마나 클로저를 직관적으로 표시할 수 있는지 살펴보자.
- 함수 표현식으로 클로저가 2개인 함수를 표시하면 아래와 같다.
```
const adder(x) {
	return function(y) {
		return x + y;
	}
}
```
  화살표 함수를 사용하면 이렇게 간단하게 바뀐다.
```
const adder = x => y => x + y;
```
- 화살표 개수만 확인해도 클로저가 몇 갠지 쉽게 알 수 있다.
화살표 함수를 이용한 클로저 표현 예시 2 (feat. DOM)

const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`;
const liMaker = htmlMaker('li');

htmlMaker('div')('code states'); // `<div>code states</div>`
liMaker('1st item'); // `<li>1st item</li>`
liMaker('2nd item'); // `<li>2nd item</li>`

화살표함수로 HTML 작성하기

화살표 함수를 이용해 클로저를 표현하면 복잡하게 느껴지던 DOM 다루기도 쉬워질 수 있다.

const memberList = ['Heeseung', 'Jay', 'Jake', 'Sunghoon', 'Sunoo', 'Jungwon', 'Niki'];
const main = document.querySelector('#container');

function fetchMemberList(arr) {
	const ulElement = document.createElement('ul');
	ulElement.classList.add('members');
	arr.forEach((el) => {
		const liElement = document.createElement('li');
		liElement.classList.add('member');
		liElement.textContent = el;
		ulElement.appendChild(liElement);
	})
	main.append(ulElement);
}

fetchMemberList(memberList);

지금까지 DOM을 다루는 스프린트를 진행하면서 사용했던 방식이다. 익숙하긴 하지만 개인적으로 그닥 직관적이지 못하다고 느낀다.

const memberList = ['Heeseung', 'Jay', 'Jake', 'Sunghoon', 'Sunoo', 'Jungwon', 'Niki'];
const main = document.querySelector('#container');

const htmlMaker = (tag, className) => textContent => `<${tag} class="${className}">${textContent}</${tag}>`;
const liMaker = htmlMaker('li', 'member');

main.innerHTML = htmlMaker('ul', 'members')(memberList.reduce((acc, curr) => {
  return acc + liMaker(curr);
}, ''))