[함수] #3. 함수 표현식

함수 표현식

함수를 선언한 후 함수 이름을 사용해 실행하는 것이 기본 방법이지만, 이 외에도 함수를 실행하는 방법이 있는데 이를 함수 표현식이라고 한다.

 

자바스크립트 함수는 표현식을 사용하여 정의될 수 있으며, 함수 표현식은 변수로 저장될 수 있다.

var x = function (a, b) {return a * b};

함수 표현식이 변수에 저장되면, 변수는 함수처럼 사용 가능해진다. 변수에 저장된 함수는 함수명이 필요 없으며, 변수 이름을 통하여 호출된다.

앞으로 나올 익명 함수와 즉시 실행 함수는 편의상 영어 약자로 표기하도록 하겠다.

익명 함수 (N.N.F)

Non-Name-Function

'익명 함수'는 이름 그대로 이름이 없는 함수를 일컫는다. 즉 익명 함수를 선언할 때에서는 함수에 이름을 선언하지 않는다. 설명이 어려워 보이지만 코드로 설명하면 다음과 같다.

<script>
    // 일반 함수 선언
    function add_org(a,b){
        var result = a+b;
        return result;
    }
    //익명 함수 선언
    var add_non = function(a,b){return(a,b);}

    document.write("일반 함수 결과 (10+15): "+add_org(10,15)+"<br>");
    document.write("일반 함수 결과 (10+15): "+add_non(10,15));
</script>

위 코드를 보면 일반 함수는 function 선언자를 이용해 함수 이름을 add_org로 선언한 반면 익명 함수는 편의상 변수명을 add_non이라고 선언했을 뿐, 함수의 이름을 선언하지 않은 채 함수의 인자와 반환 값을 선언했다.

 

이처럼 함수의 이름을 선언하지 않는 함수를 익명 함수라고 한다.

즉시 실행 함수 (D.P.F)

Direct-Process-Function

함수를 식으로 표현하는 또 하나의 방법은 '즉시 실행 함수'이다. DPF는 함수를 정의함과 동시에 실행하는 함수이며 개발자들이 자주 사용하는 방식이다.

 

DPF의 표현 방법은 함수 선언 소스 전체를 괄호로 묶는다고 생각하면 편리하다. 그리고 소스를 닫는 괄호 앞이나 인수가 들어갈 괄호를 넣는다. DPF는 ' 식 ' 이므로 끝에 세미클론을 붙임에 주의한다.

 

DPF는 변수에 할당할 수 있고( 식의 형태이므로) 함수에서 반환하는 값을 변수에 할당할 수도 있다. 즉시 실행 함수도 설명으로 하면 복잡하나, 코드로 설명하면 다음과 같다.

<script>
    // 일반 함수 선언
    function add_org(a,b){
        var result = a+b;
        return result;
    }
    
    //익명 함수 선언
    var add_non = function(a,b){return(a,b);}

    //즉시 실행 함수
    var rst_dir = (function(a,b){return(a,b)}(10,15));

</script>

화살표 함수 (A.F)

Arrrow-Function

ES6 버전부터는 => 표기법을 사용해 함수 선언을 더 간단하게 작성할 수 있다. 이 방법은 간단히 화살표 함수라고 하는데, 익명 함수에서만 사용이 가능하다.

매개변수가 없을 때 =>로 함수 선언하기

매개변수가 없을 때 익명함수는 => 기호를 이용하여 화살표 함수로 간략히 표현이 가능하다. 아래 코드를 확인하자.

<script>
    //익명 함수
    const print_fucn = function(){return 10+20};
    document.writeln(print_fucn());

    //즉시 함수
    const print_fucn_dir_1 = () => {return (10+25)};
    const print_fucn_dir_2 = () => (10+25) ;

    document.write(print_fucn_dir_1());
    document.write(print_fucn_dir_2());
</script>

위 코드의 즉시 함수를 보면 익명 함수의 표현보다 간략하게 표현된 것을 확인할 수 있다. 이때 중괄호 안의 함수 내용이 한 줄 뿐이라면 중괄호를 생략해서 작성이 가능하다. 즉, return 함수는 생략이 가능하다.

 

이때 주의할 점은 함수 표현식이 다른 것이지, 함수 실행문은 이루어 져야한다는 것이다. 꼭 유의하자.

매개변수가 1개 일 때	let print_fucn = inp => document.write(inp+" 님, 환영합니다.<br>") ; print_fucn(inp);
매개변수가 2개 이상 일 때	var a = 10,b= 20; add_num = (a,b) => (a+b); document.write("a + b = " + add_num(a,b) +" 입니다.");

<script>
    //매개 변수 1개
    inp = prompt("사용자의 이름을 입력하세요.");
    let print_fucn = inp => document.write(inp+" 님, 환영합니다.<br>") ;
    print_fucn(inp);

    // 매개 변수 2개 이상
    var a = 10,b= 20;
    add_num = (a,b) => (a+b);
    document.write("a + b = " + add_num(a,b) +" 입니다.");

</scri

일반 함수+익명 함수+즉시 실행 함수.html

0.00MB

화살표 함수.html

0.00MB