자바스크립트 함수는 함수가 정의될 때 함수 내의 코드가 실행되지않고, 함수가 호출될 때 함수 내부의 코드가 실행된다. 함수의 호출은 다음의 경우에 발생한다.
1. 이벤트가 발생할 때 (ex. 사용자가 버튼을 클릭할 때 )
2. 자바스크립트 코드에서 호출할 때
3. 자체(재귀 함수) 호출할 때
함수를 호출할 때에는 함수명과 인수가 요구된다. 인수는 매개변수와 1:1 대응관계를 가지고 매핑된다.
함수 내에서 매개변수는 지역 변수로 적용한다.
01. 함수 호출에서 괄호의 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function toCelsius(f) {
return (5/9) * (f - 32);
}
document.write(toCelsius(77));
</script>
</body>
</html>
02. 함수 안에서 외부 함수 호출하기
함수 내부는 일반적인 프로그램 코드 부분과 동일하므로 함수 외부에 있는 다른 함수를 호출할 수도 있다.
이 때, 호출되는 외부 함수는 다른 어느 위치에서도 호출이 가능하므로 전역함수라고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호출1</title>
<script>
function square(x,y) { // 함수 1
let sum;
sum = (x*y)/2;
return sum;
}
function display(a,b) { // 함수 2 : 서로 다름, squre(a,b)로 호출
document.write("삼각형의 면적 : " + square(a,b));
}
</script>
</head>
<body>
<script>
display(100,200);
</script>
</body>
</html>
03. 함수 안에서 내부 함수 호출하기
호출된 내부 함수는 함수 내부에서만 호출되지 다른 곳에서는 호출되지 않는 지역 함수에 해당된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>호출2</title>
<script>
function area(x,y) {
let calculate = function (a,b) {
sum = (x * y) / 2;
return sum;
}
let result = calculate(x,y);
document.write("삼각형의 면적 : " + result);
}
</script>
</head>
<body>
<script>
area(100,200);
document.write("삼각형의 면적 : " + calculate(x,y)); // 호출되지 않는다.
</script>
</body>
</html>