시베리안 허숙희의 자바스크립트 비기닝 15 (즉각실행함수)

자바스크립트

by e7e 2023. 6. 13. 17:15

보통은 누네 자알 안 띠지만, 혹, 갑자기 뜬금업시 라이브러리 파일을 열어 봤다면

한번쯤은 보았을 즉각 실행함수(IIFE, Immediately Invoked Function Expression)

에 대해 괘니 그냥 말고 한번쯤은 생각해 보고 가장

아래 처럼 코드를 짜고, 실행해 보면 당근 실행이 안된당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    function (){
        alert("나 실행안돼!");
    }
    // 함수이름이 없어 부를 수 없어,에러가 났으면 기대
</script>

당근 함수이름이 필요하다는 아래와 같은 에러가 난당!

위의 코드가 에러가 안 난다면 부를 수 없는 함수를 쓸데없이 맹근다는 이야기당!

Uncaught SyntaxError: Function statements require a function name

요기서 잠까안 이전 글

2023.06.13 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 14

에서 표현식으로 함수 선언(익명함수)을 하여 변수에 할당하는 것을 보았당

괄호()로 묶으면 괄호안의 내용은 표현식으로 인식되어, 자바스크립트 엔진이 해석 실행한당.

괘니 아래처럼 괄호로 단단히 묶어서, 실행해 보장 (앗 에러가 사라졌당!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    (function (){
        alert("나 실행안돼!");
    })
    // 함수이름이 없어 부를 수 없어,에러가 났으면 기대
</script>

에러는 없어졌지만 아무일도 일어나지 않는당(재미없당!)

함수를 호출할땐 함수이름 뒤에 ()를 붙인당. 괄호 안에서 익명함수가 만들어졌당

그렇다면 닫힌 괄호 뒤에 ()를 붙이면 익명함수()형태로 호출 되지 않을까? 해본당

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    (function (){
        alert("나 실행안돼!");
    })()
    // 함수이름이 없어 부를 수 없어,에러가 났으면 기대
</script>

성공이당!,오호 에러없이 잘 실행된당!, 요거이 즉각실행함수의 한 형태당!

function(){} 부분을 표현식으로 인식시키기만 하면 되니 아래와 같은 다양한 형태가 나온당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    (function (){
        alert("괄호를 사용한 즉각실행함쑤");
    })();

    +function (){
        alert("+를 사용한 즉각실행함쑤");
    }()

    -function (){
        alert("-를 사용한 즉각실행함쑤");
    }()

    /function (){
        alert("/를 사용한 즉각실행함쑤");
    }()

    %function (){
        alert("%를 사용한 즉각실행함쑤");
    }()

    !function (){
        alert("!를 사용한 즉각실행함쑤");
    }()

    !!function (){
        alert("!!을 사용한 즉각실행함쑤");
    }()

</script>

환장한당! 더 많은 표현이 나올 수 있단당.(그렇당 표현식으로만 인식시킨다면 뭐든 상관없다)

앗 그런데 자세히 보니, *(곱하기)가 없당!, 왜? *은 Generator(아직 모름? 일단 그런 게 있당) 맹글 때

function 키워드와 같이 쓰이므로, 요따구 상황에서 쓰면 산술연산으로 인식되지 않아성,

안타깝지만 function(){}을 표현식으로 인식시키는 데 사용할 수 없당!

표현가지수가 많아서 넘 자유롭게 쓰면 혼란스러울 수 있다.(혼란은 두통이당!~두통엔 타이레놀?)

그래서 보통 괄호() 나 !를 주로 사용한당!( 다른 건 유혹되더라도 자제하장)

어찌보면 큰 의미(사용패턴에 따라)가 없을 수도 있는 데, 매개변수를 넘기는 모습도 보장

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    (function (myStar){
        alert(myStar + " 님 오겡끼데스깡?");
    })("로제");
</script>

그렇다면 즉각실행함수는 언제 쓸까앙?,실행되고 나서 메모리엔 남아있낭?

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
let justOnceSum =  (function (){
        let aa = 900;
        let bb = 100;
        let cc = 4;
        return aa + bb + cc;
    })();
alert(justOnceSum);

//  만약 아래와 같은 계산이 따악 한번만 필요하다면,
//  아래 코드는 메모리 낭비당
//  따악 한번만 실행하려고 함수를 선언하는 것 그것도 낭비당
/*
    let aa = 900;
    let bb = 100;
    let cc = 4;
    let sum = aa + bb + cc;
    alert(sum);
*/

</script>

코드에 주석을 다라노았는뎅, 즉각실행함수는 기본적으로 즉시 실행되고 ,

내부 변수가 밖에서 참조되는 게 없다면 메모리에 남지 않는다. 곧 메모리가 절약된당!

또 다른 사용 예로는 메모리절약보다는 핵심코드를 function 담벼락에 가두어 밖에서

접근하지 못하게 하려는 목적과 페이지 로딩과 함께 즉각 실행이 필요할 때라고 하겠당

괘니 화살표함수(Arrow function)를 사용한다면 아래와 같은 모습일 거시다.

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
let justOnceSum =  (()=>{
        let aa = 900;
        let bb = 100;
        let cc = 4;
        return aa + bb + cc;
    })();
alert("체킁: " + justOnceSum);
</script>

글만 기럭지, 개념적으로 받아들였다면 내용은 별로 업당!

낸중에 잊혀졌을 때 그때 jQuery 간략버젼을 맹글면서 한번 더 활용해 보장!

부부 바지락 칼국수 할머니께서는 항상 계산하고 나가시는 손님에게

행복하고 건강한 하루되세요 라고 밝고 노픈 나름 소프라노로 인사하신당!

그것도 여러번, 인사 다린이시당!

"아마도 전에 인사팀장을 하셨나 봐요!" 말과 동시에 옆에서 훅 "인사돌도 드시고요!"

바보들의 대화당!, 그치만 크게 우스니 행복하당!~~

https://www.youtube.com/watch?v=m0iJjtX5gOo

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 17 (function을 class로...) (4)	2023.06.14
시베리안 허숙희의 자바스크립트 비기닝 16 (Built-In 객체) (4)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 14 (재귀호출 & 화살표함수) (6)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 13 ( var let const) (2)	2023.06.12
시베리안 허숙희의 자바스크립트 비기닝 12 (콜백함수 callback) (2)	2023.06.09