Javascript

함수

변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없습니다.
하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있습니다.

함수

선언적 함수

기본 함수 정의문

함수를 사용하여 코드를 저장한 것을 '함수 정의문' 이라고 합니다.
변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언합니다.

기본형

함수 정의문({...}) 안에 작성된 코드는 즉시 실행되지 않습니다.
함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행됩니다.

정의되어 있는 함수를 호출하는 기본형

적용 예제

{
    function func(){
        document.write("함수가 실행되었습니다.");
    }
    func();
}

"함수가 실행되었습니다."가 출력됩니다.

익명 함수

익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 실행 방식입니다.
익명 함수의 코드는 변수값이므로 끝에 세미콜론(;)을 대입합니다.
익명함수는 호출시 변수명을 함수처럼 사용하면 됩니다.

익명 함수는 변수에 함수의 코드를 저장하는 대신 함수명을 사용하지 않습니다.
대신 변수명을 마치 함수명처럼 사용해서 함수를 호출하거나 변수값을 이동시키는데 사용할 수 있습니다.

익명 함수 기본형

변수값을 변수에 넣은 형태이므로 함수 코드 끝에 세미콜론을 붙여줍니다.

적용예제

<script>
//익명 함수 선언 및 변수에 대입
var hello = function()
{
    document.write("Hello World!")
};

//익명 함수 변수명으로 호출
hello();
</script>

"Hello World!"가 출력됩니다.

매개변수 함수

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행했습니다. 즉, 함수를 호출할 때 값을 전달할 수 없었습니다.
하지만 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 됩니다.

함수를 호출할 때 값을 전달하는 기본형

함수를 호출할 때 데이터 1은 매개변수 1에 저장되고 데이터 2는 매개변수 2에 저장됩니다. 그리고 데이터 n은 매개변수 n에 저장됩니다.

적용 예제

{
    function func (str){            
        document.write(str);        
    }
    func("함수가 실행되었습니다.");   
}

"함수가 실행되었습니다."가 출력됩니다. (str은 매개 변수)

리턴값 함수

return문은 함수에서 결괏값을 반환할 때 사용합니다.
그리고 함수에서 return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료됩니다.
다시 말해 함수 정의문에 return문이 사용되면 함수를 호출했을 때 결괏값(data)을 반환합니다.

return문 기본형

1번 함수 호출문 --> 2번 함수 코드 실행 --> 3번 자바스크립트 코드2를 무시하고 데이터를 반환 --> 1번 함수 호출문

기본 예제

function sum(num1, num2) {
    return num1 + num2;    
}
var result = sum(10, 20);
document.write(result);

적용 예제

{
    function func (){
        const str = "함수가 실행되었습니다.";
        return str;
    }
    document.write(func());
}

"함수가 실행되었습니다"가 출력됩니다.