'타이머 함수' 태그의 글 목록

타이머 함수

리버 River 2024. 3. 31. 19:46

2024. 3. 31. 19:46

1. 타이머 timer 함수

🐰 특정 시간 이후에 콜백함수를 호출할 수 있는 함수

함수 이름	설명
setTimeout(함수, 시간)	특정 시간 후에 함수를 한 번 호출
setInterval(함수, 시간)	특정 시간마다 함수를 호출

<script>
    setTimeout(function () {
        console.log(`2초 후에 실행됩니다.`);
    }, 2 * 1000); // 시간의 기초단위는 밀리 초 단위.

    let count = 0;
    setInterval(() => {
        console.log(`2초마다 실행됩니다.(${count}번째)`);
        count++;
    }, 2 * 1000);
</script>

타이머 함수를 종료하고 싶은 경우

함수 이름	설명
clearTimeout(타이머_ID)	setTimeout() 함수로 설정한 타이머를 제거
clearInterval(타이머_ID)	setInterval() 함수로 설정한 타이머를 제거

🐰 타이머 ID는 setTimeout()과 setInterval() 함수를 호출할 때 리턴 값으로 나오는 숫자

<script>
    let count = 0;
    let id = setInterval(() => { // setInterval은 반환형이 있는 함수이기 때문에 변수에 저장 가능
        console.log(`1초마다 실행됩니다(${count}번째)`);
        count++;
    }, 1000);

    setTimeout(() => {
        console.log('타이머를 종료합니다.');
        clearInterval(id);
    }, 5 * 1000); // 5초후 종료
</script>

응용 문제 - 정지 & 시작버튼

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #numb {
            width: 100vw;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 300px;
        }

        #box {
            display: flex;
            justify-content: center;
            align-content: center;
        }

        button {
            width: 50px;
            height: 20px;
            margin: 0 10px;
        }

    </style>

    <script>
        /* '정지' 버튼을 클릭하면 정지 */
        const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
        let count = 1;
        const timer = function () {
            document.querySelector('div').innerHTML = String(count);
            document.querySelector('div').style.color = rainbow[count % rainbow.length];
            count++;
        };

        let id = setInterval(timer, 1000);

        const stopTimer = function () {
            clearInterval(id);
        };

        const reStart = function () {
            id = setInterval(timer, 1000);
        };
    </script>
</head>

<body>
    <div id="numb">0</div>
    <div id="box">
        <button onclick="stopTimer()">정지</button>
        <button onclick="reStart()">재시작</button>
    </div>
</body>

2. 기본 매개변수

🐰 매개 변수에 기본 값을 지정, 매개 변수가 들어오지 않는 경우에 기본 값으로 대체
🐰 기본 매개 변수와 일반 매개 변수를 섞어서 사용할 경우에는 기본 매개 변수가 오른쪽으로 가야됨

함수이름(매개변수, 매개변수=기본값, 매개변수=기본값)

<script>

  const earnings = function (name, wage = 8590, hours = 40) {
    console.log(`# ${name}님의 급여 정보`);
    console.log(`- 시급: ${wage}원`);
    console.log(`- 근무 시간: ${hours}시간`);
    console.log(`- 급여: ${wage * hours}원`);
    console.log('');
  }

  // 최저 임금으로 최대한 일하는 경우
  earnings('smith');

  // 시급 1만원으로 최대한 일하는 경우
  earnings('adam', 10000);

  // 시급 1만원으로 52시간 일한 경우
  earnings('tom', 10000, 52);
</script>

응용 문제

<script>
    // 년도를 인수로 전달하지 않은 경우에는 현재 년을 기본값으로 함.
    // 윤년을 확인하는 함수를 정의 - 정수 연도를 입력받아서 윤년의 여부를 불린형으로 반환.
    const isLeapYear = function (year = new Date().getFullYear()) {
        const isLeapYear = (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0);
        return isLeapYear;
    }

    console.log(`올해는 윤년일까? === ${isLeapYear()}`); 
</script>

3. 즉시 호출 함수 Immediately-invoked function expression

(function () { })();

🐰 선언과 동시에 함수가 실행되며 보통은 함수명 없이 사용하기 때문에 재호출이 안됨
🐰 변수의 충돌을 막기 위해 사용. 재사용을 위해서 함수를 만드는게 아닌 변수의 충돌을 막기 위해 블록화를 하는 목적으로 사용

💡 자바 스크립트에서 선언적 함수보다 익명함수를 생성하고 바로 호출하는 패턴이 많은 이유

- 이름 충돌 방지
- 다른 프로그램에 비해 자바 스크립트는 라이브러리를 많이 사용하고
한 페이지에 사용하는 프로그램이 여러 개의 파일로 나누어져 있거나 여러 개로 분리되어 있어서
다른 프로그래밍 언어보다 이름 충돌되는 경우가 많음
- 익명함수를 사용해서 이름이 중복되는 함수를 만드는 것을 방지

<!-- 이름 충돌 문제 발생 -->
<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`);
</script>

<!-- 내가 만든 자바스크립트 코드 -->
<script> // Uncaught SyntaxError: Identifier 'pi' has already been declared
    let pi = 3.141592; // 중복 선언
    console.log(`파이 값은 ${pi}입니다.`);
</script>

<script>
    // 1. 재호출이 안되는 형태
    (function() {
        life();
    })();
    function life() {
        console.log(`즉시 실행 함수1`); // 즉시 실행 함수1
    }

    // 1) 익명함수처럼 보이니까 즉석 실행 함수를 변수에 저장한다면?
    let instant = (function() {
        console.log('즉시 실행 함수2'); // 즉시 실행 함수2
    })();
    console.log(typeof instant); // undefined. 변수에 할당되지는 않고 실행만 됨.
    // instant(); // Uncaught TypeError: instant is not a function

    // 2) 선언적 함수처럼 이름을 지정하면 재실행 되지 않을까?
    (function instant3rd () {
        console.log(`즉시 실행 함수3`);
    })();

    // instant3rd(); // Uncaught ReferenceError: instant3rd is not defined

    // 2. 재실행이 가능한 경우
    let instant4th;
    (instant4th = function() {
        console.log('즉시 실행 함수4'); // 즉시 실행 함수4
    })();
    console.log(typeof instant4th); // function
    instant4th(); // 즉시 실행 함수4
</script>

스코프 scope : 변수가 존재하는 범위

- 같은 단계의 스코프에서 동일한 이름의 변수가 있으면 충돌
- 스코프 단계를 변경하는 방법은 중괄호를 사용해서 블록을 만들거나, 함수를 생성해서 블록을 만듦
- 블록 내부에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 충돌하지 않고

외부 변수를 가려서 내부 블록에서 선언한 변수만 볼 수 있음
- 블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상을 섀도잉 shadowing 이라고 함

💡 블록({}) 생성으로 이름 충돌 문제를 해결하는 방법은 구 브라우저나, var 키워드 사용하는 경우에는 사용할 수 없어서 대체재로 즉시 호출 함수를 사용

<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.

    // 블록을 사용한 스코프 생성
    {
        let pi = 3.141592; // 블록에서 선언한 변수는 블록 안에서만 사용 가능
        console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.141592입니다. 블록에서 pi가 선언되지 않았다면 전역을 들고 옴.
    }

    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.

    // 함수 블록을 사용한 스코프 생성
    function sample() {
        let pi = 3.141592;
        console.log(`파이 값은 ${pi}입니다.`);
    }
    sample(); // 파이 값은 3.141592입니다.
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.
</script>

var 에서 블럭 사용과 즉석 실행 함수

<script>
    var animal = 'dog';
    console.log(animal); // dog

    {
        var animal = 'cat';
        console.log(animal); // cat
    }
    console.log(animal); // cat. 블록에서 사용했지만 블록 밖에서 변수 사용이 됨

    var animal = 'dog';
    console.log(animal); // dog
    (function () {
        var animal = 'cat';
        console.log(animal); // cat
    })();

    console.log(animal); // dog. 즉시 호출 함수의 경우에는 함수 블럭 안에서만 변수의 범위가 제한 됨.
</script>

블록 사용으로 이름 충돌을 막을 수 없는 경우 즉시 호출 함수 사용

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.
</script>

<!-- 내가 만든 자바스크립트 코드 -->
<script>
    /* 즉시 호출 함수를 사용해 변수 이름 충돌 문제를 해결 */
    (function () {
        let pi = 3.141592;
        console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.141592입니다.
    })();
</script>

4. 엄격 모드 strict mode

🐰 'use strict' 문자열을 읽은 후 부터는 코드를 엄격하게 검사
🐰 초기의 자바 스크립트는 간단한 보조 프로그램을 만드는게 목적이라 어느 정도 오류가 있어도 정상적으로 작동.
하지만 이후에 자바 스크립트의 사용이 활발해 지고, 규모가 있는 프로그램을 만들기 위해서는 코드의 오류를 엄격하게 검사를 해야돼서 엄격 모드 사용

🥕 즉시 호출 함수를 만들고, 이 블록의 가장 윗쪽에 엄격 모드를 적용하는 경우가 많음
▶️ 이렇게 하면 해당 블록 내부에서만 엄격 모드가 적용

 사용예:
    (function () {
        'use strict';
        문장;
        문장
     }) ();

<script>
    /* 변수를 선언하지 않아도 사용이 됨. */
    data = 10;
    console.log(data); // 10
</script>
<script>
    'use strict';
    data = 10; // Unresolved variable or type data
    console.log(data); // 10
</script>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 글자·스타일·속성 조작하기, 문서 객체 생성·이동·제거하기 (0)	2024.04.02
[JavaScript] 문서객체모델 - DOMContentLoaded, 문서 객체 가져오기 (0)	2024.04.02
[JavaScript] 재귀 함수, 콜백 함수, 화살표 함수 (0)	2024.03.30
[JavaScript] 나머지 매개변수와 전개 연산자 (0)	2024.03.29
[JavaScript] 사용자 정의 함수 예제 (0)	2024.03.28

ID_ allriver