[javascript | JS] 화살표 함수와 this binding

javascript 호출 스택부터 다시 공부하다가 사고회로의 정지를 안겨준 this 먼저 정리하기

 

 

일반적으로 this는 가장 가까이 있는 객체를 바인딩한다

 

하지만 화살표 함수는 자신만의 this를 가지지 않고, 선언된 위치에서 this를 상속한다 (자신의 바깥쪽 스코프에서 this 값을 참조)

 

호출 시점에 사용된 객체로 this를 바인딩하는 일반 함수와는 달리, 화살표 함수 내에서 사용되는 this는 처음부터 전역객체를 가리키게 된다

 

const obj1 = {
    count: 1,
    increase() {
        this.count++;
    }
};

obj1.increase(); 
console.log(obj1.count); // 2

const obj2 = { 
  count: 1, 
  increase: () => { 
    this.count++; 
  }, 
}; 

obj2.increase(); 
console.log(obj2.count); // 1

위의 코드에서 obj1의 경우 객체 내의 increase 함수 내부의 this는 해당 객체를 가리키므로 obj1.increase()를 호출하면 count 값이 변하지만, 화살표 함수로 작성된 obj2의 경우 this가 전역객체인 window를 가리키므로 obj2.increase() 호출 시 count 값이 변하지 않는다

 

 

화살표 함수는 자신의 this를 가지지 않고, 외부 스코프에서 상속받는 방식으로 동작하여 일관된 this 동작을 보장하여 개발자가 의도하지 않은 실수를 줄일 수 있지만 왜 이렇게 만들어서 사람 헷갈리게 하냐

 

 

 

 

 

참고) obj1 객체 내의 method로 정의된 increase 함수는 왜 저렇게 쓰인 걸까 gpt에게 물어봤다

- JavaScript 객체 안에 함수를 메소드로 정의하는 이유는 객체의 동작과 상태를 함께 관리하기 위해서입니다. 객체는 데이터와 해당 데이터를 조작하는 동작을 함께 묶어서 표현하는 자료구조입니다. 이러한 동작을 함수로 정의하고 객체 내부에 메소드로 추가하면, 객체의 상태와 동작을 한 곳에서 관리할 수 있습니다.

메소드로 함수를 정의하는 것은 객체 지향 프로그래밍의 핵심 원리 중 하나인 캡슐화(encapsulation)를 실현하는 방법입니다. 객체 내부의 데이터와 동작은 외부에서 직접적인 접근을 제한하고, 객체가 제공하는 인터페이스를 통해서만 상호작용할 수 있습니다. 이는 코드의 가독성과 유지보수성을 향상시키며, 객체의 내부 구현을 외부에 감추어 정보은닉(information hiding)을 할 수 있습니다.

메소드로 함수를 정의하는 것은 객체의 특정 동작을 객체의 상태에 의존하도록 만들 수도 있습니다. 예를 들어, 객체가 특정 상태에 있을 때만 동작을 실행하도록 조건을 체크할 수 있습니다. 이는 객체의 일관성과 유효성을 유지하는 데 도움을 줄 수 있습니다.

JavaScript에서 객체의 메소드는 객체 리터럴, 생성자 함수를 통한 객체 생성, 클래스를 통한 객체 생성 등 다양한 방법으로 정의할 수 있습니다. 메소드에는 객체 내부의 다른 속성에 접근할 수 있는 this 키워드가 제공되므로, 객체 내부의 상태에 접근하고 조작할 수 있습니다.