Web/JAVASCRIPT

function의 파라미터 문법

kkkkk1023 2023. 7. 12. 12:28

함수의 매개변수 

<!-- 매개변수 사용 전 -->

<!DOCTYPE html>
<head>
    <title></title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div class="alert-box" id="alert">알림창 입니다.<button onclick="alertClose()">알림창 숨기기</button></div>

    <button onclick="alertOpen()">알림창 보여주기</button>

    <script>

        function alertOpen() {
            document.getElementById('alert').style.display = 'block';
        }

        function alertClose() {
            document.getElementById('alert').style.display = 'none';
        }

    </script>

</body>
</html>

<!-- 매개변수 사용 후 -->

<!DOCTYPE html>
<head>
    <title></title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <!-- STEP 01 -->
    <div class="alert-box" id="alert">알림창 입니다.<button onclick="alert('none');">알림창 숨기기</button></div>

    <!-- STEP 03 -->
    <button onclick="alert('block');">알림창 보여주기</button>

    <script>

        function alert(option) {
            document.getElementById('alert').style.display = option;
        }

    </script>

</body>
</html>

 

 

위의 코드와 같이 매개변수를 활용하면 2개의 함수를 한개로 줄일 수 있다.
두개 뿐만 아니라 같은 기능을 하는 여러 함수들을 가변적인 부분에 매개변수를 추가함으로써
함수의 개수를 대폭 감소시킬 수 있다.