자바스크립트 선언적 함수

자바스크립트에서 함수 만드는 법은

아래와 같이 만들었었다.

익명 함수 만드는 법

<script>

var 함수 = function () {};

</script>

하지만, 일반적으로 다음 방식으로 함수를 만든다.

<script>

function 함수() {

}

</script>

위에 코드와 같은 방식으로 생성한 함수를 '선언적 함수' 라고 표현한다.

다음 코드를 살펴보자.

<script>

function 함수() { alert('함수 A'); }

function 함수() { alert('함수 B'); }

함수();

</script>

함수를 호출했을 때, 어떤 함수가 실행될까?

결과는 뒤에 위치하는 함수가 실행된다.

다음 코드도 살펴보자.

<script>

var 함수 = function () { alert('함수 A'); }

var 함수 = function () { alert('함수 B'); }

함수();

</script>

결과는 뒤에 위치한 함수가 실행된다.

변수는 같은 이름으로 다시 선언하면 기존의 변수를 덮어씌우므로 뒤쪽에 있는 변수를 사용하듯이,

위에 함수도 뒤에 위치한 함수가 이전에 선언한 함수를 덮어씌운다.

그렇다면 익명 함수와 선언적 함수의 차이점은 없는걸까?

<script>

함수();

var 함수 = function () { alert('함수 A'); }

var 함수 = function () { alert('함수 B'); }

</script>

위에 익명 함수의 경우, 코드를 실행하면 오류가 발생해 실행되지 않는다.

Uncaught TypeError: 함수 is not a function

변수를 선언하기 전에 변수를 사용했기 때문이다.

<script>

함수();

function 함수() { alert('함수 A'); }

function 함수() { alert('함수 B'); }

</script>

위에 선언적 함수를 사용하면 정상적으로 코드가 실행된다.

웹브라우저는 script 태그 내부의 내용을 한 줄씩 읽기 전에

선언적 함수부터 읽는다.

마지막으로 다음 코드도 살펴보자.

<script>

//함수 생성

var 함수 = function () { alert('함수 A'); }

function 함수() { alert('함수 B'); }

//함수 호출

함수();

</script>

실행 결과는, '함수 A'를 출력한다.

선언적 함수가 먼저 생성되고 익명 함수가 나중에 생성되기 때문이다.

개발할 때 실수할 수 있는 부분이라고 하니, 기억해두면 좋을 것 같다.

참고 서적 : 모던 웹을 위한 JavaScript + jQuery 입문(개정판)

윤인성 지음. 한빛미디어