Javascript - 화살표 함수 표현(arrow function expression)

1. 화살표 함수 표현(arrow function expression)

• this나 super에 대한 바인딩이 없고, methods로 사용될 수 없습니다.
• new.target 키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.
• new와 함께 실행할 수 없습니다.

//기본 구문
let x = (a, b) => {return a + b }

//화살표 함수의 유일한 문장이 "return"일 때 "return"과 중괄호를 생략할 수 있다
let x = (a, b) => { a + b }
let x = (a, b) =>  a + b 


//매개변수가 하나뿐인 경우 -> 괄호 생략 가능
let x = (a) => { a + b }
let x = a => { a + b }

//매개변수가 없는 함수는 괄호가 필요
let x = () => { a + b }

  //고급 구문
    // 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음
    let x = params => ({foo: bar})

    // 나머지 매개변수 및 기본 매개변수를 지원함
    let x = (param1, param2, ...rest) => { statements }
    let x = (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

    // 매개변수 목록 내 구조분해할당도 지원됨
    let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
    f();  // 6

2.  결론

• 콜백함수 this에 값을 참조시킬 때 (this 값에 lexical scope를 참조시킬 때)
• map 사용할 때 this를 넘겨주어 코드를 더 쉽게 작성 가능
• 화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용
  • 함수 본연의 입출력기능을 아주 직관적으로 잘 표현
• 화살표 함수 VS 일반 함수
  • 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.
  • 중복된 매개변수 이름을 선언할 수 없다.
  • 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

 

 

 

 

 

 

 

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

https://velog.io/@hyejin4169/Javascript-ES6-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%93%B0%EA%B3%A0-%EC%99%9C-%EC%93%B8%EA%B9%8C

[Javascript] ES6 화살표 함수는 언제 쓰고, 왜 쓸까?