javaScript. 함수선언식 vs. 함수표현식

<결론>

• 함수 선언 방식 = 함수가 독립된 구문 형태로 존재.
• 함수 표현식 방식 = 함수가 표현식의 일부로 존재. 

 

 

---

 

함수선언식 (function Declaration)

- 지정된 매개변수(parameter)를 갖는 함수를 정의

 

 

 

SYNTAX

function name([param[, param,[..., param]]]) { [statements] }

 

 

 

---

 

함수표현식 (function Expression)

- 어떤 표현식(expression) 내에서 함수를 정의

- 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당

- 함수 = 값(value)이 되므로 함수를 값처럼 alert나 console.log해서 코드를 출력할 수 있음.

 

 

 

SYNTAX

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) { statements };

>> name = 생략 가능

 

 

 

❗❗❗ 왜 함수표현식에는 세미콜론(;)이 붙어야할까?

 

- 중괄호로 만든 코드블록 (if, for, function f) 끝에는 세미콜론(;)이 없어도 된다.

- 함수표현식은 '값'의 역할을 하고, 코드블록이 아니고 값처럼 취급하여 변수에 할당된다.

따라서 함수표현식 끝에 세미콜론을 붙인 것은 '구문의 끝'이기 때문에 붙인 것임.

 

 

 

 

다음 예제는 이름 없는 함수를 정의하고 그 함수를 x에 할당. 함수는 인수의 제곱을 반환함.

var x = function(y) {
   return y * y;
};

 

callback으로 더 자주 사용됨!

button.addEventListener('click', function(event) {
    console.log('button is clicked!')
})

위에서 function은 이름 없이 선언되었으므로

익명함수( annonymous function)이라고 한다.

익명함수는 변수에 할당된 것이 아니므로 addEventListener함수 바깥에선 접근할 수 없다.

 

 

 

+) 함수표현식은 함수가 값이 된다!

예제.

let sayHello = function() {
    console.log("Hello");
};
console.log(sayHello);


/* RESULT 

ƒ () {
    console.log("Hello");
}

*/

위와 같이 함수를 값으로 인식하므로 함수코드를 콘솔에 출력할 수 있음.

 

 

** 함수표현식에서 name값을 주면

let sayHello = function hello() {
    console.log("Hello");
};
console.log(sayHello);



/* RESULT 

ƒ hello() {
    console.log("Hello");
}

*/

hello()와 같이 된다!

- 참고로 파라미터도 마찬가지임.

 

 

추가적으로, 함수를 복사해서 변수에 저장할 수도 있다.

 

 

function sayHello() {   // 함수 생성 (함수선언식)
  console.log( "Hello" );
}

let func = sayHi;    // 함수 복사 (func라는 변수에 저장)

func(); // Hello     
sayHi(); // Hello

---

 

 

정리

함수선언식(function문)	지정된 파라미터를 갖는 함수를 정의함. 주요 코드 흐름 중간에 독자적인 구문 형태로 존재. function functionName() {      console.log("Can Hoisting"); }
	호이스팅 가능. 선언 전에도 호출 가능. - 실행 전 초기화 단계에서 함수선언 방식으로 정의한 함수가 생성됨. (실행 컨텍스트) - ❕❕ 함수가 선언된 코드블록 안에서만 유효함
함수표현식(function expression)	표현식이나 구문구성 내부에 생성됨. (주로 할당 표현식 '=' 우측에) 🟨 클로저로 사용하거나 콜백으로 사용할 수 있다. var functionName = function() {        console.name("Can NOT Hoisting"); }
	호이스팅 불가. 에러발생.  실행 흐름이 해당 함수에 도달했을 때 함수가 생성됨. - ❕❕ 함수가 선언된 코드블록 밖에서도 호출 가능.

 

 

let userAge = 17;

if(userAge < 20) {
	checkAge();                   // 호이스팅 - 불러올 수 있음
    
    function checkAge() {
    	alert("가입할 수 없습니다.");
    }
    
} 

//  여기는 함수를 선언한 중괄호 블럭 밖이므로 checkAge함수를 호출할 수 없음.

checkAge();   // Error : checkAge is not defined

위와 같이 함수선언식을 이용하면 코드블록 밖에서 호출할 수 없다.

이를 해결하기 위해서는 함수표현식을 이용하면 된다.

 

let userAge = 17;
let checkAge;

if(userAge < 20) {
    
    checkAge = function() {
    	alert("가입할 수 없습니다.");
    };
}

checkAge();   // 정상적으로 동작함.

 

 

+) 물음표 연산자를 사용하면 코드가 단순해짐.

let userAge = prompt("Please Write your Age.", 17);

let checkAge = (userAge < 20) ?
	function() {alert("가입할 수 없습니다.);}
    
    
checkAge();

 

 

 

 

 

---

 

 

💡 함수선언문 vs 함수표현식

 

함수선언문을 이용해 함수를 선언하는 것이 좋음.

함수가 선언되기 전에 호출할 수 있다는 장점. + 가독성도 좋음.

 

>> 함수표현식 : 콜백 or 클로저에 주로 사용.

+ 조건에 따라 함수를 선언해야한다면 함수표현식을 사용.

 

---

 

 

REFERENCE

 

함수 표현식 - JavaScript | MDN

 

함수 선언 - JavaScript | MDN