Web/JAVASCRIPT
function의 파라미터 문법
by print_soo
2023. 7. 12.
함수의 매개변수
<!-- 매개변수 사용 전 -->
<!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개의 함수를 한개로 줄일 수 있다.
두개 뿐만 아니라 같은 기능을 하는 여러 함수들을 가변적인 부분에 매개변수를 추가함으로써
함수의 개수를 대폭 감소시킬 수 있다.
