[javascript] 함수 선언문과 함수 표현식

 

 

함수 선언식

function sayYo() {
	alert("Yo!")
}
sayYo();

 

함수 표현식

let speak = function sayYo() {
	alert("Yo!!");
}
alert( speak );

함수 표현식이란 함수를 변수에 할당하여 표현한 방식이다.

함수는 값이기 때문에 함수를 변수에 할당할 수 있다. 위 예제처럼 변수 speak에 함수 sayYo를 할당했는데 함수는 

값이기 때문에 함수 코드도 출력할 수도 있다.

 

여기서 alert을 이용해서 speak를 호출해보면 speak에 할당했던 함수가 출력되는걸 확인할 수 있다.

 

 

 

 

 

콜백함수

function person(ask, adult, teenager) {
    let age = prompt(ask);
	if(age >= 20) adult(age);
    else teenager();
}

function showInfo(age) {
	alert(`I'm ${age}years old!`);
}

function showError(){
	alert("sorry");
}

person("how old are you?", showInfo, showError);

person의 인수 showInfo, showError를 콜백 또는 콜백함수라고 한다.

함수를 함수의 인자로 전달하고 전달한 그 인수를 필요할 때 '나중에 호출(callback)'하는 것이 콜백의 개념이다.

 

person함수를 호출할 때  showInfo와 showError함수를 콜백함수로 등록하고 인자로 전달해준다.

위 예제는 나이를 물어보고 숫자 20이상이면 showInfo를 호출하고 20미만이면 showError콜백함수를 호출하게된다.

 

 

 

 

 

 

함수 표현식과 선언문의 차이점

 

 

sum(2,4);

function sum(a, b) {
	return a+b;
}

위와같이 함수 선언문일 경우에 sum은 스크립트 실행 준비단계에서 생성되기 때문에 스크립트 내 어디서든 접근이 가능하다.

 

 

sum(4,5); // Error: sum is not defined.

let sum = function add(a,b) {
	return a+b;
}

 

하지만 함수 표현식 같은경우는 정의한 함수가 선언되기 전까지는 접근이 불가능하다.

함수 표현식은 실행이 흐름이 표현식에 도달했을 때 함수가 만들어지기 때문이다.

 

함수 선언문에서는 선언된 함수가 코드블럭 내에 위치하면 블록 내 어디서든 접근이 가능하다.

하지만 블록 밖에서는 접근이 불가능하다. 

 

 

결론적으로 정리하자면

자바스크립트는 실행하기 전 함수 선언된 함수들을 먼저 생성하고나서 실행하기 때문에 스크립트 내 어디서든 함수 접근이 가능한 반면에 함수 표현식은 자바스크립트가 실행되고나서 실행 흐름이 함수 표현식에 도달했을 때 함수 접근이 가능하다.