Chapter 05 함수 - 함수 개요 / 선언적 함수

5.1 함수 개요

▲ 함수 : 코드의 집합, 모든 프로그래밍 언어에서 중요한 부분

var 함수 = function () { }; //익명 함수
function () { };           //선언적 함수

▲ 익명 함수 : 함수가 이름을 가지고 있지 않음

▲ 선언적 함수 : 함수가 이름을 가지고 있음

▲ 익명 함수와 선언적 함수의 차이점 : 두 가지 방법 모두 함수를 생성하는 방법이나, 약간의 차이가 있다.
익명 함수는 변수로 함수를 선언하기 때문에, 함수 출력의 순서가 중요함.
그러나 선언적 함수는 웹 브라우저가 먼저 읽기 때문에, 함수 출력의 순서가 중요하지 않음.

 

코드 5-1.  함수의 생성과 출력

<script>
    var 함수 = function () {
        var output = prompt('숫자를 입력해주세요', '숫자');
        alert(output);
    };
    alert(함수);
</script>

<코드설명> function(){ } 형태는 함수지만, 이름을 가지고 있지 않으므로 익명 함수 라고 부름. 이름이 없기 때문에 변수에 넣어서 사용해야함. 반대로 이름을 가지고 있는 함수를 선언적 함수 라고 부름.

 

코드 5-3.  함수의 호출

<script>
    // 함수 만들기
    var 함수 = function () {
        var output = prompt('숫자를 입력해주세요.', '숫자');
        alert(output);
    };
    
    //함수 호출
    함수();
</script>

<코드설명> function(){ } 형태는 함수지만, 이름을 가지고 있지 않으므로 익명 함수 라고 부름. 이름이 없기 때문에 변수에 넣어서 사용해야함

---

5.2 선언적 함수

▲ 선언적 함수

function 함수() {
}

 

코드 5-4.  선언적 함수의 재정의 (1)

<script>
    function 함수() {alert('함수 A'); }
    function 함수() {alert('함수 B'); }
    함수();
</script>

<코드설명> 이름이 같은 함수를 두개 만들고, 함수를 호출했을 때 둘 중 어떤 함수가 실행되는가? => 뒤에 위치하는 함수가 실행됨

코드 5-5.  익명 함수의 재정의 (1)

<script>
    var 함수 = function() {alert('함수 A'); }
    var 함수 = function() {alert('함수 B'); }
    함수();
</script>

<코드설명> 5-5는 5-4와 유사한 코드. 변수는 같은 이름으로 다시 선언하면 기존의 변수를 덮어 씌우므로 뒤쪽에 있는 변수를 사용하게 됨. 따라서 5-4, 5-5 모두 뒤에 위치한 함수가 이전에 선언한 함수를 덮어씌운 것.

코드 5-6.  익명 함수의 재정의 (2)

<script>
    함수();
    var 함수 = function() {alert('함수 A'); }
    var 함수 = function() {alert('함수 B'); }
</script>

<코드설명> 위의 코드는 오류가 발생해 실행되지 않음. 변수를 선언하기 이전에 변수를 사용했기 때문.

코드 5-7.  선언적 함수의 재정의 (2)

<script>
    함수();
    function함수() {alert('함수 A'); }
    function함수() {alert('함수 B'); }
</script>

<코드설명> 익명 함수와 달리, 선언적 함수를 사용하면 정상적으로 코드가 실행됨. 웹 브라우저는 script 태그 내부의 내용을 한 줄 한 줄 읽기 전에 선언적 함수를 읽음. 따라서 5-7은 첫째 줄부터 실행하는 것이 아니라 둘째 줄 → 셋째줄 → 첫째줄의 순서로 실행됨. 따라서 함수();는 문자열 '함수 B'를 출력함