JS : understanding of 'this'

정윤호·2024년 5월 10일

Introduction:

자바스크립트에서 this 키워드를 이해하는 것은 자바스크립트 언어를 마스터하고, 효율적이고 버그가 없는 코드를 작성하는 데 중요하다. 중요성에도 불구하고, 'this'는 초심자들에게 가장 혼란스러운 측면 중 하나일 수 있는데, 이 문서에서는 'this' 주변의 신비를 해체하고 다른 맥락에서의 동작을 탐색한다.

What is 'this'?

자바스크립트에서 'this'는 'this' 키워드가 속한 객체를 가리키는 특별한 키워드다.
다른 프로그래밍 언어와 달리 'this'의 값은 함수가 정의된 위치에 따라 결정되는 것이 아니라 호출 방식에 따라 달라진다.
'this'를 사용하면 함수가 동적으로 여러 객체에서 작동할 수 있으며 코드의 재사용성과 유연성을 향상시킨다.

Global Context:

함수 바깥의 전역 컨텍스트에서 'this'는 전역 객체를 가리킨다. 브라우저에서는 'window'이고 Node.js에서는 'global'이다.
예시:

브라우저 환경에서
Node.js 에서

Function Context:

함수 내부에서 'this'의 값은 함수가 호출된 방식에 따라 달라진다.
함수가 객체의 메서드로 호출될 때 'this'는 해당 객체를 가리킨다.
예시:

const obj = {
  name: 'John',
  greet() {
    console.log(`안녕하세요, ${this.name}!`);
  }
};
obj.greet(); // 출력: 안녕하세요, John!

const newObj = {
    name: 'Jane',
    greet: obj.greet,
};
newObj.greet(); // 출력: 안녕하세요, Jane!

Constructor Context:

함수가 'new' 키워드와 함께 생성자로 사용될 때, 'this'는 새로 생성된 인스턴스를 가리킨다.
예시:

function Person(name) {
  this.name = name;
}
const person = new Person('Alice');
console.log(person.name); // 출력: Alice

Explicit Binding:

컨텍스트가 명확하지 않은 상황에서는 'call()', 'apply()', 또는 'bind()'와 같은 메서드를 사용하여 'this'를 명시적으로 설정할 수 있다.

call() Method:

call() 메서드는 지정된 this 값을 가지고 함수를 호출하고 개별적으로 아규먼트를 제공할 수 있게 한다.
문법: function.call(thisArg, arg1, arg2, ...)
예제:

function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

const person = { name: '준식' };
sayHello.call(person, '안녕하세요'); // 결과: 안녕하세요, 준식!

이 예제에서는 call()을 사용하여 person 객체를 this 값으로 전달하고 '안녕하세요'를 greeting 아규먼트로 사용하여 sayHello 함수를 호출한다.

apply() Method:

apply() 메서드는 call()과 비슷하지만 아규먼트를 배열로 받는다.
문법: function.apply(thisArg, [argsArray])
예제:

function introduceYourself(greeting, age) {
  console.log(`${greeting}, I'm ${this.name} and I'm ${age} years old.`);
}

const person = { name: '춘식' };
const args = ['Hello', 30];
introduceYourself.apply(person, args); 
// 결과: Hello, I'm 춘식 and I'm 30 years old.

여기서 apply()는 person 객체를 this 값으로 사용하여 introduceYourself 함수에 아규먼트 배열을 전달한다.

bind() Method:

bind() 메서드는 지정된 this 값을 가지고 초기 아규먼트를 가진 새로운 함수를 반환한다.
함수를 즉시 호출하지 않고 바인딩된 함수를 나중에 사용할 수 있게 한다.
문법: function.bind(thisArg, arg1, arg2, ...)
예제:

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: '대한' };
const boundGreet = greet.bind(person);
boundGreet(); // 결과: Hello, 대한!

이 예제에서 bind()는 person 객체를 this 값으로 사용하여 새로운 함수 boundGreet를 만든다. boundGreet()이 호출되면 person 객체에서 이름을 사용하여 인사말을 출력한다.

이러한 메서드는 함수 내에서 this 값을 명시적으로 설정하는 데 유용하며, 특히 상황이 모호하거나 명시적으로 제어해야 할 때 사용된다. 이들은 일반적으로 이벤트 처리, 콜백 함수 및 객체 지향 프로그래밍과 같은 시나리오에서 사용된다.

Conclusion:

자바스크립트에서 'this' 개념을 마스터하는 것은 깨끗하고 간결하며 유지보수 가능한 코드를 작성하는 데 중요하다. 다양한 컨텍스트에서 'this'가 어떻게 동작하는지 이해하면 언어의 전체 잠재력을 발휘하고 보다 능숙한 자바스크립트 개발자가 될 수 있다. 이 중요한 개념을 확실히 이해하기 위해 계속 실험하고 연습하기를 권장한다.