window 객체 (setTimeout)

• 들어가기 전에

전역객체(window)에 속한 메서드에는 경고창을 띄워주는 alert, 그리고 setTimeout이라는 메서드 등이 있다. 이를 어떻게 사용하는지 그리고 다른 함수와 조금 다르게 동작하는 setTimeout의 특성을 이해해보자.

• 학습 목표

1. setTimeout을 필요한 곳에 사용할 수 있다.

2. 비동기가 무엇인지 기본개념을 이해한다.

• window 객체

- 브라우저를 개발하다 보면, window라는 전역객체가 있다.

- window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있다.

window.setTimeout();
setTimeout(); //window는 전역객체라서 생략가능

- window는 디폴트의 개념이므로 생략할 수 있다.

• setTimeout 활용

- setTimeout은 낯설게 동작한다.

function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg); //이 메시지는 즉시 실행되는 것이 아니라 1초뒤에 실행된다.
    }, 1000);
}
 
run();

- 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도 한다.

· 콜백(callback)함수 : 보통은 즉시 실행되지 않고, 나중에 필요한 시점에 실행되거나, 실행이 되지 않을 수도 있다. callback의 의미를 단어에서 좀 더 유추해보면 호출한(call) 대상에서 되부름(call back)이 되기때문에 callback이라고 한다. 실제로 callback 함수를 전달받은 쪽의 필요에 따라 즉시 실행될 수도 있다. (ex. array.map(callback))

- 자바스크립트는 함수를 인자로 받을 수 있는 특징이 있다. 참고로 함수를 반환할 수도 있다.

- setTimeout의 특성을 잘 이해하고, 지연실행이 필요한 경우에 잘 활용하면 좋다.

- 비동기 콜백함수의 특징

function run() {
    console.log("run start");
 
    setTimeout(function() {
        console.log("run ing");
    }, 1000);
 
    console.log("run end");
}
 
run();

function run() {
    setTimeout(function() {
        console.log("run ing");
    }, 1000);
}
 
console.log("run start");
run();
console.log("run end");

· 출력 순서 : run start → run end → run ing 

function run() {
    setTimeout(function() {
        console.log("hello");
    }, 1000);
    console.log("run function end");
}
 
console.log("start");
run();
console.log("end");

· 출력 순서 : start → run function end → end → hello

- 스택이 다 비워지고 나서 비동기는 마지막에 실행이 된다.

• setTimeout 실행 순서

- setTimeout의 실행은 비동기(asynchronous)로 실행되어 동기적인 다른 실행이 끝나야 실행된다.

- 즉, setTimeout 안의 함수(콜백함수)는 run 함수의 실행이 끝나고 나서, 정확히는 stack에 쌓여있는 함수의 실행이 끝나고나거 실행된다.

- 디버거를 통해 이를 스스로 직접 확인하는 것이 학습에 도움된다.