함수 function 정의와 호출순서 (익명 함수 / 선언적 함수)

함수

함수는 코드의 집합을 나타내는 자료형으로 크게 익명함수와 선언적 함수로 나뉜다.

코드의 집합이라는 의미는 {중괄호} 내부에  코드를 선언한다는 뜻이다.

함수가 호출되면 {중괄호} 내부에 선언된 코드 내용을 실행시킨다. 

 

익명 함수

var 함수 = function() {
	
};

선언적 함수

function 함수 () {

};

 

익명 함수는 변수를 선언하고 선언된 변수에 저장하여 사용된다.

선언적 함수는 변수에 저장하지 않고 이름을 부여하여 사용된다.

 

함수호출

자바스크립트에서 함수는 하나의 자료형이지만 다른 자료형과 다르게 (괄호)를 열고 닫음으로써 코드를 실행한다.

이렇게 함수를 실행하는 것을 함수를 호출한다 라고 표현한다.

함수();

익명 함수를 호출할 때에는 함수가 저장된 변수의 변수명(); 과 같이 호출한다.

선언적 함수를 호출할 때에는 function과 () {} 사이에 선언된 함수이름();  과 같이 호출한다.

 

함수 재정의

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

위와 같이 동일한 이름의 함수를 복수개 선언하고 함수를 실행하면 마지막에 선언된 함수가 호출된다.

이것을 함수 재정의 라고 한다.

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

변수는 같은 이름으로 다시 선언하면 기존의 변수를 덮어 씌우는데 이것을 변수 초기화라고 한다.

따라서 익명함수 재정의도 선언적함수와 같이 재정의된다.

 

함수 선언과 호출 순서에 따른 실행결과

익명함수

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

익명 함수는 변수를 선언하여 변수에 저장, 즉 변수에 의존하게된다.

변수를 선언하기도 전에 변수를 사용하여 함수를 호출하므로 선언되지 않은 변수를 찾지 못하기 때문에 오류가 발생하여 함수 실행에 실패한다.

선언적 함수

함수();//1
function 함수 () {alert('함수A')}//2
function 함수 () {alert('함수B')}//3

선언적 함수는 정상적으로 코드가 실행된다.

웹 브라우저는 script태그 내부의 내용을 한 줄씩 읽기 전에 선언적 함수부터 읽는다.

따라서 주석 2 → 3 → 1 순서로 코드가 실행된다.

 

익명함수, 선언적함수 호출순서

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

함수();

위와같이 익명함수와 선언적함수가 동일한 함수이름으로 선언되어 호출되는 경우 익명함수가 호출된다.

앞서 말했듯 브라우저는 선언적 함수부터 읽기 때문에 선언적 함수를 읽어들인 후 동일한 함수이름의 익명함수로 재 정의되어 실행되기 때문이다.