#18 자바스크립트(JavaScript) - 즉시 실행 함수

안녕하세요 여러분! 에이블디 입니다!

 

이번 시간에는 즉시 실행 함수에 대해 알아볼게요!

 

즉시 실행 함수는 함수를 정의함과 동시에 실행하는 함수인데요, 이전 시간에 함수를 사용하는 것을 보면 함수를 선언하고 선언한 함수를 호출하는 방식으로 함수를 사용했던 것 기억나시나요?

 

즉시 실행 함수는 함수를 선언하자마자 바로 호출하는 특징을 가지고 있어 기존의 함수를 실행하는 과정들을 거치지 않는 특징이 있습니다.

 

즉시 실행 함수의 사용법은 코드를 보며 알아보도록 할게요!

(
    function() {
        console.log("즉시 실행 함수 사용법 1.");
    }
)();

(
    function() {
        console.log("즉시 실행 함수 사용법 2.");
    }
());

즉시 실행 함수의 사용법은 큰 틀로 보면 위의 두 가지 방식으로 나누어 볼 수 있습니다.

즉시 실행 함수는 함수 선언 소스 전치를 괄호로 묶는다고 생각하면 이해하기 쉬운데요, 첫 번째 방법은 소스를 묶는 괄호 뒤에 인수가 들어갈 괄호를 작성한 방법이고 두 번째 방법은 소스를 묶는 괄호 앞에 인수가 들어갈 괄호를 작성한 방법입니다.

 

즉시 실행 함수는 하나의 식이기 때문에 소스 끝에 세미콜론(;)을 붙여주셔야 합니다.

 

위의 작성법은 익명 즉시 실행 함수로 사용했는데요, 기존의 함수 사용법처럼 이름을 넣어서 사용할 수도 있습니다.

(
    function result() {
        console.log("함수 이름을 작성한 즉시 실행 함수.");
    }
());

이렇게 result라는 함수 이름을 작성해 사용할 수 있는 거죠.

 

즉시 실행 함수도 변수에 할당할 수 있습니다.

예제를 보면서 이해해 보도록 할게요!

지난 시간에 익명 함수를 배우면서 예제로 작성한 두 수를 더하는 함수를 즉시 실행 함수로 작성해 보겠습니다!

var result = (
    function() {
        return 1 + 2;
    }
());

console.log(result);

result라는 변수에 바로 즉시 실행 함수를 선언하고 실행하여 결괏값을 할당하는 코드를 작성해 보았는데요.

3을 출력하는지 확인해 보도록 하겠습니다!

 

 

함수를 선언하고 선언한 함수를 호출하는 과정 없이 바로 함수가 실행되어 1 + 2 = 3이라는 결괏값을 출력하는 걸 확인할 수 있습니다.

 

조금 더 응용해서 매개 변수와 인수 값을 넣어 사용해 볼까요?

var result = (
    function(a, b) {
        return a + b;
    }
(3, 4));

console.log(result);

function 다음의 소괄호에 매개변수 a와 b를 넣고 함수 끝에 함수를 묶는 괄호 바로 앞 소괄호에 인수 3과 4를 넣어주신 것 보이시나요?

3과 4가 더해져서 7을 출력하는지 확인해 보도록 하겠습니다!

 

 

매개 변수 a에 3, b에 4가 넘겨져 3 + 4 = 7이라는 결괏값을 출력하는 걸 확인할 수 있습니다.

 

즉시 실행 함수는 초기화 코드에 많이 사용되는데요, 초기화 코드에 사용하는 가장 큰 이유는 변수를 전역으로 선언하는 것을 피하기 위해서입니다.

 

이번 시간에는 즉시 실행 함수에 대해 알아보았습니다.

 

다음 시간에 자바스크립트에 대해 더 알아보는 시간을 갖도록 할게요!