예제로 배우는 자바스크립트 요약 및 코드 분석 4장 - 4.3~4.6

4.3 함수의 매개변수

4.3.1 매개변수의 기본 값

  자바스크립트 함수에서는 인수와 매개변수의 개수가 일치하지 않아도 오류가 발생하지 않는다. 그러나 다음 예에서와 같이 함수 호출에서 전달되는 인수의 개수와 함수 정의에서 사용되는 매개변수의 개수가 다른 경우에는 매개변수의 기본 값(default value)을 설정해서 사용해야 한다.

예제 4-11. 매개변수의 기본 값

parameter_default.html

코드 원문

<p id="show"></p>
<script>
        function addFunc(a, b=5) {
            return a+b;
        }

        document.getElementById("show").innerHTML = addFunc(10);
</script>

예제 4-11. 매개변수의 기본 값

parameter_default.html

코드 분석

<p id="show"></p>
// html 태그 <p></p>를 선언하고 id값에 show를 지정한다.
<script>
        function addFunc(a, b=5) {
        /* 사용자 함수 addFunc를 지정하고 매개변수 a, b를 선언한다.
        매개변수 b의 기본 값은 5로 한다. */
            return a+b;
        }

        document.getElementById("show").innerHTML = addFunc(10);
        /* 사용자 정의 함수 addFunc(10)를 선언한다. 매개변수가 2개인데
        두번째 매개변수는 기본값을 가지므로 인수는 하나만 선언해 주어도 된다. */
</script>

addFunc() 함수의 매개변수 b의 기본값을 5로 설정했다.

 

다음 코드에서는 addFunc(10, 50)으로 함수를 호출했다. 그러면 매개변수 b의 기본 값 대신 전달받은 50의 값을 가진다.

예제 4-12. 매개변수와 인수의 개수가 같은 경우

parameter_default2.html

코드 원문

<p id="show"></p>

<script>
    function addFunc(a, b=5) {
        return a+b;
    }

    document.getElementById("show").innerHTML = addFunc(10,50);
</script>

예제 4-12. 매개변수와 인수의 개수가 같은 경우

parameter_default2.html

코드 분석

<p id="show"></p>
// 태그 p 선언 id 값으로 show를 지정한다.

<script>
    function addFunc(a, b=5) {
    // 사용자 함수 addFunc 선언, 매개변수 b의 기본값은 5로 한다.
        return a+b;
        // 반환값은 a+b로 한다.
    }

    document.getElementById("show").innerHTML = addFunc(10,50);
	/* 함수 addFunc()의 인수 10, 50을 넣어서 결과값을 출력한다.
    함수 addFunc()의 매개변수 b의 기본값은 5이나 새롭게 인수를 넣어주었기 때문에
    원래 있던 기본값 5는 무시되고 인수로 50이 들어간다.*/
</script>

 

4.3.2 나머지 매개변수

  자바스크립트에서는 함수 정의 시 매개변수의 개수를 미리 정하지 않고 매개변수의 값을 무한대로 설정 할 수 있다. 이때 사용되는 매개변수를 나머지 매개변수(rest parameter)라고 한다. 나머지 매개변수에서는 기호 ...을 사용한다.

예제 4-13. 나머지 매개변수 사용 예

parameter_rest.html

코드 원문

<p id="show"></p>
<script>
    function sumScores(...scores) {
        let sum=0;
        for (let score of scores) {
            sum += score;
        }
        return sum;
    }
    let sum = sumScores(70,80,90,100);
    document.getElementById("show").innerHTML = "합계: " + sum;
</script>

예제 4-13. 나머지 매개변수 사용 예

parameter_rest.html

코드 원문

<p id="show"></p>
<script>
    function sumScores(...scores) {
    // 나머지 매개변수를 가지는 사용자 함수 sumScores 선언
        let sum=0;
        for (let score of scores) {
        // for of 문 선언 배열 scores의 값이 차례대로 들어가며 반복된다.
            sum += score;
        }
        return sum;
    }
    let sum = sumScores(70,80,90,100);
    // 함수 sumScores 호출하고 결과값을 변수 sum에 저장
    document.getElementById("show").innerHTML = "합계: " + sum;
    /* 함수 document.getElementById()를 호출, id가 show 값인 태그 <p>로 간다.
    innerHTML를 이용해서 문자열 '"합계: " + sum' 를 출력한다.
</script>

 

4.3.3 argument 객체

  자바스클비트 함수는 arguments 객체를 내장하고 있다. 이 객체는 함수 호출 시 전달되는 인수들을 배열 형태로 저장하고 있다. 다음 예제를 통해서 arguments 객체의 사용법에 대해 알아보자.

예제 4-14. arguments 객체 사용 예

arguments.html

코드 원문

<p id="show"></p>
<script>
    function maxScores() {
        let max = -Infinity;
        for(let i = 0; i < arguments.length; i++) {
            if(arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    }

    let max_score = maxScores(87, 79, 93, 75, 68, 90, 88);
    document.getElementById("show").innerHTML = "최고 점수: " + max_score;
</script>

예제 4-14. arguments 객체 사용 예

arguments.html

코드 원문

<p id="show"></p>
<script>
    function maxScores() {
        let max = -Infinity;
        for(let i = 0; i < arguments.length; i++) {
            if(arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    }

    let max_score = maxScores(87, 79, 93, 75, 68, 90, 88);
    document.getElementById("show").innerHTML = "최고 점수: " + max_score;
</script>

예제 4-14. arguments 객체 사용 예

arguments.html

코드 원문

<p id="show"></p>
<script>
    function maxScores() {
        let max = -Infinity;
        // 변수 max를 선언하고 Intinity 프로터피 값 저장
        for(let i = 0; i < arguments.length; i++) {
        // for문 선언, i가 객체 argument의 길이 값 미만까지 반복
            if(arguments[i] > max) {
            // 변수 max값이 argument[i]보다 작으면 코드 실행
                max = arguments[i];
            }
        }
        return max;
    }

    let max_score = maxScores(87, 79, 93, 75, 68, 90, 88);
    // 사용자 함수 maxScores 실행 인자로 87, 79, 93, 75, 68, 90, 88를 갖는다.
    document.getElementById("show").innerHTML = "최고 점수: " + max_score;
</script>

 

4.4 자바스크립트 스코프

  스코프(scope)는 '범위'란 뜻을 가진 용어로 자바스크립트 뿐만 아니라 다른 프로그램 언어에서도 사용되는 개념이다. 스코프는 단어가 가진 의미대로 변수에 접근할 수 있는 유효 범위를 의미한다. 자바 스크립트에서 스코프의 개념은 중요하다.

 

자바스크립트에서 이 스코프는 전역 스코프(global scope), 함수 스코프(function scope), 블록 스코프(block scope) 세 가지로 나누어진다.

1. 전역 스코프 : 하나의 프로그램 내 전체 영역에서 사용 가능하다. 전역 스코프에서 사용되는 변수를 전역 변수(global variable)이라고 한다.

2. 함수 스코프 : 함수 내에서만 사용 가능하다. 함수 스코프에서 사용되는 변수를 지역 변수(local variable)이라고 한다.

3. 블록 스코프 : 자바스크립트 ES6(2015) 버전 이후 부터 도입된 개념으로 블록 스코프는 블록({ }) 내에서 사용 가능하다. 특정 블록({}) 내에서 let이나 const로 선언한 변수는 블록 외부에서 사용할 수 없다.

여기서 설명한 변수는 함수나 객체등을 포함한 포괄적인 개념이다. 자바스크립트에서는 함수, 배열, 객체, 문자열 등도 모두 일종의 변수이다.

 

4.4.1 전역 스코프

  다음 예에서와 같이 전역 스코프에서 선언된 전역 변수는 프로그램 내 어디서든 접근할 수 있다.

예제 4-15. 전역 변수 사용 예

scope_global.html

코드 원문

<script>
    let x = 10;
    function func() {
        document.write(x + "<br>");
    }
    func();
    document.write(x);
</script>

예제 4-15. 전역 변수 사용 예

scope_global.html

코드 분석

<script>
    let x = 10;
    // 전역 스코프에서 변수 x 선언, 전역 변수가 된다. 모든 곳에서 사용 가능하다.
    function func() {
        document.write(x + "<br>");
    }
    func();
    document.write(x);
</script>

  전역 변수 x는 func() 함수 내부와 외부를 포함한 프로그램 내 어디서든 접근 가능하다.

 

4.4.2 함수 스코프

  다음 예에서와 같이 함수 스코프에서 선언된 변수를 지역 변수라고 한다.지역 변수는 변수가 선언된 해당 함수 스코프에서만 접근할 수 있다.

예제 4-16. 지역 변수 사용 예

scope_func.html

코드 원문

<script>
    function func() {
        let x = 10;
        document.write(x + "<br>");
    }

    func();
    document.write(x);
</script>

예제 4-16. 지역 변수 사용 예

scope_func.html

코드 분석

<script>
    function func() {
        let x = 10;
        // 함수 스코프에서 지역 변수 x 선언
        document.write(x + "<br>");
    }

    func();
    // 함수 func() 호출
    document.write(x);
    // 변수 x 출력 지역 변수이기 때문에 전역 스포트에서 사용하려고 하면 오류가 난다.
</script>

 

4.4.3 블록 스코프

  블록 스코프에서 선언된 변수는 해당 블록({}) 내에서만 사용 가능하다. 다음 예를 통해서 블록 스코프에 대해 알아보자.

예제 4-17. 블록 스코프에 사용된 변수

scope_block.html

코드 원문

<script>
    function func() {
        if (true) {
            let x = 10;
        }
        document.write(x + "<br>");
    }

    func();
</script>

예제 4-17. 블록 스코프에 사용된 변수

scope_block.html

코드 분석

<script>
    function func() {
        if (true) {
            let x = 10;
            // 블록 스코프에서 변수 x 선언, 블록 스코프에서만 사용가능하다.
        }
        document.write(x + "<br>");
        // 블록 스코프 변수를 사용하려 했기 때문에 오류가 발생한다.
    }

    func();
</script>

 

4.5 클로저

  앞에서 전역 스코프에서 사용하는 변수를 전역 변수라고 하고 함수 스코프에서 사용하는 변수를 지역 변수라고 한다고 설명했다. 전역 변수는 편리한 점이 많지만 어디서나 값이 변경될 수 있기 때문에 보안에 취약하고 예기치 못한 오류가 발생될 수 있다.

 

클로저(closure)는 전역 변수가 아닌 변수가 전역 변수와 같은 방식으로 동작하지만 함수로 그 값을 변경할 수 없도록 변수를 '사유화'할 수 있는 방법을 제공한다.

 

4.5.1 클로저란?

  이번 절에서는 몇 가지 예시를 통해 클로저의 개념을 설명한다. 다음은 버튼을 클릭하면 값이 1씩 증가하는 카운터 프로그램의 예이다.

예제 4-18. 카운터에 전역 변수 사용하기

counter1.html

코드 원문

<button onclick="incCounter()"> + </button>
<p id="show">0</p>

<script>
    let counter = 0;            // counter; 전역 변수

    const incCounter = function() {
        counter += 1;
        document.getElementById("show").innerHTML = counter; 
    }
</script>

예제 4-18. 카운터에 전역 변수 사용하기

counter1.html

코드 원문

<button onclick="incCounter()"> + </button>
// 버튼 태그 선언하고 클릭할때마다 함수 incCounter() 실행
<p id="show">0</p>

<script>
    let counter = 0;            // counter; 전역 변수

    const incCounter = function() {
    // 함수 function 선언
        counter += 1;
        document.getElementById("show").innerHTML = counter;
        /* document.getElementById() 함수로 id show가 가리키는 곳으로 접근
        innerHTML로 counter 변수 출력*/
    }
</script>

 

다음 코드에서는 동일한 코드에 변수 count를 함수 스코프에서만 사용 가능한 지역 변수로 사용하는 예를 살펴보자.

예제 4-19. 카운터네 지역 변수 사용하기

counter2.html

코드 원문

<button onclick="incCounter()"> + </button>
<p id="show">0</p>
<script>
    const incCounter = function() {
        let counter = 0;        // counter: 지역 변수
        counter += 1;
        document.getElementById("show").innerHTML = counter;
    }
</script>

예제 4-19. 카운터네 지역 변수 사용하기

counter2.html

코드 원문

<button onclick="incCounter()"> + </button>
// button 태그 선언 클릭할때마다 함수 incCounter()가 실행된다.
<p id="show">0</p>
// p 태그 선언하고 id 값을 show로 한다.
<script>
    const incCounter = function() {
    // 익명 함수 function를 선언하고 변수 incCount에 연결한다.
        let counter = 0;        // counter: 지역 변수
        /* 지역 변수이기 때문에 함수가 호출될 때마다 counter값이 0으로
        리셋된다. */
        counter += 1;
        document.getElementById("show").innerHTML = counter;
    }
</script>

 

  전역 변수를 직접적으로 사용하지 않고 incCounter() 함수가 호출되어 실행한 다음 counter 변수 값을 계속 사용할 수 있는 방법이 있다. 클로저를 사용하면 된다. 클로저를 사용해서 위의 코드를 다시 작성해보자.

예제 4-20. 클로저를 이용한 카운터

closure1.html

코드 원본

<button onclick="incCounter()"> + </button>
<p id="show">0</p>
<script>
    const increase = ( function() {
        let counter = 0;
        return function() {
            counter += 1;
            return counter;
        }
    })();

    function incCounter() {
        document.getElementById("show").innerHTML = increase();
    }
    
</script>

예제 4-20. 클로저를 이용한 카운터

closure1.html

코드 분석

<button onclick="incCounter()"> + </button>
/* html 태그 <button> 선언하고 기능으로 onclick 부여,
클릭할 때마다. 함수 incCounter() 호출 */

<p id="show">0</p>
// p태그에 id show 부여
<script>
    const increase = ( function() {
    // 자기호출 함수 선언, 선언과 동시에 실행된다.
        let counter = 0;
        return function() {
            counter += 1;
            return counter;
        }
    })();

    function incCounter() {
        document.getElementById("show").innerHTML = increase();
        /* +를 누르면 incCounter() 함수가 호출된다. incCounter 함수가 실행되면 다시
        increase 함수가 호출된다. increase() 함수는 counter를 1 증가시키고 다시
        함수 값을 반환한다.*/
    }
    
</script>

  자바스크립트에서는 increase() 함수 실행 후 실행이 종료되도 함수 내에서 사용된 지역 변수 counter가 내부의 익명 함수에서 사용되고 있어서 그 값을 계속 유지하고 있다. 이렇게 해서 클로저가 구현된다.

  클로지는 정의하기 쉽지 않은 개념이지만, 자바스크립트의 클로저는 하나의 함수가 실행 종료되도 내부에서 사용된 지역 변수를 유효한 값으로 유지하게 해준다.

 

4.5.2 클러저 활용

  앞에서 배운 클로저에 대한 이해를 돕기 위해 클러저가 사용되는 다음의 코드를 살펴보자.

예제 4-21. 클로저 사용 예

closure2.html

코드 원문

<button type = "button" onclick="changeColor()"> 색상 변경 </button>
<div id="box" style="width: 100px; height: 100px; background-color: green;"></div>

<script>
    var box = document.getElementById("box");

    const change = ( function() {
        let toggle = false;
        return function() {
            box.style.backgroundColor=toggle ? 'blue' : 'red';
            toggle = !toggle;
            return toggle;
        }
    })();

    function changeColor() {
        document.getElementById("show").innerHTML = change();
    }
</script>

예제 4-21. 클로저 사용 예

closure2.html

코드 원문

<button type = "button" onclick="changeColor()"> 색상 변경 </button>
<div id="box" style="width: 100px; height: 100px; background-color: green;"></div>
/* html 블록태그 div 선언 id는 box로 하고 크기는 가로 100px 세로 100px
배경 색은 녹색으로 한다. */

<script>
    var box = document.getElementById("box");
	// 변수 box를 선언하고 함수 document.getElementById로 id 박스에 연결한다.
    
    const change = ( function() {
    // 자기호출함수 change를 선언한다.
        let toggle = false;
        // 함수 toggle를 선언하고 false 값을 넣는다.
        return function() {
        // return값으로 함수 function()를 지정한다.
            box.style.backgroundColor=toggle ? 'blue' : 'red';
            /* box의 백그라운드 컬러를 지정한다.
            삼항 연산자 ? A:B를 사용한다.
            toggle이 true면 blue가 false면 red가 된다.
            즉 toggle이 true면 백그라운드 컬러는 blue가 false면 red가 된다.
            toggle = !toggle;
            // toggle이 true면 false가 되고 false면 true가 된다.
            return toggle;
            // toggle 값을 리턴한다.
        }
    })();

    function changeColor() {
        document.getElementById("show").innerHTML = change();
    }
</script>

  이 예에서 클로저는 함수 change()가 종료된 후에도 전역 스코프에서 변수 toggle을 접근할 수 있는 내부의 익명 함수를 반환한다.

  클로저는 '부모 함수가 종료된 후에도 부모 스코프에 접근할 수 있는 기능을 가진 함수라고 정의할 수 있다.

 

4.6 예외 처리

  자바스크립트에서 예외 처리(exception handling)은 코드 실행 중에 예기치 못한 요류가 발생했을 때 코드의 흐름을 복구하는 기능을 말한다. 자바스크립트 코드는 다양한 오류를 발생사킬 수 있다. 문법 오류, 사용자 입력 오류, 네트워크 오류 등의 오류가 발생하면 프로그램 실행이 중단되거나 원치 않은 결과를 가져올 수 있다.

  예외 처리를 하는데는 try, catch, finally를 조합해서 사용한다. 형태는 두가지 형태가 많이 사용된다.

1. try~ catch 문

2. try~ catch~ finally 문

 

4.6.1 try~ catch 문

먼저 alert() 함수 사용시 스펠링 오류가 있는 다음의 예를 살펴보자.

예제 4-22. alert()의 스펠링 오류 예

error1.html

코드 원문

<script>
    alerttttt("안녕하세요.");
</script>

예제 4-22. alert()의 스펠링 오류 예

error1.html

코드 원문

<script>
    alerttttt("안녕하세요.");
</script>

위 코드에서는 alert() 함수 이름이 잘못되어있다. 실행 결과를 보면 브라우저 화면에서 어떤 메시지도 나오지 않고 있다.

 

위 예제 4-22에 tryA catch 문을 적용하여 다시 작성해보면 다음과 같다.

예제 4-23. try~catch 문 사용 예

try_catch.html

코드 원문

<p id="show"></p>
<script>
    try {
    alerttttt("안녕하세요.");
    document.write("test!");
    }
    catch(err) {
        document.getElementById("show").innerHTML = err.message;
    }
</script>

예제 4-23. try~catch 문 사용 예

try_catch.html

코드 원문

<p id="show"></p>
<script>
    try {
    // try문 선언 문제가 발생할 수 있는 코드를 중괄호 안에 넣는다.
    alerttttt("안녕하세요.");
    /* alerttttt() 라는 함수는 없으므로 오류가 발생한다. 오류가 발생하면
    catch 블럭에 있는 코드가 실행되게 된다. */
    document.write("test!");
    // 이 코드은 위에서 오류가 발생되었으므로 실행되지 않는다.
    }
    catch(err) {
    // try 부분에서 오류가 발생하면 catch 블럭으로 이동한다.
        document.getElementById("show").innerHTML = err.message;
        // try 블록에서 발생한 오류 메시지가 표시된다.
    }
</script>

위 예에서와 같이 try~catch 문은 오류가 있을거 같은 코드 블럭에 대해 테스트를 시도하여 오류를 처리하는 데 사용된다. try~ catch 문은 다음과 같은 형식으로 사용된다.

try {                     // 테스트할 문장 } catch(err) {                     // 오류 처리 문장 }

 

다음은 try~ catch 문과 throw 문을 이용해서 입력창에 0~9 사이의 숫자가 입력되었는지를 체크하는 프로그램이다.

예제 4-24. try~ catch 문으로 입력창 체크하기

try_catch2.html

코드 원문

<h3>0~9 숫자가 입력되었는지 체크하기</h3>
<input id="input1" type="text"> <span id="show"></span><br>
<button onclick="checkInput()">확인</button>

<script>
    function checkInput() {
        let input_elem = document.getElementById("input1");
        let a= input_elem.value;
        document.getElementById("show").innerHTML = "";
        try {
            if(a == "") throw "비어 있습니다.";
            if(isNaN(a)) throw "숫자가 압니다.";
            a = Number(a);
            if(a<0 || a>9) throw "0~9 사이 숫자가 아닙니다.";
        }
        catch(err) {
            document.getElementById("show").innerHTML + "오류 " + err;
        }
    }
</script>

예제 4-24. try~ catch 문으로 입력창 체크하기

try_catch2.html

코드 분석

<h3>0~9 숫자가 입력되었는지 체크하기</h3>
<input id="input1" type="text"> <span id="show"></span><br>
/* input 태그를 선언하고 id 값은 input, 타입은 text로 한다.
웹페이지 이용자로부터 텍스트 데이터를 입력받는 곳이 나온다. */
<button onclick="checkInput()">확인</button>
/* button 태그를 선언한다 onclick 속성을 가진다. 버튼을 클릭하면
checkInput() 함수가 호출된다. */

<script>
    function checkInput() {
    // 사용자 함수 checkInput()를 선언한다.
        let input_elem = document.getElementById("input1");
        /* 변수 input_elem를 선언하고 document.getElementById 함수를 호출해서 
        id가 "input1"인 곳과 연결한다. html 태그 input이고 id가 input인 곳과
        연결된다. */
        let a= input_elem.value;
        // 변수 input_elem의 데이터를 변수 a에 저장한다.
        document.getElementById("show").innerHTML = "";
        /* document.getElementById("show").innerHTML를 이용해서 id값이 "show"인 곳에
        Null 값을 출력한다. */
        try {
        // try 문을 선언한다.
            if(a == "") throw "비어 있습니다.";
            // 변수 a 값이 공백이면 강제로 에러를 발생시킨다.
            if(isNaN(a)) throw "숫자가 아닙니다.";
            /* 함수 isNaN()를 호출한다. a가 숫자가 아니면 true값을 반환한다.
            a가 숫자가 아닐경우 에러가 강제로 발생되어 "숫자가 아닙니다"라는
            문자열을 출력한다. */
            a = Number(a);
            /* 함수Number()를 호출한다. 문자에 대응하는 아스키 코드 값을 
            반환하게 된다. */
            if(a<0 || a>9) throw "0~9 사이 숫자가 아닙니다.";
            /* a가 0미만이거나 9초과면 강제로 에러가 발생된다.
            "0~9 사이 숫자가 아닙니다." 문자열이 출력된다.*/
        }
        catch(err) {
            document.getElementById("show").innerHTML + "오류 " + err;
            /* document.getElementById("show").innerHTML를 이용해서
            id 값이 "show"인 곳에 "오류 " + err를 출력한다. */
        }
    }
</script>

  Throw 문은 강제로 오류를 발생시킨다. if문과 조합해서 특정 조건의 경우 throw 문을 실행하게 만들었다. 이렇게 강제로 오류를 발생시키고 싶을때 사용하는 것이 throw문이다. try-catch문과 if문, throw문을 같이 사용하면 자기가 원하는 곳에 오류를 발생시킬 수 있게 된다.

  아스키 코드는 키보드에서 입력되는 문자를 컴퓨터에서 표현되는데 사용되는 컴퓨터 코드이다. 모든 문자는 그에 대응하는 아스키코드 값을 가지며 이것은 한글과 알파벳도 해당된다.

 

4.6.2 try~ catch~ finally 문

  try~ catch~ finally 문에서 finally는 try~ 블럭의 결과와 상관없이 뭊조건 실행된다. 앞 예제 4-24에서 입력창에 입력된 데이터를 finally를 이용해서 초기화하면 다음과 같다.

예제 4-25. try~ catch~ finally 문 사용 예

try_catch_finally.html

코드 원문

<h3>0~9 숫자로 입력되었는지 체크하기</h3>
<input id="input" type="type"> <span id="show"></span><br>
<button onclick="checkInput()">확인</button>

<script>
    function checkInput() {
        const input_elem = document.getElementById("input");
        let a = input_elem.value;
        document.getElementById("show").innerHTML="";
        try{
            if(a == "") throw "비어 있습니다.";
            if(isNaN(a)) throw "숫자가 아닙니다.";
            a = Number(a);
            if(a<0 || a>9) throw "0~9 사이 숫자가 아닙니다.";
        }
        catch(err) {
            document.getElementById("show").innerHTML = "오류: " + err;
        }
        finally {
            input_elem.value = "";
        }
    }

</script>

예제 4-25. try~ catch~ finally 문 사용 예

try_catch_finally.html

코드 분석

<h3>0~9 숫자로 입력되었는지 체크하기</h3>
<input id="input" type="type"> <span id="show"></span><br>
<button onclick="checkInput()">확인</button>

<script>
    function checkInput() {
        const input_elem = document.getElementById("input");
        let a = input_elem.value;
        document.getElementById("show").innerHTML="";
        try{
            if(a == "") throw "비어 있습니다.";
            if(isNaN(a)) throw "숫자가 아닙니다.";
            a = Number(a);
            if(a<0 || a>9) throw "0~9 사이 숫자가 아닙니다.";
        }
        catch(err) {
            document.getElementById("show").innerHTML = "오류: " + err;
        }
        finally {
            input_elem.value = "";
        }
        /* 위의 코드에서 입력창에 입력을 하게 되는데 입력창에 넣은 데이터는
        입력이 끝나도 그대로 남아있다. finally 블럭을 사용해서 마지막에
        input_elem.value = ""; 코드가 실행되도록 하면 입력창이 초기화 된다. */
    }

</script>

finally는 try~ catch 블럭에서 오류 발생여부와 상관없이 마지막에는 finally에 있는 코드들이 실행된다.