5. Arrow function

1) Arrow function 설명

기존 함수 방식을 보다 간단하게 표현

이름을 가진 변수에 할당하거나 다른 함수의 아규먼트를 선언할 때 주로 활용

const dbl = function(number) {
	return number * 2;
}

console.log(dbl(5));

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', function() {
	console.log('button is clicked!');
}

위 코드를 arrow function으로 변환

const dbl = (number) => {
	return number * 2;
}

console.log(dbl(5));

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', () => {
	console.log('button is clicked!');
}

function을 지우고 function의 소괄호 오른편에 화살표를 표시한다.

간단하게 표현하기 위해 만들어진 함수이므로 더 간단하게 표현이 가능하다.

const dbl = number => number * 2 ;

console.log(dbl(5));

2) Arrow function의 적용

이렇게 간결하게 표현이 가능하지만 모든 상황에서 적용되는 것은 아니다.

• parameter가 하나인 arrow function은 파라미터를 감싸는 소괄호 생략가능, 파라미터가 두개 이상이면 소괄호를 생략 불가하며 가독성을 위해 하나의 파라미터라도 생략을 하지 않을 수 있다.

• 내부 동작이 하나의 return문으로만 되어있다면 중괄호와 함께 return문도 생략가능하다. return문 외 다른 동작이 있으면 불가능

• return 값이 객체인 경우 에러가 발생 - 중괄호를 소괄호로 감싸줘야함

const example = () => {
	return { name : "Tom", };
}

console.log(example())

// 이를 간단하게 하기 위해

const example = () => ({ name : "Tom", })

// 이렇게 소괄호를 씌어줘야 중괄호를 함수의 동작부분으로 구분하는 이중괄호로 해석하지 않는다.

• argument 객체 사용이 불가능하다.