자바스크립트의 화살표 함수

MDN에 따르면 화살표 함수 표현식은 this, arguments, super 또는 new.target 키워드에 대한 자체 바인딩이 없지만 구문상 일반 함수 표현식의 대안입니다. 화살표 함수 표현식은 메서드로 적합하지 않으며 생성자로 사용할 수 없습니다.

자바스크립트의 일반 함수와 화살표 함수에는 세 가지 미묘한 차이점이 있습니다.

• 이 바인딩을 소유하지 않음

  화살표 함수에는 고유한 값이 없습니다. 화살표 함수 내부의 this 값은 항상 둘러싸는 범위에서 상속됩니다.

예시

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
   this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

출력

이것은 출력을 줄 것입니다 -

100
150
150

화살표 함수가 범위 밖에서 이 객체를 변경한 것을 확인하십시오. 일반 함수는 자체적으로 변경했습니다.

• 화살표 함수에는 인수 배열이 없습니다. JS에서 함수의 인수 배열은 함수에 전달된 모든 인수를 가져오는 데 사용할 수 있는 특수 개체입니다. 이와 유사하게 화살표 함수는 arguments 객체에 대한 자체 바인딩이 없으며 범위를 둘러싸는 인수에 바인딩됩니다.
• 화살표 함수는 호출 가능하지만 생성할 수 없습니다. 함수가 생성 가능하면 new, 즉 new User()로 호출할 수 있습니다. 함수가 호출 가능한 경우 new 없이 호출할 수 있습니다(즉, 일반 함수 호출).

함수 선언/표현식을 통해 생성된 함수는 구성 가능하고 호출 가능합니다.

화살표 함수(및 메서드)는 호출만 가능합니다. 클래스 생성자는 생성만 가능합니다.

호출할 수 없는 함수를 호출하거나 생성되지 않는 함수를 생성하려고 하면 런타임 오류가 발생합니다.

예시

let arrowFunc = () => {}
new arrowFunc()

출력

이 코드는 오류를 제공합니다 -

arrowFunc is not a constructor