화살표 함수

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해봅시다.

📍 함수 표현식

const add = function (x, y) {
  return x + y
}

📍 화살표 함수

const add = (x, y) => {
  return x + y
}

function을 생략하고 화살표로 표현해줍니다.
함수의 본문에 return 문만 있는 경우 return을 생략가능합니다.

const add = (x, y) => x + y
const add = (x, y) => (x + y)   // O, 정상 작동
const add = (x, y) => { x + y } // X, undefined 리턴 

return을 생략하고 중괄호{}를 생략하여 작성할 수 있습니다.
return은 생략하였는데 중괄호는 생략을 안하면 오류입니다.
return 을 생략할때는 {}중괄호도 함께 생략
return문의 식은 ()괄호를 써도 되고 생략해도 됩니다.
만약 함수 본문이 두줄이상일 경우 return과 중괄호를 생략하기 보다는 쓰는것이 좋습니다.

한가지 더 함축해 봅시댜!

const adder = function(x) {
  return function(y) {
    return x + y
  }
}
adder(5)(7) // 12

위에 함수를 함축하면 !

const adder = (x) => {
  return (y) => {
    return x + y
  }
}

function을 없애고 ,

const adder = x => {
  return y => x + y
}

파라미터(매개변수)가 한개 라면 소괄호 생략 가능 ,

const adder = x => y => x + y

🌸 팁

• call, apply, bind를 사용할 수 없습니다.
• 화살표 함수의 실행은 this를 결정짓지 않습니다