[JavaScript] 화살표 함수

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);
}, ''))

화살표함수로 클로저를 표현한 방식으로 바꿔본 것이다. 첫번째 코드와 결과는 비슷하다. (줄바꿈이 없다는점을 제외하면 동일하다.)
innerHTML을 사용해야 한다는 점이 걸리긴 하지만 엄청 간단해지고 훨씬 직관적이다.