[ JavaScript ] 타이머 사용하기_ 로또 추첨기_2 ( 강좌 참고 )

📌 일정  시간 후에 실행하기

뽑은 공들을 화면에 표시하자. 1초에 하나씩 뽑을 것이다.

자바스크립트에서는 setTimeout 함수로 지정한 시간 뒤에 코드가 실행되게 할 수 있다.

setTimeout(() => {
  // 내용
}, 밀리초);
//코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

밀리초란? 1000 분의 1초 

 

이때 setTimeout 안에 넣는 함수는 특정 작업 ( 지정한 시간까지 기다리기 ) 이후에 추가로 실행되는 함수이므로 콜백 함수로 볼 수 있다.

두 번째 인수가 밀리초 단위이므로 원하는 초에 1000을 곱해야 한다.

첫 번째 인수로 넣은 함수는 지정한 밀리초 후에 실행된다. 

첫번째 인수	밀리초 단뒤 ( 원하는 초에 1000을 곱한다 )
두번째 인수	지정한 밀리초 후에 실행된다

Quiz!
3.5초 뒤에 다음 func 함수를 실행해보아라.

function func() { 
  console.log('hello'); 
}
//코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍​

 

답

setTimeout(func, 3500);​

 

아래와 같이 작성할 수도 있지만, 내부 함수가 하나이고 인수가 없는 경우에는 위 코드처럼 줄여 쓸 수 있다.

setTimeout(() => {
  func();
}, 3500);​

첫 번째 공을 1초 뒤에 뽑는 코드는 다음과 같다.

    <script>
        const candidate = Array(45).fill().map((v,i)=> i + 1); //45개를 배열에 담아놓기.
        //shuffle 배열에다 랜덤으로 넣을 것이다.
        const shuffle = [];
        while (candidate.length > 0){
            const random  = Math.floor(Math.random() * candidate.length); //무작위 인덱스 뽑기.
            const spliceArray = candidate.splice(random , 1); //뽑은 값은 배열에 들어 있음.
            const value = spliceArray[0]; //배열에 들어 있는 값을 꺼내어,
            shuffle.push(value); //shuffle 배열에 넣기.
        }
        console.log(shuffle);
        //shuffle에서 앞에서 6개를 자르고,정렬.
        const winBalls = shuffle.slice(0,6).sort((a,b) => a - b);
        const bonus = shuffle[6]; //셔플에서 7번째
        console.log(winBalls,bonus);

        const $result = document.querySelector('#result'); //html 상 result를 선택한다.
        setTimeout(() => {
        const $ball = document.createElement('div'); //1초 뒤에 div 태그를 만든다
        $ball.className = 'ball'; //div태그에 클래스네임을 ball로 지정한다.
        //html에서는 class이지만 자바스크립트에서는 className이다.
        $ball.textContent = winBalls[0]; //뽑았던 첫번째 자리 숫자를
        $result.appendChild($ball); //html 상 result에 추가한다.
        }, 1000); //첫번째 인자의 코드는 1초 뒤에 시작한다.
    </script>
    <!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

실행 결과

---

📌 타이머와 반복문 같이 사용하기 

이제 7개의 공을 모두 화면에 표시할 것이다.

setTimeout 을 7번 사용해도 되지만, 그렇게 하면 코드가 중복되므로 반복문을 사용할 것이다.

while문 과 for문 중 어떤 반복문을 사용할까?

---

for문

왜냐하면 몇 번 반복해야할 지 알기 때문이다.

 

while문 쓸 지 for문 쓸 지 고민될 때

[ JavaScript ] 타이머 사용하기_ 로또 추첨기_1 ( 강좌 참고 )

---

보너스 공을 제외한 일반 공 6개를 화면에 표시하겠다.

    <script>
        const candidate = Array(45).fill().map((v,i)=> i + 1); //45개를 배열에 담아놓기.
        //shuffle 배열에다 랜덤으로 넣을 것이다.
        const shuffle = [];
        while (candidate.length > 0){
            const random  = Math.floor(Math.random() * candidate.length); //무작위 인덱스 뽑기.
            const spliceArray = candidate.splice(random , 1); //뽑은 값은 배열에 들어 있음.
            const value = spliceArray[0]; //배열에 들어 있는 값을 꺼내어,
            shuffle.push(value); //shuffle 배열에 넣기.
        }
        console.log(shuffle);
        //shuffle에서 앞에서 6개를 자르고,정렬.
        const winBalls = shuffle.slice(0,6).sort((a,b) => a - b);
        const bonus = shuffle[6]; //셔플에서 7번째
        console.log(winBalls,bonus);

        const $result = document.querySelector('#result'); //html 상 result를 선택한다.
        
        for(let i=0; i<winBalls.length; i++){ // 0부터 winBalls.length -1 (5)까지 반복.
        setTimeout(() => {
        const $ball = document.createElement('div'); //1초 뒤에 div 태그를 만든다
        $ball.className = 'ball'; //div태그에 클래스네임을 ball로 지정한다.
        //html에서는 class이지만 자바스크립트에서는 className이다.
        $ball.textContent = winBalls[0]; //뽑았던 첫번째 자리 숫자를
        $result.appendChild($ball); //html 상 result에 추가한다.
        }, 1000 * (i + 1)); //첫번째 인자의 코드는 1초 x (i + 1) 뒤에 시작한다.
    	}
    </script>
    <!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

귀엽네

1000* ( i + 1 ) 밀리초마다 공을 하나씩 생성해서 winBalls [ i ] 숫자를 넣고 있다.

1초에는 winBalls [ 0 ] , 2초에는 winBalls [ 1 ] , 3초에는 winBalls [ 2 ] 공이 생성된다.

 

보너스 공은 7초 뒤에 표시하면 된다.

    <script>
        const candidate = Array(45).fill().map((v,i)=> i + 1); //45개를 배열에 담아놓기.
        //shuffle 배열에다 랜덤으로 넣을 것이다.
        const shuffle = [];
        while (candidate.length > 0){
            const random  = Math.floor(Math.random() * candidate.length); //무작위 인덱스 뽑기.
            const spliceArray = candidate.splice(random , 1); //뽑은 값은 배열에 들어 있음.
            const value = spliceArray[0]; //배열에 들어 있는 값을 꺼내어,
            shuffle.push(value); //shuffle 배열에 넣기.
        }
        console.log(shuffle);
        //shuffle에서 앞에서 6개를 자르고,정렬.
        const winBalls = shuffle.slice(0,6).sort((a,b) => a - b);
        const bonus = shuffle[6]; //셔플에서 7번째
        console.log(winBalls,bonus);

        const $result = document.querySelector('#result'); //html 상 result를 선택한다.
        
        for(let i=0; i<winBalls.length; i++){ // 0부터 winBalls.length -1 (5)까지 반복.
            setTimeout(() => {
            const $ball = document.createElement('div'); //1초 뒤에 div 태그를 만든다
            $ball.className = 'ball'; //div태그에 클래스네임을 ball로 지정한다.
            //html에서는 class이지만 자바스크립트에서는 className이다.
            $ball.textContent = winBalls[0]; //뽑았던 첫번째 자리 숫자를
            $result.appendChild($ball); //html 상 result에 추가한다.
            }, 1000 * (i + 1)); //첫번째 인자의 코드는 1초 x (i + 1) 뒤에 시작한다.
        }

        const $bonus = document.querySelector('#bonus'); //html 상 bonus를 선택한다.
        
        setTimeout(() => {
            const $ball = document.createElement('div'); //1초 뒤에 div 태그를 만든다
            $ball.className = 'ball'; //div태그에 클래스네임을 ball로 지정한다.
            $ball.textContent = bonus; //뽑았던 보너스 숫자를
            $bonus.appendChild($ball); //html 상 bonus에 추가한다.
        }, 7000); //첫번째 인자의 코드는 7초뒤에 시작한다.
    </script>
    <!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

실행 결과

일반 공을 뽑는 코드와 중복된다. 어떻게 해야 할까?

---

중복되는 것은 함수로 뽑고, 중복되지 않는 것은 매개변수로 만든다.

---

    <script>
        const candidate = Array(45).fill().map((v,i)=> i + 1); //45개를 배열에 담아놓기.
        //shuffle 배열에다 랜덤으로 넣을 것이다.
        const shuffle = [];
        while (candidate.length > 0){
            const random  = Math.floor(Math.random() * candidate.length); //무작위 인덱스 뽑기.
            const spliceArray = candidate.splice(random , 1); //뽑은 값은 배열에 들어 있음.
            const value = spliceArray[0]; //배열에 들어 있는 값을 꺼내어,
            shuffle.push(value); //shuffle 배열에 넣기.
        }
        console.log(shuffle);
        //shuffle에서 앞에서 6개를 자르고,정렬.
        const winBalls = shuffle.slice(0,6).sort((a,b) => a - b);
        const bonus = shuffle[6]; //셔플에서 7번째
        console.log(winBalls,bonus);

        const $result = document.querySelector('#result'); //html 상 result를 선택한다.
        
        //중복되는 것은 함수로 뽑기.
        function drawBall( number, $parent) {
            const $ball = document.createElement('div'); //1초 뒤에 div 태그를 만든다
            $ball.className = 'ball'; //div태그에 클래스네임을 ball로 지정한다.
            //html에서는 class이지만 자바스크립트에서는 className이다.
            $ball.textContent = number; //뽑았던 숫자를
            $parent.appendChild($ball); //html 상 $parent 매개변수에 추가한다.
        }
        
        for(let i=0; i<winBalls.length; i++){ // 0부터 winBalls.length -1 (5)까지 반복.
            setTimeout(() => {
            drawBall(winBalls[i], $result); //함수 호출해서 인자 대입하기.
            }, 1000 * (i + 1)); //첫번째 인자의 코드는 1초 x (i + 1) 뒤에 시작한다.
        }


        //중복되지 않는 것은 매개변수로 만들기.
        const $bonus = document.querySelector('#bonus'); //html 상 bonus를 선택한다.
        
        setTimeout(() => {
            drawBall(bonus, $bonus); //함수 호출해서 인자 대입하기.
        }, 7000); //첫번째 인자의 코드는 7초뒤에 시작한다.
    </script>
    <!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

drawBall 함수를 만든 뒤, 달라지는 부분인 숫자와 부모 태그를 각각 number, $parent 매개 변수로 만들었다.

실행 결과

중복제거하는 것을 리팩토링 ( refactoring ) 이라고 한다.

---

📌 var 와 let 의 차이 이해하기

앞에서 작성한 반복문 부분을 잠깐 let 에서 var 로 바꿔보자.

        for(var i=0; i<winBalls.length; i++){ // 0부터 winBalls.length -1 (5)까지 반복.
            setTimeout(() => {
            drawBall(winBalls[i], $result); //함수 호출해서 인자 대입하기.
            }, 1000 * (i + 1)); //첫번째 인자의 코드는 1초 x (i + 1) 뒤에 시작한다.
        }
        //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

숫자가 뜨지않는다

어째서 이렇게 결과가 나오는걸까?

변수는 스코프 ( scope, 범위 ) 라는 것을 가진다.

var	함수 스코프
let	블록 스코프
const	블록 스코프

함수 스코프가 무엇인가?

a를 콘솔로 출력하면 에러가 발생한다. a는 함수 안에 선언된 변수이므로 함수 바깥에서는 접근할 수 없다.

이렇게 함수를 경계로 접근 여부가 달라지는 것을 함수 스코프라고 한다.

 

if문을 쓰면 다를 수도? 

이번에는 if 문 안에 var를 넣어보자.

var 는 함수 스코프 ( 함수만 신경씀 ) 라서 if 문 안에 들어 있으면 바깥에서 접근할 수 있다.

그런데 let  은 다르다.

let 의 경우에는 에러가 발생한다. 

함수에서도 오류남

이유는 let 이 블록 스코프 ( 블록을 신경씀 ) 이기 때문이다.

블록	if 문, for 문, while 문, 함수에서 볼 수 있는 { } 를 의미한다.

블록 바깥에서는 블록 안에 있는 let 에 접근할 수 없다.

---

for문을 쓰면 어떻게 될까?

var 는 블록과 관계가 없으니까 문제 없이 돌아간다.

let 은 에러 발생

let 은 에러가 발생한다. for 문 블록 바깥에서 접근했기 때문이다.

위치상으로는 let 이 블록 바깥에 있지만, for 문은 블록 안에 있는 것으로 친다.

---

본론으로 돌아가서 왜 반복문에서 let 과 var 를 사용한 결과가 다른 이유를 다시 살펴본다.

        for(var i=0; i<winBalls.length; i++){ // 0부터 winBalls.length -1 (5)까지 반복.
            setTimeout(() => {
            drawBall(winBalls[i], $result); //함수 호출해서 인자 대입하기.
            }, 1000 * (i + 1)); //첫번째 인자의 코드는 1초 x (i + 1) 뒤에 시작한다.
        }
        //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

setTimeout 의 콜백 함수 안에 든 i 와 바깥의 1000 * ( i+1 ) 는 다른 시점에 실행된다.

1000 * ( i+1 ) 는 반복문을 돌 때 실행되고, setTimeout 의 콜백 함수는 지정한 시간 뒤에 실행한다.

그런데 반복문은 매우 빠른 속도로 돌아서 콜백 함수가 실행될 때는 이미 i 가 6 ( winBalls.length 가 6 ) 이 되어 있다.

<!--
i가 0일 때 setTimeout(콜백0, 1000) 실행
i가 1일 때 setTimeout(콜백1, 2000) 실행
i가 2일 때 setTimeout(콜백2, 3000) 실행
i가 3일 때 setTimeout(콜백3, 4000) 실행
i가 4일 때 setTimeout(콜백4, 5000) 실행
i가 5일 때 setTimeout(콜백5, 6000) 실행
i가 6이 됨 
1초 후 콜백0 실행(i는 6) 
2초 후 콜백1 실행(i는 6)
3초 후 콜백2 실행(i는 6) 
4초 후 콜백3 실행(i는 6) 
5초 후 콜백4 실행(i는 6) 
6초 후 콜백5 실행(i는 6)
-->
<!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

따라서 콜백 함수가 실행될 때 i 를 콘솔로 출력하면 6 이 나온다. 그리고 winBalls 는 인덱스가 5까지만 있으므로 winBalls[6] 는 undefined 가 된다.

그런데 왜 let 을 쓸 때는 이러한 문제가 발생하지 않았을까? let 코드를 보자.

        for(let i=0; i<winBalls.length; i++){ // 0부터 winBalls.length -1 (5)까지 반복.
            setTimeout(() => {
            drawBall(winBalls[i], $result); //함수 호출해서 인자 대입하기.
            }, 1000 * (i + 1)); //첫번째 인자의 코드는 1초 x (i + 1) 뒤에 시작한다.
        }
        //코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍

for 문에서 쓰이는 let 은 하나의 블록마다 i 가 고정된다. 이것도 블록 스코프의 특성이다.

따라서 setTimeout 콜백 함수 내부의 i 도 setTimeout 을 호출할 때의 i 와 같은 값이 들어간다.

 

 

스코프 관련 알아야할 점

반복문과 var 를 쓸 때 항상 스코프 관련 문제가 생기는 것은 아니다.

setTimeout 같은 비동기 함수와 반복문, var 를 만나면 이런 문제가 발생한다.

---

📌 전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또추첨기</title>
   <style>
    .ball {
      display: inline-block;
      border: 1px solid black;
      border-radius: 20px;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      text-align: center;
      margin-right: 20px;
    }
   </style>   
</head>
<body>
    <div id="result">추첨 결과는? </div>
    <div id="bonus">보너스: </div>
    <script>
        const candidate = Array(45).fill().map((v,i)=> i + 1); //45개를 배열에 담아놓기.
        //shuffle 배열에다 랜덤으로 넣을 것이다.
        const shuffle = [];
        while (candidate.length > 0){
            const random  = Math.floor(Math.random() * candidate.length); //무작위 인덱스 뽑기.
            const spliceArray = candidate.splice(random , 1); //뽑은 값은 배열에 들어 있음.
            const value = spliceArray[0]; //배열에 들어 있는 값을 꺼내어,
            shuffle.push(value); //shuffle 배열에 넣기.
        }
        console.log(shuffle);
        //shuffle에서 앞에서 6개를 자르고,정렬.
        const winBalls = shuffle.slice(0,6).sort((a,b) => a - b);
        const bonus = shuffle[6]; //셔플에서 7번째
        console.log(winBalls,bonus);

        const $result = document.querySelector('#result'); //html 상 result를 선택한다.
        
        //중복되는 것은 함수로 뽑기.
        function drawBall( number, $parent) {
            const $ball = document.createElement('div'); //1초 뒤에 div 태그를 만든다
            $ball.className = 'ball'; //div태그에 클래스네임을 ball로 지정한다.
            //html에서는 class이지만 자바스크립트에서는 className이다.
            $ball.textContent = number; //뽑았던 숫자를
            $parent.appendChild($ball); //html 상 $parent 매개변수에 추가한다.
        }
        
        for(let i=0; i<winBalls.length; i++){ // 0부터 winBalls.length -1 (5)까지 반복.
            setTimeout(() => {
            drawBall(winBalls[i], $result); //함수 호출해서 인자 대입하기.
            }, 1000 * (i + 1)); //첫번째 인자의 코드는 1초 x (i + 1) 뒤에 시작한다.
        }


        //중복되지 않는 것은 매개변수로 만들기.
        const $bonus = document.querySelector('#bonus'); //html 상 bonus를 선택한다.
        
        setTimeout(() => {
            drawBall(bonus, $bonus); //함수 호출해서 인자 대입하기.
        }, 7000); //첫번째 인자의 코드는 7초뒤에 시작한다.
    </script>
</body>
</html>
<!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

---

-(도서) Let's Get IT 자바스크립트 프로그래밍

https://thebook.io/

Let's Get IT 자바스크립트 프로그래밍

-(강좌) 렛츠기릿 자바스크립트

https://www.inflearn.com/course/

[무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의