함수 표현식

특별한 종류의 값(JS) vs 특별한 동작을 하는 구조

 

1.함수 선언문

2.함수 표현식

 

function sayHi() {

alert( ‘Hello’ );

}

 

⬇️

 

let sayHi = function ( ) {

alert( ‘Hello’ )

};

 

변화된 점 1)변수의 선언과 할당 형태로 바뀜 2)함수명이 변수명으로 바뀜

 

1)에 따르면 함수는 구조가 아닌 값으로 변수에게 할당될 수 있다

➡️ 변수 sayHi에 function 할당

 

자바스크립트에서 함수는 함수명 옆에 반드시 괄호가 있어야만 함수를 호출한다

(그렇지 않으면 실행하지 않는다)

 

함수를 값으로 따지기 때문에 변수를 다른 변수에 할당하는 것처럼 함수도 다른 변수에 할당이 가능하다

 

function sayHi() {   // (1) 함수 생성

  alert( "Hello" );

}

 

let func = sayHi;    // (2) 함수 복사, 여기서 ()를 넣었다면 함수 자체가 아닌 결과값 즉 함수 호출 반환값을 func에 넣었을 것이다

 

func(); // Hello     // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!

sayHi(); // Hello    //     본래 함수도 정상적으로 실행됩니다.

 

*세미콜론(;)이 붙는 경우와 붙지 않는 경우

결론부터 말하면 구문이 끝났을 때 ; 이 붙는다

코드블록(정확하게 무슨의미?)일 때는 ; 이 없어도 된다

함수 표현식에서는 붙는 이유가 함수가 값으로 취급되어 구문에 들어가기 때문이다

 

콜백 함수

쉽게 말해서 함수안에 또다른 함수라고 생각하면 된다

함수를 함수의 인자로 전달하고 필요하다면 인자로 전달한 그 함수를 나중에 호출이라는 개념

 

function ask(question, yes, no) {

  if (confirm(question)) yes()

  else no();

}

 

function showOk() {

  alert( "동의하셨습니다." );

}

 

function showCancel() {

  alert( "취소 버튼을 누르셨습니다." );

}

 

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨

ask("동의하십니까?", showOk, showCancel);

 

더 간결하게 만들려면 ⬇️

 

function ask(question, yes, no) {

  if (confirm(question)) yes()

  else no();

}

 

ask(

  "동의하십니까?",

  function() { alert("동의하셨습니다."); },

  function() { alert("취소 버튼을 누르셨습니다."); }

);

 

*number, string => data

*function => action //변수 간 값으로 전달, 필요할 때 해당 값을 실행

 

함수 표현식 vs 함수 선언문

둘의 차이점은?

 

1)문법

함수 표현식 vs 함수 선언문

표현식 또는 구문 구성 안에 생성 독자적인 구문 형태로 존재

 

// 함수 표현식 // 함수 선언문

let sum = function(a, b) { function sum(a, b) {

  return a + b; return a + b;

}; }

 

2)자바스크립트의 엔진

함수 표현식 vs 함수 선언문

실행 흐름이 함수에 도달했을 때 정의되기 전에도 호출 가능

부터 해당 함수 사용

sayHi("John"); // Hello, John

function sayHi(name) {

  alert( `Hello, ${name}` );

}

3)scope

함수 표현식 vs 함수 선언문

변수에 함수를 할당하여 함수가 선언된 코드 블록

(함수 표현식)밖에서도 호출 가능 (=함수가 있는 내부)  

안에서만 유효하다

 

함수 선언문 예시

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(); // 제대로 동작합니다.

 

*사용은 함수 선언문을 먼저 사용하는 걸 고려하되 - 가독성이 좋고 코드를 유연하게 구성할 수 있게 해주기 때문에 적절하지 않다면 함수 표현식을 사용하는 것을 권장한다

 

• “함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있습니다.” = 함수의 호이스팅