자바스크립트의 this 키워드: 동작 방식과 활용 방법

this 키워드란?

JavaScript에서 this 키워드는 함수가 호출될 때 지정된 객체를 참조합니다. 이것은 코드의 범위에서 현재 참조되는 객체를 나타냅니다.

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

const person1 = {
  name: 'John',
  print: printName
}

const person2 = {
  name: 'Jane',
  print: printName
}

person1.print(); // "John"
person2.print(); // "Jane"

위의 예시에서 printName 함수는 this 키워드를 사용하여 현재 객체의 name 속성을 출력합니다. person1과 person2 객체는 각자의 name 속성을 가지고 있으므로 print 함수를 호출할 때 this는 각 객체를 참조합니다.

this의 동작 방식

this의 값은 함수가 호출될 때 동적으로 결정됩니다. 호출하는 방법에 따라 다르게 처리됩니다.

const obj1 = {
  name: 'John',
  print: function() {
    console.log(this.name);
  }
}

const obj2 = {
  name: 'Jane'
}

obj1.print(); // "John"
obj1.print.call(obj2); // "Jane"
obj1.print.apply(obj2); // "Jane"

위의 예시에서 call과 apply 메서드를 사용하여 this의 값을 강제로 바꿀 수 있습니다. obj1.print()는 this가 obj1을 참조하므로 “John”을 출력하고, obj1.print.call(obj2)와 obj1.print.apply(obj2)는 this가 각각 obj2를 참조하므로 “Jane”을 출력합니다.

this 활용 방법

this는 객체의 메서드에서 자주 사용되며 객체의 상태에 따라 동적으로 결정됩니다.

const calculator = {
  operand1: 0,
  operand2: 0,
  sum: function() {
    console.log(this.operand1 + this.operand2)
  },
  setOperands: function(op1, op2) {
    this.operand1 = op1;
    this.operand2 = op2;
  }
}

calculator.setOperands(10, 20);
calculator.sum(); // 30

위의 예시에서 calculator 객체의 setOperands 함수에서 this는 calculator 자체를 참조합니다. setOperands 함수를 사용하여 operand1과 operand2 속성의 값을 설정하고, sum 함수를 사용하여 두 속성의 합계를 출력합니다.

결론

JavaScript의 this 키워드는 함수가 호출될 때 현재 객체를 참조합니다. call과 apply 메서드를 사용하여 this의 값을 강제로 바꿀 수 있습니다. 객체의 메서드에서 this를 사용하여 객체의 상태에 따라 동적으로 처리할 수 있습니다.

최대 100단어 설명: 자바스크립트에서 this 키워드는 함수가 호출될 때 현재 객체를 참조합니다. 함수 호출 방식에 따라 this의 값은 동적으로 결정되며, 객체의 메서드에서 자주 사용됩니다. call과 apply 메서드를 사용하여 this의 값을 바꿀 수 있으며, 객체의 상태에 따라 동적으로 처리할 수 있습니다.