[Javascript] 13. 화살표 함수 arrow function

화살표 함수

화살표 함수는 지금까지 배웠던 함수를 보다 간결하게 작성할 수 있게 한다.

화살표 함수로 변경하기

아래 함수를 보자.

<script>
let add = function(num1, num2){
	return num1 + num2;
}
</script>

이 함수를 화살표 함수로 바꾸면,

<script>
//화살표 함수
let add = (num1, num2) => {
	return num1 + num2;
}
</script>

function이라는 단어가 사라지고 =>가 생겼다.
크게 다르진 않다.

지금 예제는 코드 부분이 한 줄이고 return문이 있기 때문에 아래처럼 바꿀 수 있다.

<script>
//return문 ()
let add = (num1, num2) => (
	num1 + num2;
)
</script>

return문은 {}가 아닌 return을 지우고 ()로 바꿀 수 있다.

<script>
//return문 ()생략
let add = (num1, num2) => num1 + num2;
</script>

return문이 한 줄이라면 ()도 생략할 수 있다.

<script>
let sayHello = ~~(name)~~ => `Hello, ${name}`;
↓
let sayHello = name => `Hello, ${name}`;
</script>

인수가 각각 하나라면 ()를 생략할 수 있다.

그런데 만약 인수가 없는 함수라면 어떨까?

<script>
let showError = () => {
	alert('error!');
}
</script>

이때는 ()를 생략할 수 없다.

또한,

<script>
let add = (num1, num2) => {
	const result = num1 + num2;
    return result;
}
</script>

return문에 여러 줄의 코드가 있을 경우 ()를 사용할 수 없다.

화살표 함수는 es6이후에 굉장히 활발하게 사용되고 있기 때문에 필수적으로 알고 있어야 한다!