화살표 함수


화살표 함수는 ES6에 새로 도입된 문법으로 함수 표현식을 더욱 간결하게 작성할 수 있음.

화살표 함수 사용법

  1. function 키워드 생략
  2. 파라미터가 1개라면 () 소괄호 생략 가능
  3. 파라미터가 1개도 없으면 괄호안 내용을 비워두면 됨. const func = () => console.log('Hi')
  4. 파라미터가 2개 이상이라면 소괄호 명시
  5. 함수 본문이 1줄이면 {} 중괄호와 return 생략 가능. ❗️ 만약 객체를 return 한다면 반드시 소괄호 () 로 감싸줘야 한다. => 화살표 기호 뒤에 {} 중괄호를 만나면 여러 줄 구문으로 해석하기 때문.
  6. 함수 본문이 2줄 이상이면 {} 중괄호와 return 명시
  7. 함수 본문의 return 키워드를 생략하고 () 소괄호만 쓸 수도 있음.
const add = function (x, y) {
  return x + y
}
const add = (x, y) => {
	return x + y
}
// 파라미터가 2개이므로 소괄호 사용, 함수 본문이 1줄이므로 중괄호와 return 생략
const add = (x, y) => x + y 
// return 안쓰고 소괄호(표현식)만 쓸 수도 있음. 소괄호 안 내용이 리턴값이 된다.
const add = (x, y) => (x, y)
// 잘못된 화살표 함수 예제. 중괄호를 사용했으므로 return을 명시해줘야 함. 
const add = (x, y) => { x + y }

클로저 함수 사용 예

화살표 함수는 클로저를 표현할 때 매우 유용함

const adder = function(x) {
	return function(y) {
		return x + y
	}
}
const adder = (x) => {
  return (y) => {
    return x + y
  }
}
// 파라미터가 1개이므로 소괄호 생략 가능
const adder = x => { 
	return y => x + y
}
// 함수 표현식이 1줄이므로 리턴 생략 가능
const adder => x => y => x + y