함수: 개요

Javascript 함수(function)란?

HTML에서 Javascript 실행문들을 사용자가 특정한 event를 발생시켰을 때 호출되도록 작성한 실행문들의 집합.

function 식별자(매개변수) {
실행문; 반환문;}

함수의 기본적인 형태. 매개변수 / 반환문은 있는 유형도 없는 유형도 있으며 코드 작성자가 필요에 따라 정한다.

매개변수(Parameter)와 인수(Argument), 반환(Return)

1. 매개변수와 반환값이 모두 없는 유형

<button type="button" onclick="myAlert();">클릭</button>

<script>

function myAlert() {
    alert("필요할 때마다 실행됩니다.");
}

</script>

myAlert() 함수가 버튼 클릭시 호출되어 alert 메시지를 실행하게 된다.

2. 매개변수가 있고 반환문은 없는 유형

<button type="button" onclick="addNum(3, 5);">클릭</button>

<script>

function addNum(a, b) {
    alert("두 수의 합: " + (a + b));
}

</script>

버튼을 클릭하면 addNum(3, 5); 실행문이 실행된다. function addNum(a, b) 에서 a, b는 매개변수, 3은 a라는 매개변수에, 5는 b라는 매개변수에 각각 전달되는 인수라고 한다.

3. 매개변수와 반환값이 모두 있는 유형

<script>

function addNum2(a, b) {
    var addResult = a + b;
    return addResult; //반환문. 반환값은 변수, 계산식 또는 리터럴이 될 수 있다.
}

addNum2(3, 5); //함수 실행문. 아직 화면에 표시되지는 않는다.
document.write("addnum2(3,5): " + addNum2(3, 5)); //실행 결과를 화면에 표시한다.

</script>

4. 매개변수가 없고 반환값이 있는 유형

<input type="number" id="inputNum1">&nbsp;
<input type="number" id="inputNum2"><br>
<button type="button" onclick="yourMainAdd();">클릭</button>

<script>

var inputNum1 = document.getElementById("inputNum1");
var inputNum2 = document.getElementById("inputNum2");

function yourAdd() {
    var inputNum1 = Number(document.getElementById("inputNum1").value);
    var inputNum2 = Number(document.getElementById("inputNum2").value);
	//document.getElementById() 메서드로 가져온 input의 속성값은 String 타입이므로
	//Number() 함수를 통해 number타입으로 변환한다.
    return (inputNum1 + inputNum2);
}

function yourMainAdd() {
    var yourResult = yourAdd();
    console.log("실행결과: " + yourResult);
    
    inputNum1.value = "";
    inputNum2.value = "";
    //실행결과를 표시한 뒤 input란에 입력된 내용을 지운다(빈 문자열로 대체한다).
}

</script>

각 input에 입력한 숫자를 버튼 클릭시 yourMainAdd() 함수를 호출하고 yourMainAdd() 함수 내부에서 yourAdd() 함수를 호출해 두 수를 더한 결과값을 반환받는다.

반환받은 값은 콘솔창을 통해 출력된다.