2023.03.26 - [Front end/JavaScript] - 자바스크립트 function 문법 왜 쓰는가?
자바스크립트 function 문법 왜 쓰는가?
자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다. 그래야 응용도 잘하고 혼자서 코드를 잘 작성 할 수 있다. 함수는 길고 복잡한 코드를 한 단어로 축약하고 싶을
dongwookit.tistory.com
위 포스팅에서 사용한 예제를 사용하므로 참고하시면 더욱 빠른 이해가 될 것입니다!
function에 사용가능한 파라미터(매개변수) 문법
함수내에 파라미터를 넣어줄 수 있다.
function alert(자유롭게작명) {
document.querySelector('.alert-box').style.display = 자유롭게작명;
}파라미터를 넣는 방법
1. () 소괄호 내에 아무 글자나 적고
2. {} 중괄호 내에도 소괄호 내에 적은 같은 글자를 아무데나 적으면 된다.
파라미터를 왜 사용하는가?
-> 파라미터를 넣으면 함수의 기능을 더 업그레이드 할 수 있다.
파라미터를 넣으면 이제 함수를 쓸 때 그냥 쓰는게 아니라 소괄호 내에 뭔가 문자나 숫자등을 입력해서 사용 가능하다.
function alert(자유롭게작명){
document.querySelector('.alert-box').style.display = 자유롭게작명;
}
alert('안녕');
alert('바보');▲ 업그레이드 된 함수(파라미터를 넣은 함수)를 사용할 때는
소괄호 인수 자리에 뭔가 내가 원하는 문자를 입력해줄 수 있다.
문자를 입력하면 아까 그 {} 중괄호 내부의 '자유롭게작명' 자리에 문자가 쓱~하고 들어가게 된다.
그럼 alert('안녕') 이렇게 실행하면
document.querySelector('.alert-box').style.display = '안녕';
이런 코드가 실행된다는 것이다.
함수 파라미터 문법 응용 예제
<body>
<div class="alert-box">
알림창임<button onclick="alert('none')">닫기</button>
</div>
<button onclick="alert('block')">열기</button>
<script>
function alert(자유롭게작명) {
document.querySelector('.alert-box').style.display = 자유롭게작명;
}
// function openAlert() {
// document.querySelector('.alert-box').style.display = 'block';
// }
// function closeAlert() {
// document.querySelector('.alert-box').style.display = 'none';
// }
</script>
</body>이렇게 파라미터 문법을 이용한 함수를 만들면 openAlert와 closeAlert 함수 2개를 만들 필요 없이 함수 하나로 여러 기능을 할 수 있다.
즉, 비슷한 함수가 여러개 있으면 굳이 여러개 만들 필요 없이 함수 하나만 만들고 파라미터를 넣으면 된다.
파라미터를 넣으면 함수 하나가지고 다양한 기능을 실행할 수 있게 된다.
파라미터(매개변수) 문법 특징
1. 파라미터는 자유롭게 작명가능하다.
function plus(a){
2 + a
}2. 파라미터는 2개 이상 사용가능하다.
function plus(a, b){
a + b
}
plus(2, 5);콤마로 구분하면 된다. 그럼 함수 사용할 때도 자료 2개 입력가능하다.
ps. 수학시간의 함수 vs 자바스크립트의 함수는 둘 다 같은 역할을 한다.
중학교 수학시간을 떠올려보자.
f(x) = x + 1 일때
f(3)은 -> 4임
f(5)는 -> 6임x를 파라미터로 바꾸면 자바스크립트랑 똑같다.
실은 함수는 수학에서 "뭔가 input 넣으면 규칙에 따라 output을 출력해주는 마법의 상자" 만들 때 사용한다.
자바스크립트 함수도 "파라미터에 뭐 집어넣으면 규칙에 따라 각각 다른 기능 실행해주는 마법의 상자" 일 뿐이다.
'Front end > JavaScript' 카테고리의 다른 글
| 자바스크립트 this (1) (0) | 2023.03.27 |
|---|---|
| 자바스크립트 이벤트리스너를 왜 쓰는가? (0) | 2023.03.26 |
| 자바스크립트 function 문법 왜 쓰는가? (1) | 2023.03.26 |
| 동적 UI 만드는 방법 (0) | 2023.03.26 |
| 자바스크립트를 왜 쓰는가? (0) | 2023.03.26 |
