JS에서 this 키워드

I’m happy to translate the article for you, but I’ll need the full text you’d like translated (the body of the article). Could you please paste the content you want converted to Korean? I’ll keep the source link at the top exactly as you requested.

소개

JavaScript의 this 키워드는 주니어와 시니어 개발자 모두를 혼란스럽게 하는 경우가 많습니다.
this를 이해하는 것은 함수가 정의된 위치가 아니라 호출되는 방식에 달려 있습니다.

기본 예제

let obj = {
  name: "Kush",
  displayName() {
    console.log(`My name is ${this.name}`);
  }
};

obj.displayName(); // My name is Kush

메서드가 객체에서 분리되면 바인딩이 변경됩니다:

let person = obj.displayName;
person(); // My name is undefined

비엄격 모드에서는 this가 전역 window 객체(브라우저에서)로 기본값이 됩니다.
엄격 모드에서는 this가 undefined입니다.

화살표 함수

화살표 함수는 자체 this를 가지지 않으며, 주변 스코프에서 렉시컬하게 this를 캡처합니다.

let obj = {
  name: "Kush",
  personName: () => {
    console.log(`My name is ${this.name}`);
  }
};

obj.personName(); // My name is undefined

Source:

this 이해와 규칙

JavaScript는 네 가지 주요 바인딩 규칙을 따릅니다. 적용되는 규칙은 함수가 어떻게 호출되는지에 따라 달라집니다.

1. 기본 바인딩 (Default Binding)

일반 함수가 명시적인 객체 없이 호출될 때, this는 기본 바인딩 규칙을 따릅니다.

function show() {
  console.log(this);
}

show(); // 브라우저 환경(비‑strict): Window 객체
         // strict 모드: undefined

2. 암시적 바인딩 (Implicit Binding)

함수가 객체의 메서드로 호출될 때, this는 그 객체를 가리킵니다.

const user = {
  name: "Kush",
  greet() {
    console.log(this.name);
  }
};

user.greet(); // Kush

암시적 바인딩 상실

객체 참조를 잃어버리는 흔한 실수:

const user = {
  name: "Kush",
  greet() {
    console.log(this.name);
  }
};

const greetFn = user.greet;
greetFn(); // undefined (기본 바인딩이 적용됨)

3. 명시적 바인딩 (call, apply, bind)

call, apply, bind를 사용해 this를 명시적으로 지정할 수 있습니다.

const user1 = { name: "Kush" };
const user2 = { name: "Rahul" };

function greet() {
  console.log(this.name);
}

greet.call(user1); // Kush
greet.call(user2); // Rahul

4. 화살표 함수 (Lexical Binding)

화살표 함수는 자신이 정의된 렉시컬(주변) 스코프에서 this를 상속받습니다.

const user = {
  name: "Kush",
  greet: () => {
    console.log(this.name);
  }
};

user.greet(); // undefined (전역 스코프에서 상속받음)

화살표 함수의 올바른 사용

Arrow 함수는 다른 메서드 내부에서 유용하며, 해당 메서드의 this를 캡처합니다.

const user = {
  name: "Kush",
  greet() {
    const say = () => {
      console.log(this.name);
    };
    say();
  }
};

user.greet(); // Kush

공통 비동기 예제 (setTimeout)

문제: 일반 함수 콜백

const user = {
  name: "Kush",
  greet() {
    setTimeout(function () {
      console.log(this.name);
    }, 1000);
  }
};

user.greet(); // undefined (callback's `this` is global)

해결: 화살표 함수 콜백

const user = {
  name: "Kush",
  greet() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

user.greet(); // Kush

Source: …

퀴즈: 출력 예측

1. const user = {
     name: "Kush",
     greet() {
       setTimeout(function () {
         console.log(this.name);
       }, 0);
     }
   };
   user.greet();

2. const user = {
     name: "Kush",
     greet() {
       setTimeout(() => {
         console.log(this.name);
       }, 0);
     }
   };
   user.greet();

3. const user1 = { name: "Kush" };
   const user2 = { name: "Rahul" };
   
   function greet() {
     console.log(this.name);
   }
   
   greet.call(user1);
   greet.call(user2);

4. const user = { name: "Kush" };
   const greet = () => {
     console.log(this.name);
   };
   greet.call(user);

5. const user = {
     name: "Kush",
     address: {
       name: "Delhi",
       greet() {
         console.log(this.name);
       }
     }
   };
   user.address.greet();

6. const user1 = {
     name: "Kush",
     greet() {
       console.log(this.name);
     }
   };
   const user2 = { name: "Rahul" };
   user2.greet = user1.greet;
   user2.greet();

7. const user = {
     name: "Kush",
     greet() {
       return function () {
         console.log(this.name);
       };
     }
   };
   user.greet()();

모든 출력 결과를 정확히 예측할 수 있다면, 올바른 방향으로 가고 있는 것입니다!