함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다.
// 함수 선언문 방식
function 함수() {
document.write('함수_01');
document.write('함수_02');
};
// 함수 표현식
var result = (function() {
return 10 + 20;
}());
console.log(result); // 30
var result = (function(a, b) {
return a + b;
}(10, 20));
console.log(result); // 30
함수 선언문
sayHi("John"); // Hello, John
function sayHi(name) {
alert( `Hello, ${name}` );
}
함수 표현식
아래 소스코드는 Uncaught SyntaxError: Identifier 'sayHi' has already been declared 에러를 발생시킵니다.
sayHi("John"); // error!
let sayHi = function(name) { // (*) 마술은 일어나지 않습니다.
alert( `Hello, ${name}` );
};
익명 함수
var 함수 = function () {
document.write('함수_01');
document.write('함수_02');
};
아래 코드에서 sayHi 옆에 괄호가 없기 때문에 함수가 실행되지 않습니다.
괄호 없이 함수 이름만 업근하면 함수 자체 소스 코드가 문자형으로 바뀌어 출력됩니다.
function sayHi() {
alert( "Hello" );
}
alert( sayHi ); // 함수 코드가 보임
※ 함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에 이런 에러가 발생합니다.
let age = 16; // 16을 저장했다 가정합시다.
if (age < 18) {
welcome(); // \ (실행)
// |
function welcome() { // |
alert("안녕!"); // | 함수 선언문은 함수가 선언된 블록 내
} // | 어디에서든 유효합니다
// |
welcome(); // / (실행)
} else {
function welcome() {
alert("안녕하세요!");
}
}
// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.
welcome(); // Error: welcome is not defined
함수 선언하는 2가지 방법
익명함수
선언적 함수 선언
// 함수 선언 전에 호출하면 아무 일도 발생하지 않음
func();
var func = function(){
alert('익명 함수 func A...');
}
// 함수 선언 후 호출해야 함
func();
// 1. 익명함수 재정의
var func = function(){
alert('익명 함수 func B...');
}
func();
// 선언적 함수는 함수 선언 전에 호출해도 메모리에 미리 올려져 있기 때문에 실행됨
func();
// 2. 선언적 함수선언 재정의
function func(){
alert('선언적 함수 func A');
}
function func(){
alert('선언적 함수 func B');
}
var func = function func(){ // 익명함수가 나중에 만들어짐
alert('익명함수 func A');
}
function func(){ // 선언적 함수가 먼저 만들어짐
alert('선언적 함수 func B');
}
func();
익명 함수를 먼저 선언 후 선언적 함수를 정의했어도
메모리에는 선언적 함수가 먼저 올라가므로 익명 함수로 overriding 되어
함수를 호출하면 익명 함수가 출력된다.
익명 함수는 나중에 만들어지기 때문에 overriding 되기 전에 호출하면 이전에 정의된 함수 내용 수행
선언적 함수는 미리 메모리에 올라가기 때문에 overriding 되기 전에 호출해도 가장 마지막에 수정된 함수 내용 수행
// 익명 함수 overriding 예제
var calc = function (x,y){
return x * y;
}
console.log(calc(5,3)) // 15
var calc = function (x,y){
return x + y;
}
console.log(calc(5,3)) // 8
// 선언적 함수 overriding 예제
function calc(x,y){
return x * y;
}
console.log(calc(5,3)) // 8
function calc(x,y){
return x + y;
}
console.log(calc(5,3)) // 8
if 문 밖에 함수를 할당하여 호출하면 의도한 대로 동작합니다.
let age = prompt("나이를 알려주세요.", 18);
let welcome;
if (age < 18) {
welcome = function() {
alert("안녕!");
};
} else {
welcome = function() {
alert("안녕하세요!");
};
}
welcome(); // 제대로 동작합니다.
화살표 함수
ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 더 간단하게 작성할 수 있습니다.
// 1. 매개변수가 없을 때 => 함수로 선언하기
const hi = () => { return "안녕하세요?" };
// 중괄호 안에 함수 내용이 한 줄뿐이라면 중괄호 생략 가능
const hi = () => "안녕하세요?" ;
// 2. 매개변수가 1개일 때
let hi = function(user) {
document.write(user + "님, 안녕하세요?");
}
let hi = user => document.write(user + "님, 안녕하세요?");
// 3. 매개변수가 2개일 때
let sum = function(a, b) {
return a + b;
}
let sum = (a, b) => { return a + b }
let sum = (a, b) => a + b ;
댓글