본문 바로가기

Javascript&jQuery/Javascript기초

화살표 함수

화살표 함수는 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 = (ab, ...args)=>{
    let result = a * b;
    for(let i = 0i < args.lengthi++){
        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);
});



닫기