function parameter
<body>
<div class="alert-box" id="alert">
알림창
<button onclick="closeAlert()">닫기</button>
</div>
<button onclick="openAlert()">버튼</button>
<script>
function openAlert() {
document.getElementById('alert').style.display = 'block';
}
function closeAlert() {
document.getElementById('alert').style.display = 'none';
}
</script>
</body>- 위 openAlert(), closeAlert() function을 parameter를 이용해 하나의 기능으로 구현할 수 있다
<body>
<div class="alert-box" id="alert">
알림창
<button onclick="openAlert('none')">닫기</button>
</div>
<button onclick="openAlert('block')">버튼</button>
<script>
function openAlert(parameter) {
document.getElementById('alert').style.display = parameter;
}
</script>
</body>- parameter 를 이용해 'block', 'none' 등 가변 status를 function에 입력할 수 있도록 구현하면, function의 재활용이 가능하다
function 활용
- 긴 코드 축약해서 사용
- 파라미터 사용
- return으로 값 반환
function vat(a){
return a * 1.1 // 부가세 계산 함수
}
console.log(vat(60000)); // 66000
console.log(vat(55555)); // 61110.50000000001- return 을 통해 함수를 넣은 자리에 값을 반환할 수 있다
- 반환하는 값은 숫자, 문자, boolean 모든 타입이 가능하다 - return 시 함수는 종료되며, return 이후 코드는 실행되지 않는다
function vat(a){
var num = ( a * 1.1 ).toFixed(1);
return parseFloat(num)
}
console.log(vat(55555)); // 61110.5 - 소수점의 경우 컴퓨터 연산 시 2진법으로 바꾸며 약간의 오차가 생길 수 있다 > 이를 방지하기 위해서는 .toFixed(소수점자리수) 를 이용해 반올림해줄 수 있다
- (참고) 1.1을 2진법으로 바꾸면 1.00011001100110011001100 ... 무한 반복되는 숫자가 나오는데, 이를 모두 저장할 수 없기 때문에 중간에 끊고 저장을 하면서 작은 오차가 발생하는 것이다
- (참고) 다른 해결 방법은 10을 곱한 뒤 연산 후 다시 10으로 나누어주거나, 외부 라이브러리를 사용하는 방법도 있다 - 다만, toFixed 된 값은 문자 타입으로 자동 변환되므로, 이후 로직에서 에러를 방지하기 위해 return 시 float 타입으로 다시 변환해주어야 한다(parseFloat)
- (참고) JS에서 + 연산자는 문자도 더할 수 있기 때문에 1 + '1' 은 '11'이라는 결과가 나온다
eunji yang