setTimeout의 this와 / window.setTimeout을 하지 않는 이유

안녕하세요. 꼬동입니답.

 

오늘은 setTimeout 메소드에 관련해서 얘기를 해보려 합니다.

---

setTimeout 메서드는 지정한 시간 후에 함수나 지정한 코드를 실행하는 타이머를 설정하는 메서드입니다.

 

그리고 clearTimeout으로 이를 취소할 수 있죠.

 

비슷한 함수로는 setInterval이 존재합니다.

---

setTimout에서 this의 경우 여러분 예상과는 다르게 동작할 수 있습니다.

 

그 이유는 setTimeout이 실행하는 코드는 setTimeout을 호출했던 함수와는 다른 실행 맥락에서 호출되기 때문인데요.

 

호출 함수의 this 키워드 값을 설정하는 일반적인 규칙이 여기서도 적용되며, this를 호출 시 지정하지도 않았고 bind를 바인딩을 하지 않는 경우 window를 가리키게 됩니다.

 

이를 해결하기 위해서 함수(화살표 함수, 익명함수 등)를 감싸서 해결할 수 있고, bind로 this 값을 설정할 수도 있습니다.

 

const myArray = ['zero', 'one', 'two'];
myArray.myMethod = function (sProperty) {
	console.log(arguments.length > 0 ? this[sProperty] : this);
};

// 여기서 this는 myArray
myArray.myMethod(); // "zero, one, two"
myArray.myMethod(1); // "one"

// 여기서 this는 window 객체
setTimeout(myArray.myMethod, 1.0 * 1000); // window
setTimeout(myArray.myMethod, 1.5*1000, '1'); // undefined

// 해결법
// 1. 함수 감싸기
setTimeout(function(){myArray.myMethod()}, 2.0*1000); // "zero, one, two"
setTimeout(function(){myArray.myMethod('1')}, 2.5*1000); // "one"

// 2. 화살표 함수
setTimeout(() => {myArray.myMethod()}, 2.0*1000); // "zero, one, two"
setTimeout(() => {myArray.myMethod('1')}, 2.5*1000); // "one"

// 3. bind
const myBoundMethod = (function (sProperty) {
	console.log(arguments.length > 0 ? this[sProperty] : this);
}).bind(myArray);

myBoundMethod(); // "zero, one, two"
myBoundMethod(1); // "one"
setTimeout(myBoundMethod, 1.0*1000); "zero, one, two"
setTimeout(myBoundMethod, 1.5*1000, '1'); "one"

https://developer.mozilla.org/ko/docs/Web/API/setTimeout

setTimeout() - Web API | MDN

---

 

 

https://stackoverflow.com/questions/20420429/what-the-difference-between-window-settimeout-and-settimeout

What the difference between window.setTimeout() and setTimeout()?

자, 서론이 길었네요.

 

이제 오늘의 제목에서 말하는 왜 window.setTimeout을 하지 않고, setTimeout을 하는지를 알아봅시다.

 

그렇다면, 서로의 차이점을 봐야겠죠 ?

 

window.setTimeout(function(){}, 1000);

 

setTimeout(function(){}, 1000);

 

이 둘은 뭐가 다를까요 ?

---

JavaScript는 global object에 의해 정의된 환경안에서 동작을 합니다.

 

global object의 메소드들은 object의 언급 없이 불릴 수 있습니다.

 

즉, obj.function() 이렇게 불러야 하는 함수를 단지 function()으로 부를 수 있다는 소리죠.

 

JavaScript를 브라우저에서 사용하면, global object는 Document Object Model(이하 DOM)에 의해 주어집니다.

 

DOM의 global object는 setTimeout 메소드를 가지고 있죠.

 

그래서 setTimeout() 을 그냥 호출해도 사용할 수 있다는 뜻입니다.

 

DOM의 global object의 이름이 우리가 잘 알고 있는 window입니다. 그렇기 때문에 window.setTimeout() 으로 할 수 있죠.

 

즉, browser에서는 둘 차이가 크게 없다 ! 가 결론인데요.

 

그렇다면 node 환경에서는 어떨까요 ? node에서는 window.setTimeout이 실행되지 않겠죠. node의 global엔 window가 없으니까요.

---

오늘은 setTimeout에 대해서 알아봤는데요.

 

사실 간단한 상식이지만, 까먹기 딱 좋습니다.

 

까먹어도 괜찮습니다.

 

까먹었다는건 여러분이 햄스터처럼 귀엽다는 것이니까요.

 

---

이상 setTimeout의 this와 / window.setTimeout을 하지 않는 이유였습니다 !