함수 표현식
함수 선언문 방식
function sayHo() {
alert("HO!");
}함수 표현식(Function Expression)
let sayHo = function(){
alert("HO!");
}; // << 세미클론 주의!위 예시를 간단한 말로 설명하면 "함수를 만들고 그 함수를 변수sayHo에 할당하기"
함수는 값이기 때문에 'alert'를 이용하여 함수 코드를 출력할 수도 있습니다.
function sayHo(){
alert("Ho");
}
alert( sayHi); // 'Ho'가 나오는것이 아니라 함수 코드가 보임 sayHo 옆에 괄호가 없기에 함수는 실행되지 않고 코드가 보입니다. 어떤 언어에서는 함수 이름만 언급해도 실행되지만 자바스크립트는 아닙니다.
자바스크립트에서 함수는 값입니다. 따라서 함수를 값처럼 취급 할수 있습니다. 위의 예시에서 함수는 문자형으로 바뀌어 출력되었습니다.
함수를 요약 설명 하자면 1. 호출할 수 있다. 2. 함수의 본질은 값이다. 입니다.
그래서 값에 할 수 있는 일을 함수도 할 수 있습니다.
변수를 복사해 다른 변수에 할당하는 것처럼 함수도 가능합니다.
function sayHo(){ // (1) 함수 생성
alert("Ho");
}
let func = sayHo; // << 괄호가 없다는거에 유의!!! (2) 함수 복사
func(); //Ho // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHo();//HosayHo가 만약 ()가 있었다면 func = sayHo() 함수 결과가 func에 저장 되었을 겁니다.
콜백 함수
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "동의하셨습니다." );
}
function showCancel() {
alert( "취소 버튼을 누르셨습니다." );
}
// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불립니다.
함수 표현식 vs 함수 선언문
함수 선언문 :
fucntion sum(a,b){
return a +b;
}함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.
전연 함수 선언문은 스크립트가 어디에 있든 상관없이 호출가능합니다.
자바스크립트는 스크립트를 실행하기전 준비 단계에서 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성합니다. 스크리브는 함수 선언문이 모두 처리된 후 실행 됩니다.
그래서 스크립트 어디서든 함수 선언문을 접근할 수 있는 겁니다.
함수 표현식 :
let sum = function(a,b){
return a + b;
};함수 표현식은 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.
sayHi("John"); // Hello, John
function sayHi(name) {
alert( `Hello, ${name}` );
}함수표현식
sayHi("John"); // error!
let sayHi = function(name) {
alert( `Hello, ${name}` );
};
엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.
let age = prompt("나이를 알려주세요.", 18);
// 조건에 따라 함수를 선언함
if (age < 18) {
function welcome() {
alert("안녕!");
}
} else {
function welcome() {
alert("안녕하세요!");
}
}
// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined함수 선언문은 함수가 선언된 코드 블록 안에서만 유효합니다.
let age = 16; // 16을 저장했다 가정합시다.
if (age < 18) {
welcome(); // \ (실행)
// |
function welcome() { // |
alert("안녕!"); // | 함수 선언문은 함수가 선언된 블록 내
} // | 어디에서든 유효합니다
// |
welcome(); // / (실행)
} else {
function welcome() {
alert("안녕하세요!");
}
}
// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.
welcome(); // Error: welcome is not defined
이런 경우 외부에 변수를 선언한 뒤 함수 표현식으로 함수를 할당하면 됩니다.
let age = prompt("나이를 알려주세요.", 18);
let welcome;
if (age < 18) {
welcome = function() {
alert("안녕!");
};
} else {
welcome = function() {
alert("안녕하세요!");
};
}
welcome(); // 제대로 동작합니다.