[JavaScript] this 키워드 정리

자바스크립트에서 this는 헷갈리기 쉬운 키워드이다.

왜 사용하는지, 무엇을 가리키는지 이해하기가 어렵다.

이번글에서는 this에 대해 개념부터 바인딩 규칙까지 정리할 것이다.

 

📖 헷갈리는 용어 정리

1️⃣ 객체 리터럴

const person = {
  name: "Lee",
  age: 25
};

중괄호{}를 사용해서 객체를 만드는 방법이다.

위 예제처럼 key(name, age)와 값(”Lee”, 25)를 짝지어

한 번에 객체를 만드는 방식을 객체 리터럴이라고 한다.

 

2️⃣ 인스턴스

function Person(name) {
  this.name = name;
}
const me = new Person("Lee"); // me가 인스턴스

설계도 역할을 하는 생성자 함수나 클래스를 기반으로

new 키워드를 사용해 만들어진 실제 객체를 말한다.

생성자 함수가 붕어빵 기계라면, 인스턴스는 붕어빵으로 비유할 수 있음

 

3️⃣ 재귀적 참조

const circle = {
  radius: 5,
  getDiameter() {
    return 2 * circle.radius; // circle을 다시 참조
  }
};

객체 내부의 메서드가 자기 자신이 속한 객체를 변수 이름으로 다시 참조하는 것을 말한다.

이 방식은 객체 이름이 바뀌면 내부 코드도 전부 수정해야 하므로 권장되지 않는다.

 

4️⃣ this 바인딩

this가 어떤 값을 가리키도록 연결되는 것을 this 바인딩이라고 한다.

자바스크립트에서는 this가 정적으로 고정되지 않고,

함수가 어떻게 호출되었는지에 따라 this가 달라진다.

→ 이를 동적 바인딩이라고도 한다.

 

 

❓this는 왜 필요할까?

1. 객체 리터럴에서의 필요성

const circle = {
  radius: 5,
  getDiameter() {
    return 2 * this.radius;
  }
};

console.log(circle.getDiameter()); // 10

여기서 getDiameter 안에서 this.radius를 사용했다.

만약 this 대신 circle.radius라고 작성했다면 어떻게 동작할까?

 

const circle = {
  radius: 5,
  getDiameter() {
    return 2 * circle.radius;
  }
};

console.log(circle.getDiameter()); // 10

circle.radius라고 작성해도 코드는 문제 없이 동작한다.

그 이유는 객체 리터럴은 변수에 할당되기 직전에 평가되기 때문이다.

 

getDiameter 메서드가 호출되는 시점에는 이미 객체가 생성되어 있고,

circle 식별자에 그 객체가 할당된 상태여서 circle.radius를 참조할 수 있다.

 

하지만 이 방식은 재귀적 참조이므로 객체 이름이 바뀌면 내부 코드도 모두 수정해야 한다.

그래서 안전하게 객체 자신을 가리키려면 this를 사용하는 것이 좋다.

 

2. 생성자 함수방식

function Circle(radius) {
  인스턴스참조불가.radius = radius;
}

Circle.prototype.getDiameter = function () {
  return 2 * 인스턴스참조불가.radius;
}

생성자 함수는 객체 리터럴과 다르다.

위 코드를 보면 짐작할 수 있듯이 생성자 함수를 정의하는 시점에는

아직 인스턴스가 존재하지 않기 때문에 생성자 함수가 만들어낼 객체를 가리킬 식별자가 없다.

 

그래서 자바스크립트는 특별한 식별자 this를 제공한다.

function Circle(radius) {
  this.radius = radius;
}

Circle.prototype.getDiameter = function () {
  return 2 * this.radius;
}

여기서 new Circle(5)를 실행하면 빈 객체가 만들어지고, this가 그 객체를 가리킨다.

따라서 this.radius = radius가 새 인스턴스에 프로퍼티로 저장되는 것이다.

생성자 함수 정의 시점에는 인스턴스를 직접 참조할 수 없으므로 this가 반드시 필요하다.

 

🔎 this란?

this는 자신이 속한 객체 또는 생성할 인스턴스를 가리키는 자기 참조 변수이다.

이를 통해 자신이 속한 객체 또는 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

 

🌟 this 특징

• this는 자바스크립트 엔진에 의해 자동으로 생성된다.
• 어디서든(전역, 함수 내부) 사용할 수 있으며, 지역 변수처럼 사용한다.
• 함수를 어떻게 호출하느냐에 따라 this가 달라진다.
  • Java 같은 클래스 기반 언어에서는 this가 항상 인스턴스를 가리킨다.
  • 하지만 JavaScript는 호출 방식에 따라 this가 바뀐다.
• strict mode(엄격 모드)에서는 this 바인딩이 달라진다.

 

📜 this의 바인딩 규칙

🏠 전역 공간에서의 this

console.log(this); // 브라우저: window, Node.js: global

코드의 가장 바깥인 전역 공간에서 this를 호출하면 전역 객체를 가리킨다.

• 브라우저 환경: window 객체
• Node.js 환경: global 객체

 

📞 일반 함수 호출에서의 this

function hi() {
  console.log(this) // window
}

function hello() {
  console.log(this) // window
  function hello2() {
    console.log(this) // window
  }
}

일반 함수에서 this는 전역 객체를 가리킨다.

중첩 함수도 동일하게 함수 내부의 this는 전역 객체를 가리킨다.

this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이기 때문에
객체를 생성하지 않는 일반 함수에서 this는 의미가 없음

 

💡 strict mode(엄격 모드) 예외

'use strict'

function hi() {
  console.log(this) // undefined
}

function hello() {
  console.log(this) // undefined
  function hello2() {
    console.log(this) // undefined
  }
}

strict mode가 적용된 일반 함수 내부의 this는 undefined를 가리킨다.

 

🔄 콜백 함수 호출에서의 this

function outer(callback) {
  callback(); 
}

outer(function() {
  console.log(this); // window
});

콜백 함수는 일반적으로 this가 전역객체를 가리킨다.

하지만 콜백 함수는 어떤 메서드에서 콜백 함수를 호출하냐에 따라

this값이 달라질 수 있어서 주의해야 한다.

const numbers = [1, 2, 3];
const obj = { value: 100 };

numbers.forEach(function(num) {
  console.log(this.value + num); // 두 번째 인수 obj가 this로 사용됨
}, obj);

// 101, 102, 103

위 예제의 forEach처럼 this 값을 직접 지정할 수 있도록

두 번째 인수를 제공하는 메서드들도 있다.

 

🪞 메서드 호출에서의 this

메서드를 호출한 객체가 this가 된다.

주의 > 메서드를 소유한 객체가 아니라 호출한 객체에 바인딩됨

const person = {
  name: 'Lee',
  getName() {
    return this.name;
  }
}

console.log(person.getName()); // Lee

getName 프로퍼티는 함수 객체를 가리키고 있다.

이 함수 객체는 person 객체에 포함된 것이 아니라 독립적으로 존재한다.

자바스크립트는 메서드 내부 this는 메서드를 호출한 객체를 자동으로 바인딩하기 때문에

this는 person 객체를 가리키게 된다.

const getName = person.getName;
console.log(getName()); // ''

하지만 getName 메서드를 일반 함수처럼 호출하면

this가 윈도우 객체를 가리키게 되어 window.name을 바인딩한다.

 

그 이유는 this에 바인딩될 객체는 호출 시점에 결정되게 되는데

getName()은 일반 함수이기 때문에 호출 시점의 this가 전역 객체가 된다.

그래서 this는 person 객체가 아니라 window 객체를 가리키게 된다.

 

🏗 생성자 함수 호출에서의 this

생성자 함수에서 this는 생성자 함수가 미래에 생성할 인스턴스를 가리킨다.

→ this는 자동으로 새로 생성된 객체를 참조한다.

function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const circle1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

위 코드에서 new Circle이 호출되면

새로운 빈 객체가 생성되고 this는 새로 생성된 객체를 가리키게 된다.

객체의 속성이 this.radius로 결정되게 되고 생성자 함수가 완료된 이후 this가 반환된다.

그래서 각각 새로운 객체로 생성되게 되고 getDiameter 값이 달라지게 되는 것이다.

 

➡️ 화살표 함수에서의 this

화살표 함수는 자신만의 this를 갖지 않는다.

대신 자신이 선언된 위치의 this(상위스코프)를 그대로 사용한다.

→ 이를 Lexical this라고 한다.

 

화살표 함수는 호출 방식에 영향을 받지 않고,

언제 어디서 호출되든 선언 당시의 this를 기억한다는 점이 큰 특징이다.

const person = {
  name: "Lee",
  hello: function () {
    const inner = () => {
      console.log(this.name);
    };
    inner();
  }
};

person.hello(); // Lee

위 예제처럼 화살표 함수는 별도의 바인딩을 하지 않아도

자동으로 상위 스코프인 person 객체의 name을 참조하게 된다.

이러한 특징을 이용해서
중첩함수에서 bind 메서드를 사용하지 않고 화살표 함수를 사용할 수도 있다.

 

 

🔒 this 고정 방법 (apply, call, bind)

this의 바인딩 규칙을 변경하고 싶을 때는 apply, call, bind 메서드를 사용한다.

이 메서드들은 Function.prototype의 메서드여서 모든 함수에서 사용할 수 있고,

this를 특정 객체에 강제로 바인딩한다.

 

1️⃣ apply & call 메서드

apply와 call은 함수를 즉시 호출하면서 this 값을 원하는 대로 설정한다.

• apply: 메서드를 호출한 함수의 인수를 배열로 묶어서 전달한다.
• call: 메서드를 호출한 함수의 인수를 쉼표로 구분하여 전달한다.

function introduce(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

const person = { name: "Lee" };

introduce.apply(person, ["Hello"]); // Hello, my name is Lee

introduce.call(person, "Hi"); // Hi, my name is Lee

 

apply & call 메서드와 유사 배열

apply와 call 메서드는 주로 arguments 객체와 같은 유사 배열 객체에

배열 메서드를 사용해야 할 때 사용하기도 한다.

function argumentsToArray() {
  const arr = Array.prototype.slice.call(arguments)
  return arr;
}

argumentsToArray(1, 2, 3); // [1, 2, 3]

 

2️⃣ bind 메서드

bind는 apply, call과 다르게 즉시 실행하지 않고,

this가 고정된 새로운 함수를 반환하는 것이 특징이다.

function introduce(greeting) {
  console.log(`${greeting}, my name is ${this.name}`);
}

const person = { name: "Lee" };

const boundIntroduce = introduce.bind(person);
boundIntroduce("Hey"); // Hey, my name is Lee

✅ 일반적인 사용 예시

const person = {
  name: "Lee",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const anotherPerson = { name: "Kim" };

const boundHello = person.sayHello.bind(anotherPerson);

boundHello(); // Hello, my name is Kim

person.sayHello를 원래는 person이 호출해야 하지만,

bind를 통해 anotherPerson이 호출한 것처럼 this를 변경할 수도 있다.

 

✅ 중첩 함수에서 this 문제 해결

bind는 메서드의 this와 메스드 내부의 중첩 함수 또는 콜백 함수의 this가

불일치 하는 문제를 해결하기 위해 사용한다.

const counter = {
  count: 0,
  increase: function() {
    function inner() {
      console.log(this.count);
    }

    const boundInner = inner.bind(this);
    boundInner(); // 0
  }
};

counter.increase();

일반적으로 중첩 함수 inner 안에서 this는 전역 객체를 가리킨다.

하지만 bind(this)를 통해 counter 객체의 this를 강제로 연결했기 때문에

counter.conunt를 this가 참조할 수 있다.

 

 

📝 정리

호출 방식	this가 가리키는 대상
전역 공간	브라우저: window / Node.js: global
일반 함수	전역 객체 (strict 모드: undefined)
메서드 호출	메서드를 호출한 객체
생성자 함수	새로 생성된 인스턴스
화살표 함수	자신이 선언된 위치의 this
call/apply/bind	지정한 객체로 this 고정

 

 

📚 참고

모던 자바스크립트 Deep Dive - 22장 this

📚 자바스크립트 화살표 함수 사용법 총정리

[JS] 📚 자바스크립트 this 💯 완전 정복

자바스크립트에서 ‘this’ 마스터하기 | 요즘IT