전에 배운 함수 파트에서 설명을 할려고 했지만,
내용이 많이 길어져서 나누게 되었다.
화살표 함수에 대해서 알아보도록 하자
1. 화살표 함수?
ES6에서 도입된 화살표 함수는, function 키워드 대신에
화살표(fat arrow, =>)를 사용해 좀 더 간략한 방법으로
함수를 선언을 할 수가 있다.
함수 코드를 더 짧고 깔끔하게 만들고,
구조가 단순해서 실수를 할 여지를 줄일 수 있다.
그래서 화살표 함수 표현식이 인기가 많다.
const 화살표_함수_표현식 = (매개변수1, 매개변수2) => {
// ...
}위 함수에서 봤듯이 화살표 함수는 뚱뚱한 화살표 모양을 사용한다.
처음엔 화살표 함수 표현식이 어렵게 느껴질 수도 있다. 하지만,
전에 말한 함수 파트에서 말했듯이 화살표 함수 또한 표현식일 뿐이다.
함수 표현식과 화살표 함수 표현식을 더 보자면 이해하기 쉬울 것이다.
// 함수 표현식
const sum = function(x, y) {
return x + y
}
// 화살표 함수 표현식
const add = (x, y) => {
return x + y
}함수 표현식을 화살표 함수 표현식로 변환할 때 차이점이 있다.
1. function 키워드 제거
2. 함수의 (), {} 사이에 => 추가
2. 화살표 함수 요인
화살표 함수 표현식에 구문은 두 가지의 요인으로 인해 달라질 수 있다.
1. 매개변수 개수
2. 암묵적 반환
요인1. 매개변수 개수
매개변수 없음
화살표 함수 표현식에 매개변수가 없을 경우,
소괄호(())를 밑줄(_)로 변경할 수 있다.
const 매개변수_없음 = () => {
// ...
}
const 매개변수가_없지만_밑줄로_표현 = _ => {
// ...
}여기서 밑줄(_)은 유효한 "매개변수 이름"일 뿐이지,
암묵적으로는 아무 값도 받지 않음을 나타낸다.
매개변수 1개
화살표 함수 표현식의 매개변수가 한 개인 경우,
( (소괄호) )를 생략할 수 있다.
const 매개변수_1개_괄호_포함 = (매개변수1) => {
// ...
}
const 매개변수_1개_괄호_생략 = 매개변수1 => {
// ...
}매개변수 2개 이상
( (소괄호) )를 생략할 수 없다.
const 매개변수_2개_이상_괄호_반드시_포함 = (매개변수1, 매개변수2) => {
// ...
}요인2. 암묵적 반환
화살표 함수 표현식은 아래 조건 2가지가 충족될 때,
자동으로 반환문을 생성한다.
1. 함수에 한 줄의 코드만 작성한다.
2. 해당 코드 줄을 중괄호( { } )로 묶지 않는다.
암묵적으로 반환 기능을 사용하면,
세 줄의 코드를 단 한 줄로 줄일 수가 있다.
const add = function(x, y) {
return x + y
}const add = (x, y) => x + y화살표 함수 VS. 일반 함수?
화살표 함수는 등장 이후에 큰 인기를 많이 얻었다.
그러나 그 열풍은 오늘날에 다소 사그라 들었는데,
현재 화살표 함수 표현식과 일반 함수 표현식을 사용하는 방법에 대해
간단한 기준은 아래와 같다.
- 함수를 선언할 때 -> 함수 선언 사용
- 익명 함수가 필요한 경우 -> 화살표 함수 표현식 사용
익명함수가 유용하게 사용되는 경우는 "콜백(callback)"이다.
익명함수에 대해서는 추후에 조금씩 배워나갈 것이다.
결론
- function 키워드 대신에, => 사용
- 매개변수의 개수에 따라 소괄호가 생략 또는 필수이다.
- 중괄호( { } )가 없을 땐, 자동으로 값이 반환(암묵적 반환)
- 객체 반환 시, ( { } ) 괄호로 감싸기
- 함수 선언 또는 화살표 함수 표현식은 방법에 따라 사용한다.
(함수 선언 -> 일반함수 / 익명함수(콜백) -> 화살표 함수)
화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용하다.
본문이 한 줄이 아니라면, 다른 방법으로 화살표 함수를 작성해야 한다.
- 중괄호 없이 작성 :(...args) => expression - 화상표 오른쪽에 표현식을 둔다.
함수는 이 표현식을 평가하고, 평가 결과를 반환한다. - 중괄호와 함께 작성: (...args) => { body } - 본문이 여러 줄로 구성되었다면,
중괄호를 사용해야 한다. 다만 이 경우는 반드시 return 지시자를 사용해
반환값을 명기해줘야 한다.
출처
야무쌤 자바스크립트 강의
모던자바스크립트 - 화살표 함수
