화살표 함수와 일반 함수

화살표 함수와 일반 함수(함수 표현식)는 혼동을 일으킬 수 있는 차이점을 알지 못한 채 코드에서 서로 바꿔 사용할 수 있습니다. 이 기사에서는 화살표 함수와 일반 함수의 3가지 중요한 차이점에 대해 언급하겠습니다.

1. 이 값

이 값은 함수가 호출되는 방식에 따라 다르며 자바스크립트에서는 함수를 호출하는 4가지 방법이 있습니다.

1. 단순 호출

 const foo = function(){
  console.log(this) // global object
}  
foo()  

2. 메소드 호출

const obj = {
 foo(){
 console.log(this) // { foo: [Function: foo] }

}
}
obj.foo()

3. 간접 호출

const obj =  {
  name : "javascript"
}
const foo = function(){
 console.log(this) // { name: 'javascript' }

}

foo.call(obj)

4. 생성자 함수

const Language = function(name){
 this.name = name
}

new Language("javascript") // {name:javascript}

화살표 함수의 경우 this의 동작이 일반 함수와 다릅니다. 화살표 함수는 this에 대한 바인딩이 없지만 내부에 정의된 화살표 함수의 어휘 범위를 기반으로 이를 설정합니다. 이 차이는 화살표 함수를 메서드로 사용할 때 이상한 동작을 일으킬 수 있으므로 화살표 함수를 메서드로 사용하지 않는 것이 좋습니다.

const obj = {
 foo :()=>{
 console.log(this) // window
}
}
obj.foo()

2. 생성자

화살표 함수는 생성자로 사용할 수 없습니다. 화살표 함수의 접두어를 new 키워드로 호출하려고 하면 자바스크립트에서 오류가 발생합니다.

 const Language = (name)=>{
 this.name = name
}

new Language("javascript") // TypeError : Language is not a constructor

3. 인수 객체

일반 함수의 본문 내에서 arguments는 함수 호출 인수를 포함하는 배열과 유사한 객체입니다.

function myFunction() {
  console.log(arguments);
}
myFunction('a', 'b'); // { 0: 'a', 1: 'b', length: 2 }

반면에 화살표 함수 내부에는 특별한 arguments 키워드가 없지만 외부 함수의 인수에 액세스합니다.

function RegularFunction() {
  const ArrowFunction = () => {
    console.log(arguments);
  }
  ArrowFunction('c', 'd');
}
RegularFunction('a', 'b');  logs { 0: 'a', 1: 'b', length: 2

결론

이 기사에서 화살표 함수와 일반 함수의 3가지 차이점에 대해 논의했습니다.

이 값

생성자

인수 객체

화살표와 일반 ​​함수의 다른 차이점은 무엇입니까?