Javascript) function(1) 함수 선언식, 함수 표현식, 즉시 실행 함수

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

 

HTML 코드

<button onclick="test1();">함수 선언식</button>
<button onclick="test2();">함수 표현식</button>

 

함수 선언식

- 호이스팅 처리 되어 선언 전에 호출 가능

<script>
test1();    // 선언 전 호출 가능!

function test1() {
    console.log('함수 선언식!');
};
</script>

함수를 선언하기 전에 호출이 가능한 것을 확인할 수 있습니다.

 

함수 표현식

- 호이스팅 처리 되지 않아 선언 전에 호출 불가능

- 익명 함수를 대입

// test2();    // Uncaught ReferenceError: Cannot access 'test2' before initialization

const test2 = function(){
    console.log('함수 표현식!');
};

"Uncaught ReferenceError: Cannot access 'test2' before initialization" 에러메세지가 확인되며,

함수를 선언하기 전에 호출이 불가합니다.

 

※ 호이스팅이란?

- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언하는 것

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html(관련 포스팅)

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

 

즉시 실행 함수(Immediately Invoked Function Expression)

- iife

- 선언과 호출을 동시에 처리

- 지역변수로 전환해서 안전하게 처리해야 할 때 주로 사용

(function() {
    console.log('바로 실행!');
})();

선언과 호출을 동시에 처리하는 것을 확인할 수 있습니다.

 

지역변수로 전환하여 안전하게 처리해야 하는 상황을 살펴보겠습니다.

// 전역변수
let cnt = 100;
console.log(cnt);

전역변수인 cnt가 있다고 가정해보았을 때, cnt는 전역변수이기 때문에 유효범위 내에 어디서든 접근할 수 있습니다.

콘솔 창에서 cnt의 값을 10으로 변경하였고, 전역변수 cnt의 값이 실제로 변경된 것입니다.

어디서든 접근할 수 있는 전역변수가 안전하다고 보장할 수는 없을 것 같습니다.

 

이럴 때 iife를 이용하여 지역변수로 안전하게 관리할 수 있다는 것입니다.

(function() {
    console.log('바로 실행!');

    let cnt = 100;
    console.log(cnt);
})();

지역변수로써 cnt가 선언되었기 때문에 접근이 불가한 것을 확인할 수 있습니다.

 

(function(t) {console.log(t+ ' 정말 바로 실행!');})('완전');

또한, 함수를 호출하는 것이기 때문에 매개인자로 값을 넘겨주어 매개변수로 받아 사용할 수도 있습니다.