[JS] arrow function (화살표함수)

내가 정보를 찾고자 MDN을 뒤질 때 마다 날 괴롭히던 화살표함수를 배우게 되었다.

 

생김새는 이러하다.

//함수 표현식

const add = function(x,y){
	return x+y
    }
    
//화살표 함수

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

이렇게 화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있다.

장난하나.. 이게 축약형이야? 할 수도 있겠지만 화살표함수의 한계는 아직 한참 남았다.

 

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

함수의 본문에 return문 밖에 없을 경우에는 return을 제외하고 나타낼 수 있다.

여기서 단순히 묶어줌을 뜻하는 () 소괄호는 사용이 가능하지만 {} 중괄호는 사용하면 안된다.

 

//함수 표현식
const adder = function(x) {
  return function(y) {
    return x + y
  }
}

// 1. 화살표함수는 function을 생략할 수 있다.
// 2. 화살표함수는 본문에 return밖에 없을 때, return을 생략할 수 있다.
// 3. 화살표함수는 파라미터가 한개라면 파라미터를 감싸는 소괄호를 생략할 수 있다.

//화살표함수
const adder = x => y => x+y

이렇게 기깔나게 축약된 함수를 만들 수 있다. 아직 이런 간단한 예제가 아니면 어렵다.

 

 

코드예시는 코드스테이츠를 참고하였습니다.