[2023-12-06] JAVASCRIPT - 생성자 함수 내에서 일반 함수와 화살표 함수의 차이점

 

오늘은 자바스크립트 생성자 함수 내에서 일반 함수와 화살표 함수의 차이점에 관하여 알아보겠다.

이 두 가지 함수의 가장 큰 차이점은 'this'의 바인딩 방식이다.

일반 함수에서 'this'는 호출 시점에 결정되는데,

생성자 함수에서 일반 함수를 선언하면 'this'는 그 생성자 함수의 인스턴스를 가리킨다.

 

function Car() {
  this.speed = 0;

  this.speedUp = function() {
    this.speed++;
  };
}

const car = new Car();
car.speedUp(); 
console.log(car.speed); // 1

 

위 예시에서 speedUp 메소드는 일반 함수로 선언되었고, 이 메소드를 호출하면 this는 car 인스턴스를 가리킨다.

 

그러나 화살표 함수에서는 'this'가 바인딩되지 않는다.

화살표 함수에서 'this'를 사용하면, 그 'this'는 화살표 함수의 외부 스코프에서 값을 찾게 된다.

 

function Car() {
  this.speed = 0;

  this.speedUp = () => {
    this.speed++;
  };
}

const car = new Car();
car.speedUp(); 
console.log(car.speed); // 1

 

위 예시에서 speedUp 메소드는 화살표 함수로 선언되었지만, this는 여전히 car 인스턴스를 가리킨다.

왜냐하면 화살표 함수의 'this'는 함수를 선언할 때의 스코프를 유지하기 때문이다.

따라서 여기서 'this'는 Car 함수의 'this'를 가리킨다.

 

따라서 생성자 함수 내에서 일반 함수와 화살표 함수의 차이는 주로 'this'의 바인딩 방식에 있다.

이를 잘 이해하면 JavaScript의 함수를 더욱 잘 이해하고 활용할 수 있다.