JavaScript에서 this

🦄 Cukehater

2년 전

JavaScript에서 this는 실행 컨텍스트가 생성될 때 결정되는데, 실행 컨텍스트는 함수가 호출될 때 생성되므로 this는 함수의 호출 방식에 따라 값이 달라질 수 있다.

이번 글에서는 this의 의미와 다양한 사용 방식을 알아본다.

TL;DR

JavaScript에서 this는 함수의 호출 방식에 따라 달라진다.

call, apply, bind 메서드를 사용하여 this를 명시적으로 바인딩할 수 있으며, 화살표 함수를 사용하여 외부 this를 내부 함수에서 그대로 사용할 수 있다.

호출 환경에 따른 this

브라우저 환경에서 전역 공간의 this는 Window 객체를 가리키며, Node 환경에서는 global을 가리킨다.

javascript Copy

console.log(this); // Window {...}
console.log(this === window); // true

함수에서의 this

함수로서 호출한 경우, this는 Window 객체를 가리키지만, new 키워드로 생성자 함수를 호출한 경우, this는 생성된 객체를 가리킨다.

javascript Copy

const func = function () {
  console.log(this);
};
func(); // Window {...}

function PrintThis() {
  console.log(this);
}
PrintThis(); // Window {...}

const instance = new PrintThis(); // PrintThis {}

객체의 메서드에서의 this

객체의 메서드로 호출한 경우, this는 해당 메서드를 호출한 객체를 가리킨다.

javascript Copy

const obj = {
  method: function() {
    console.log(this);
  },
};
obj.method(); // { method: f }

이벤트 리스너에서의 this

이벤트 리스너에서 this는 이벤트가 발생한 요소 e.currentTarget를 가리킨다.

html Copy

<button type="button" id="btn">Button</button>
<script>
  document.getElementById('btn').addEventListener('click', function (e) {
    console.log(this); // <button type="button" id="btn">Button</button>
    console.log(e.currentTarget); // <button type="button" id="btn">Button</button>
  });
</script>

this 바인딩

함수의 호출 방식에 따라 달라지는 this 값을 명시적으로 바인딩하기 위해 call, apply, bind 메서드를 사용할 수 있다.

1. call

call 메서드는 인자로 전달한 객체를 this로 사용하여 함수를 호출한다.

javascript Copy

const person = {
  name: '홍길동',
};
function update(birthYear, job) {
  this.birthYear = birthYear;
  this.job = job;
}
update.call(person, 1998, '가수');
console.log(person); // { name: '홍길동', birthYear: 1998, job: '가수' }

2. apply

apply 메서드는 call 메서드와 비슷하지만, 인자를 배열로 전달한다.

javascript Copy

const person = {
  name: '홍길동',
};
function update(birthYear, job) {
  this.birthYear = birthYear;
  this.job = job;
}
update.apply(person, [1998, '가수']);
console.log(person); // { name: '홍길동', birthYear: 1998, job: '가수' }

3. bind

bind 메서드는 새로운 함수를 반환하며, 나중에 호출할 때 this가 바인딩된다.

javascript Copy

const person = {
  name: '홍길동',
};
function update(birthYear, job) {
  this.birthYear = birthYear;
  this.job = job;
}
const updatePerson = update.bind(person);
updatePerson(1998, '가수');
console.log(person); // { name: '홍길동', birthYear: 1998, job: '가수' }

화살표 함수에서의 this

화살표 함수는 this를 외부 컨텍스트의 this를 그대로 사용하기 때문에 내부 함수에서 화살표 함수를 사용하면 외부 함수의 this를 그대로 사용할 수 있다.

javascript Copy

const person = {
  name: '홍길동',
  outer: function () {
    console.log(this); // { name: '홍길동', outer: [Function: outer] }
    const inner = () => {
      console.log(this); // { name: '홍길동', outer: [Function: outer] }
    };
    inner();
  },
};
person.outer();

주의 사항

화살표 함수를 사용할 때 다음과 같은 주의 사항이 있다.

객체의 메서드로 사용할 경우, this는 전역 객체를 가리킨다.

javascript Copy

const person = {
  name: '홍길동',
  printName: () => {
    console.log(this); // Window
  },
};
person.printName();

이벤트 리스너의 콜백 함수에 사용할 경우 this는 전역 객체를 가리킨다.

html Copy

<button type="button" id="btn">Button</button>
<script>
  document.getElementById('btn').addEventListener('click', e => {
    console.log(this); // Window
  });
</script>

🦄 Cukehater

개발 경험과 기술적 인사이트를 공유합니다 💻✨