함수 표현식
자바스크립트에서는 함수를 "특별한 동작을 하는 구조"가 아닌 "특별한 종류의 값"으로 취급
변수 : 데이터를 나타내는 값
함수 : 동작을 나타내는 값
[ 함수 선언문 ]
function sayHi() {
alert( "Hello" );
}[ 함수 표현식 ]
let sayHi = function() {
alert( "Hello" );
};▶ 두 방식 모두 sayHi라는 변수에 저장되는 것.
함수는 값이고, 따라서 변수에 할당이 가능하다!
👉 값이기 때문에 alert를 이용해 함수 코드 출력도 가능
function sayHi() {
alert( "Hello" );
}
alert( sayHi ); // 함수 코드가 보임❕ alert( sayHi ) 에서 sayHi 옆에 괄호가 없기 때문에 함수 실행은 X
👉 자바스크립트에서는 괄호가 있어야만 함수가 호출된다.
함수를 복사해 다른 변수에 할당할 수 있다.
function sayHi() { // (1) 함수 생성
alert( "Hello" );
}
let func = sayHi; // (2) 함수 복사
func(); // Hello // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello // 본래 함수도 정상적으로 실행됩니다.(1) 변수 sayHi에 함수 할당
(2) sayHi를 새로운 변수 func에 복사
❗ 이때 sayHi 다음에 괄호가 있었다면 func = sayHi() 가 되어 sayHi 함수 그 자체가 아니라, 함수 호출 결과(함수의 반환 값) 가 func에 저장되었을 것.
❓ 함수 표현식 끝에는 왜 세미콜론이 있을까?
let sayHi = function() {
alert( "Hello" );
};
function sayHi() {
// ...
}▶ 중괄호로 만든 코드 블록 끝엔 ;이 없어도 되고, 함수 표현식에서 변수가 할당되는 코드 구문 끝에는 ;이 붙여져야 하기 때문
콜백 함수
함수를 함수의 인수로 전달하고, 필요시 전달 받은 함수를 나중에 호출하는 것
함수 선언식
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "동의하셨습니다." );
}
function showCancel() {
alert( "취소 버튼을 누르셨습니다." );
}
// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);👉 "yes"라고 대답한 경우 showOk, "no"라고 대답한 경우 showCancel이 콜백
함수 표현식
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
ask(
"동의하십니까?",
function() { alert("동의하셨습니다."); },
function() { alert("취소 버튼을 누르셨습니다."); }
);▶ 익명 함수 :ask(...) 안에 선언된 함수처럼 이름 없이 선언 되었다.
👉 ask 바깥에서는 접근할 수 없다.
함수 표현식 vs 함수 선언문
문법
- 함수 선언문 : 주요 코드 흐름 중간에 독자적 구문 형태로 존재
function 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 = 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(); // 동작!🔽간결하게🔽
let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
function() { alert("안녕!"); } :
function() { alert("안녕하세요!"); };
welcome(); // 동작!❓ 함수 선언문과 함수 표현식 중 무엇을 선택해야 할까?
▶ 함수 선언문을 먼저 고려하자! 호이스팅에 의해 코드 구성이 좀 더 자유롭고 가독성도 더 좋기 때문
▶ 함수 선언문이 적합하지 않을 때 함수 표현식을 사용하자.
화살표 함수 기본
let func = (arg1, arg2, ...argN) => expression- 인수가 하나밖에 없다면 인수를 감싸는 괄호 생략 가능
let double = n => n * 2;- 인수가 없다면 괄호 비워놓기
let sayHi = () => alert("안녕하세요!");- 함수 동적으로 만들기
let age = prompt("나이를 알려주세요.", 18);
let welcome = (age < 18) ?
() => alert('안녕') :
() => alert("안녕하세요!");
welcome();본문이 여러 줄인 화살표 함수
- 표현식을 중괄호 안에 넣고
return으로 반환하기
let sum = (a, b) => {
let result = a + b;
return result;
};
alert( sum(1, 2) ); // 3