JavaScript this

자바스크립트 공부하다 보면 this 때문에 한 번씩 멈추게 된다.
나도 코드 보다가 “왜 여기서는 this가 Tom이고 여기서는 undefined지?” 하면서 정리하게 됐다.

결론부터 말하면 자바스크립트에서 this는

함수가 어떻게 호출되었는지에 따라 결정된다.

즉 어디서 선언됐는지가 아니라, 어떻게 실행됐는지가 중요하다.

---

일반 함수 호출

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

test();

브라우저에서 실행하면 결과는

window

일반 함수로 실행하면 기본적으로 this는 전역 객체를 가리킨다.
브라우저에서는 전역 객체가 window이다.

그래서 일반 함수에서는 보통

this = window

라고 생각하면 편하다.

---

객체의 메서드로 호출

객체 안에 있는 함수를 호출하면 this는 그 객체를 가리킨다.

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

user.sayName();

결과

Tom

여기서 this는 user이다.

즉

함수를 호출한 객체 = this

라고 이해하면 된다.

---

new로 호출 (생성자 함수)

new 키워드로 호출하면 this는 새로 만들어지는 객체를 가리킨다.

function Person(name) {
  this.name = name;
}

const p = new Person("Tom");

console.log(p.name);

결과

Tom

여기서 this는 p라는 새 객체가 된다.

그래서 생성자 함수에서는 보통

this.name = something

이런 식으로 객체 속성을 초기화한다.

---

call / apply / bind

이 함수들은 this를 직접 지정할 때 사용한다.

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

const user = { name: "Tom" };

sayName.call(user);

결과

Tom

call을 사용하면 this를 user로 지정할 수 있다.

즉

this를 강제로 바꾸고 싶을 때 사용하는 방법이다.

---

setTimeout 안에서 this

이 코드를 처음 보면 대부분 이렇게 생각한다.

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

user.sayName();

처음 보면 결과가 Tom일 것 같지만 실제 결과는

undefined

이다.

왜냐하면 setTimeout 안의 함수는 일반 함수 호출이기 때문이다.

즉 내부적으로는 이런 느낌이다.

callback();

그래서 this는 다시 window가 된다.

결과적으로 실행되는 코드는 이런 느낌이다.

window.name

그래서 undefined가 나온다.

이거 때문에 처음에 꽤 헷갈렸던 기억이 있다.

---

화살표 함수로 해결

이럴 때 보통 화살표 함수를 사용한다.

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

user.sayName();

이번에는 결과가

Tom

이다.

왜냐하면 화살표 함수는

자기 자신의 this를 만들지 않는다.

대신 바깥 스코프의 this를 그대로 사용한다.

그래서 여기서는 sayName의 this인 user를 그대로 가져오게 된다.

이 특징 때문에 이벤트나 setTimeout 같은 곳에서 화살표 함수가 자주 쓰인다.

---

화살표 함수 특징

화살표 함수는 일반 함수와 몇 가지 차이가 있다.

가장 중요한 특징은

자기 자신만의 this를 가지지 않는다.

그래서 바깥 스코프의 this를 그대로 사용한다.

또 하나는 생성자 함수로 사용할 수 없다.

const Person = (name) => {
  this.name = name;
};

new Person("Tom");

이 코드는 에러가 발생한다.

화살표 함수는 prototype이 없기 때문에 new와 함께 사용할 수 없다.

---

arguments 대신 rest parameter

일반 함수에서는 arguments라는 객체를 사용할 수 있다.

function test() {
  console.log(arguments);
}

test(1,2,3);

결과

{0:1, 1:2, 2:3}

하지만 화살표 함수에서는 arguments를 사용할 수 없다.

그래서 대신 사용하는 것이 rest parameter이다.

const test = (...args) => {
  console.log(args);
};

test(1,2,3);

결과

[1,2,3]

여기서

...args

는 전달된 모든 인자를 하나의 배열로 모아준다.

---

arguments vs rest parameter

둘의 차이도 헷갈릴 수 있는데 간단하다.

arguments는 객체이다.
배열처럼 생겼지만 실제 배열이 아니다.

그래서 map, filter, reduce 같은 배열 메서드를 바로 사용할 수 없다.

반면 rest parameter는 진짜 배열이다.

그래서 배열 메서드를 바로 사용할 수 있다.

또 하나 차이점은

arguments는 화살표 함수에서 사용할 수 없지만
rest parameter는 사용할 수 있다.

---

기억하면 편한 포인트

this는 함수가 어떻게 호출되었는지에 따라 결정된다.

일반 함수 호출 → this = window
객체 메서드 호출 → this = 객체
new 호출 → this = 새 객체
call / apply / bind → this 직접 지정

화살표 함수는 자기 this가 없고 바깥 this를 그대로 사용한다.