남해밤바다
326
2020-12-11 17:10:37 작성 2020-12-11 18:10:40 수정됨
7
274

자바스크립트(ES6) 초보자 질문입니다.


자바스크립트 var, let, const 대해서 공부하는 중 

https://github.com/yalcodic/code-examples/blob/master/26_SCOPE/README.md

에서 설명하는 부분이 이해가 안됩니다.

function countWithLet () {

  for (let i = 0; i < 5; i++) {

    //'1초 뒤 i를 출력하라'는 지시를 내린다.

    setTimeout(function () {

      //i를 출력

      console.log(i)

    }, 1000)

  }

}

countWithLet(); //위의 함수를 호출


결과는 아래처럼 나옵니다.

0

1

2

3

4


저 코드에서 제가 질문하고 싶은 내용은,

질문 1)

setTimeout() 함수에서 '1초 간격'으로 0, 1, 2...로 출력되는게 아니고,

setTimeout() 함수 호출 뒤 1초 후에 출력되는 거라고 하는데 정확히 이해가 안됩니다.


질문 2) scope라는 개념에 대해서,

위 countWithLet 함수 내 for문 내 setTimeout() 함수를 제거 후 지역변수 i의 타입을 var로 바꾸고 출력하면 

0

1

2

3

4

라는 결과가 나옵니다.

이 때 var타입 i변수의 scope가 countWithLet 함수 내 전체 범위로 설정될텐데 왜 5, 5, 5, ...로 출력이 안되는건지 혼란이 오고 있습니다..


아직 scope의 개념에 대해 이해하지 못한 초보 개발자로서 조잡한 질문드린 점 양해바랍니다.


0
  • 답변 7

  • gredo
    844
    2020-12-11 17:22:52

    1. 일정 간격으로 함수를 실행하는 함수는 setInterval입니다.

  • 퀘이사123
    552
    2020-12-11 17:30:57 작성 2020-12-11 17:34:19 수정됨

    1. setTimeout 에 1000을 줬으니 그 안에 있는 console.log(i)는 1초뒤에 실행됩니다.

    그런데 for문은 1초를 기다리지 않고 그냥 쭉 돕니다.

    그러니까 1초뒤에 연달아 다찍히는겁니다. 1초간격으로 찍히는게 아니고.


    2.setTimeout()을 제거 하면 for문이 돌면서 바로바로 값을 찍습니다. 그러니까 당연히 그때그때 값으로 찍히겠죠. setTimeout이 있으면 1초뒤에 실행하기 때문에 1초동안 for문은 다 돌게 되고 setTimeout 이 실행되는 순간 var값이 5가 되어 있기 때문에 5가 다찍히는겁니다. 

    scope에 대한 개념보단 setTimeout의 동작방식을 잘 이해 못하신게 아닌가싶습니다.

  • gredo
    844
    2020-12-11 17:31:57

    2. var는 setTimeout이 있으면 전역 변수로 인식해서 이미 1000ms 뒤 i가 증가된 채로 console.log가 될 텐데 타이머 함수가 없다면, 반복문 호출에 의해 정상적으로 출력되는 것입니다.

  • 남해밤바다
    326
    2020-12-11 18:22:52

    gredo 님,

    setInterval란 함수도 있었군요, 참고하겠습니다!


    퀘이사123 님

    질문 1번을 이해하니 2번도 의문이 풀리는 것 같습니다. setTimeout 함수 동작은 for문 동작과 별개로 동작하는 거였군요..


    두 분의 친절한 답변 감사합니다!


  • 피자7
    637
    2020-12-12 20:23:26

    질문1에 대해 쉽게 답변 드리자면


    for문{

      //setTimeout으로 1초뒤에 콘솔출력하도록 합니다

      setTimeout(()=>console.log('text'),1000)

      //이때 자바스크립트는 setTimeout은 1초뒤에 console.log를 실행할때까지 기다려주지 않습니다

      //단지 1초뒤에 저 text를 출력하라고 예약을 시키고 다음구문으로 넘어갑니다

      console.log('done')

      //위 구문으로 'done' 이라는 글자가 출력됩니다

    }


    위 코드를 실행시키면

    5번 반복 for문이라면 done 이라는 글자가 5번 먼저 출력되고

    실제 for문은 끝난 상태에서 setTimeout으로 예약되었던 함수가 호출되면서 text 라는 글자가 약 1초뒤에

    한꺼번에 출력될겁니다

  • 남해밤바다
    326
    2020-12-13 19:39:52

    피자7

    오 자세한 설명 감사합니다^^

  • LostStarz
    88
    2020-12-14 15:32:03

    자바스크립트 이벤트 루프에 대해서 공부해보세요.

    위 코드 동작 순서가 어떻게 되는지 알게 되실거에요.

  • 로그인을 하시면 답변을 등록할 수 있습니다.