어떻게 "this" 키워드가 작동하며 언제 사용해야 합니까?

this 키워드가 하는 일에 대해 명확한 설명을 찾고, 올바르게 사용하는 방법을 알고 싶습니다.

이 키워드는 이상하게 동작하는 것 같고, 왜 그런지 완전히 이해하지 못합니다.

this는 어떻게 동작하며 언제 사용해야 합니까?

답변 1

⁴: 또한 this 값을 제공하는 여러 다른 내장 및 호스트 메소드가 있습니다. 특히 Array.prototype.map, Array.prototype.forEach 등이 있는데, 이들은 두 번째 인자로 thisArg를 허용합니다. 누구나 (func, thisArg) => func.bind(thisArg), (func, thisArg) => func.call(thisArg) 등과 같이 자신만의 메소드를 만들어서 this를 변경할 수 있습니다. 항상 MDN은 훌륭한 문서를 제공합니다.

재미로, 몇 가지 예제로 이해를 테스트해보세요

각 코드 스니펫에 대해 다음 질문에 대답하세요: 표시된 줄에서 this의 값은 무엇인가요? 그 이유는 무엇인가요?.

답을 보려면, 회색 상자를 클릭하세요.

1. 
   

   if(true){
     console.log(this); // 여기의 `this`는 무엇일까요?
   }
   

   
   

   
   

   globalThis. 표시된 줄은 초기 전역 실행 context에서 평가됩니다.

   
   

   
   



2. 
   

   
   

   const obj = {};
   function myFun(){
     return { // 여기의 `this`는 무엇일까요?
       is obj: this === obj,
       is globalThis: this === globalThis
     };
   }
   obj.method = myFun;
   console.log(obj.method());
      

   
   

   
   
   
   

   
   

   obj. 객체의 프로퍼티로 함수를 호출할 때, 함수는 참조 obj.method의 기본(base)에 this 바인딩이 설정되어 호출됩니다. 즉, obj입니다.

   
   

   
   



3. 
   

   
   

   const obj = {
       myMethod: function(){
         return { // 여기의 `this`는 무엇일까요?
           is obj: this === obj,
           is globalThis: this === globalThis
         };
       }
     },
     myFun = obj.myMethod;
   console.log(myFun());
      

   
   

   
   
   
   

   
   

   globalThis. 함수 값 myFun / obj.myMethod은 객체 속성으로 호출되지 않았기 때문에, this 바인딩은 globalThis가 됩니다.
   이는 Python과는 다릅니다. Python에서는 메소드(obj.myMethod)에 접근하면 bound method object가 생성됩니다.

   
   

   
   



4. 
   

   
   

   const obj = {
       myFun: () => ({ // 여기의 `this`는 무엇일까요?
         is obj: this === obj,
         is globalThis: this === globalThis
       })
     };
   console.log(obj.myFun());
      

   
   

   
   
   
   

   
   

   globalThis. 화살표 함수는 자체적인 this 바인딩을 만들지 않습니다. 렉시컬 스코프는 초기 전역 스코프와 동일하므로, this는 globalThis입니다.

   
   

   
   


5. 
   

   function myFun(){
     console.log(this); // 여기의 `this`는 무엇일까요?
   }
   const obj = {
       myMethod: function(){
         eval(myFun());
       }
     };
   obj.myMethod();
   

   
   

   
   

   globalThis. 직접 eval 호출을 평가할 때는 this는 obj입니다. 그러나 eval 코드에서 myFun은 객체로부터 호출되지 않았으므로 this 바인딩은 전역 객체로 설정됩니다.

   
   

   
   



6. 
   

   
   

   function myFun() {
     // 여기의 `this`는 무엇일까요?
     return {
       is obj: this === obj,
       is globalThis: this === globalThis
     };
   }
   const obj = {};
   console.log(myFun.call(obj));
      

   
   

   
   
   
   

   
   

   obj. myFun.call(obj);는 특별 내장 함수인 Function.prototype.call을 호출하며, 첫 번째 인수로 thisArg를 받습니다.

   
   

   
   



7. 
   

   
   

   class MyCls{
     arrow = () => ({ // 여기의 `this`는 무엇일까요?
       is MyCls: this === MyCls,
       is globalThis: this === globalThis,
       is instance: this instanceof MyCls
     });
   }
   console.log(new MyCls().arrow());
      

   
   

   
   
   
   

   
   

   MyCls의 인스턴스입니다. 화살표 함수는 this 바인딩을 변경하지 않으므로, 렉시컬 스코프에서 가져옵니다. 따라서 이는 클래스 필드(a = this;)와 정확히 같습니다. static arrow로 변경해 보세요. 예상한 결과가 나오나요?

   
   

   
   

답변 2

this 키워드는 자바스크립트에서 사용되는 특수한 키워드입니다. 이 키워드는 현재 실행 중인 함수 및 객체를 지칭하기 위해 사용됩니다. this 키워드를 사용하면 현재 컨텍스트에 접근할 수 있으며, 객체 내에서 메서드를 호출하거나 생성자 함수를 사용할 때 유용하게 쓰일 수 있습니다.
이 this 키워드의 동작 방식을 이해하는 것은 중요합니다. this는 실행 컨텍스트에 따라 그 값이 동적으로 변경될 수 있습니다. 즉, 함수의 호출 방식에 따라 this가 참조하는 객체가 달라질 수 있습니다. 간단한 예를 들어 설명하면, 객체 내부의 메서드를 호출할 때 this는 해당 객체를 가리킵니다. 그러나 메서드를 일반적인 방식이 아닌 다른 방식으로 호출할 경우 this의 값은 달라질 수 있습니다.
this 키워드는 주로 객체 지향 프로그래밍에서 사용됩니다. 이 키워드를 사용하여 메서드 내부에서 객체의 속성에 접근하거나 수정할 수 있습니다. 또한 생성자 함수를 사용하여 새로운 객체를 만들 때에도 this를 사용하여 새로운 인스턴스에 속성을 할당할 수 있습니다.
this 키워드를 언제 사용해야 하는지 결정하는 것은 매우 중요합니다. 보통 this 키워드는 메서드 내에서 현재 객체에 접근할 때 사용됩니다. 예를 들어, 객체의 메서드에서 객체의 속성을 참조하고자 할 때 this 키워드를 사용할 수 있습니다.
또한 생성자 함수를 사용하여 객체를 만들 때에도 this 키워드를 사용해야 합니다. 생성자 함수는 객체를 인스턴스화하기 위해 사용되는 특별한 함수로, this 키워드를 사용하여 인스턴스에 속성을 할당할 수 있습니다.
this 키워드를 사용할 때 주의해야 할 점도 있습니다. 예를 들어, 화살표 함수 내에서는 this 키워드가 자동으로 바인딩되지 않으며, 주변 스코프에 바인딩됩니다. 또한, 중첩된 함수 내에서 this 키워드를 사용할 경우 스코프가 변경되기 때문에 주의가 필요합니다.
결론적으로, this 키워드는 자바스크립트에서 객체 지향 프로그래밍을 구현하는 데 중요한 역할을 합니다. 이 키워드를 사용하여 현재 실행 컨텍스트에 접근하고 객체의 속성에 접근 또는 수정할 수 있습니다. 메서드 내부에서 객체의 속성을 참조하고자 할 때나 객체를 생성할 때 this 키워드를 적절히 사용하는 것이 중요합니다. 그러나 주의할 점도 있으므로 this 키워드를 사용할 때에는 문맥을 잘 고려해야 합니다.