Koans-05_ArrowFunction

• 화살표 함수(ArrowFunction)
  const arrowFunction = (parameter) =>{return}

• 기본문법

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

출처: https://poiemaweb.com/es6-arrow-function

• 특징

• (1) function 키워드를 생략하고 화살표 => 를 붙입니다

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

• (2) 리턴을 생략할 수 있습니다

  const subtract = (x, y) => x - y

• (3) 필요에 따라 소괄호를 붙일 수도 있습니다

  const multiply = (x, y) => (x * y)

• (4) 파라미터가 하나일 경우 소괄호 생략이 가능합니다

  const divideBy10 = x => x / 10

• (5) 콜백함수로 사용 할수 있다.

  • CallBack 함수란 이름 그대로 나중에 호출되는 함수를 말한다.

  const arr = [1, 2, 3];
  const pow = arr.map(x => x * x);

• (6) function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.
  this관련해서는 나중에 한번 정리해봐야겠다.

• 화살표 함수의 클로저 사용

     const adder = x => {
      return y => {
        return x + y
      }
    }
  
    console.log(adder(30)(10))//40
  
    const subtractor = x => y => {
      return x - y
    }
  
    console.log(subtractor(30)(10))///20