화살표 함수
화살표 함수는 ES6에서 새롭게 도입된 함수 표기 방법입니다.
기존 함수 표기방법을 단순화해서 함수 전체의 구조를 단순화하는 장점이 있습니다.
우리가 지금까지 알던 함수는
function add(a, b){
return a+b;
}
이렇게 표기를 했습니다.
화살표 함수는 이런 함수 표현을
let add = (a, b)=>a+b;
console.log(add(3,5));
와 같이 한문장으로 된 연산식과 같은 형태로 단순화를 합니다.
화살표 함수는 몇가지 간단한 표기 규칙이 있으며, 이 규칙에 맞춰서 사용해야 합니다.
규칙 |
조건 |
파라메터 |
0개 - 빈괄호 () 반드시 표기 - ()=>{} 1개 - () 생략 가능. - arg1=>{} 2개 이상 - ()로 파라메터들을 감싸서 표기- (arg1, arg2)=>{} |
return 구문 사용 |
블록({}) 으로 코드를 감싼 경우 반환할 값이 있으면 반드시 return 문으로 반환해야 함. 블록으로 감싼 코드에 return 문이 없을 경우 undefined가 반환됨. 블록을 생략한 경우 return 또한 생략 가능. |
최소 2개 이상의 다양한 파라메터를 받는 화살표 함수는 다음과 같이 표현할 수 있습니다.
// ...args 는 "나머지 파라메터"라는 가변 파라메터 표기법입니다. 나머지 파라메터 부분에서 배웁니다.let multiply = (a, b, ...args)=>{ let result = a * b; for(let i = 0; i < args.length; i++){ result *= args[i]; } return result;}
console.log(multiply(1,2,3,4));
파라메터 없는 가장 단순한 화살표 함수는 다음과 같이 표기할 수 있습니다.
const alert = ()=>console.log('error');
콜백함수와 익명함수에도 화살표 함수는 그대로 사용할 수 있습니다.
setTimeout(()=>console.log('timeout'), 3000);
items.forEach(item=>{ console.log(item.value);});