(JS) setInterval & this

setInterval의 this

class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    setInterval(function() {
      console.log(this.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();

person.print 는 1초 마다 this.name 을 출력하는 함수입니다.

'Danuel' 을 출력할 것이라 예상할 수 있지만, 예상과는 다르게 undefined 를 출력합니다.

Person.print 메서드 안에서 쓰인 setInterval은 사실 window.setInterval 입니다. 그렇기 때문에 setInterval에서 this를 사용하면 window를 가리키고, window.name 은 아무런 값이 없기 때문에 undefined 를 출력한 것입니다.

setInterval에서 this 사용하기

1. 변수 할당을 통한 scope 이동

class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    var setInterval = window.setInterval;
    setInterval(function() {
      console.log(this.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();

변수를 할당해 this를 window에서 Person으로 가리키게 하는 원리입니다.

2. this를 가리키는 변수 생성

class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    var self = this;
    setInterval(function() {
      console.log(self.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();

setInterval 바깥에서 this를 가리키는 변수를 생성하고, 그 변수를 사용하는 방법입니다.

3. Arrow Function 사용

class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    setInterval(() => {
      console.log(this.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();

자신의 상위 scope를 가리키는 Arrow Function의 특성을 이용하는 방법입니다.

앞서 소개한 방법과 다르게 JavaScript의 동작을 이해해야 할 필요가 없다는 장점이 있지만, 인터넷 익스플로러(Internet Explorer)는 지원하지 않는 문법이라는 이슈가 있습니다.