모던자스 튜토리얼 공부 후 정리한 내용입니다

함수 표현식

• 함수를 만들 수 있는 방식은 다음의 두가지이다.

1. 함수 선언 방식

function 함수명() {
  실행 내용
}

2. 함수 표현식

let 함수명 = function() {
  실행 내용
};

💡중요한 차이는, 함수 선언과 달리 함수 표현식의 경우 끝에 세미콜론;을 빼먹으면 안된다는 점이다

JS에서 함수는 값이다!

• JS의 특징은 함수를 '값'의 종류로 본다는 점이다.
• 따라서 함수를 변수에 할당하는 것도 가능하다.
• 또한 alert을 통해 함수 내용을 출력할 수도 있다.

예시 :

function sayHi() {
  alert( "Hello" );
}

alert( sayHi ); // 함수 코드가 보임

해당 예시에서 sayHi 옆에 괄호()가 없기 때문에
함수가 실행되지는 않고 함수 코드만 문자열처럼 출력되게 된다.

• 함수를 복사해서 다른 변수에 할당하는 것 역시 가능하다.

let sayHi = function() { // (1) 함수 생성
  alert( "Hello" );
};

let func = sayHi;    // (2) 함수 복사

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

---

콜백 함수

• 함수의 인수로 함수를 전달
• 전달된 해당 함수를 전달받은 함수 내에서 나중에 호출하는 것이 콜백 함수이다
• 나중에 호출하는 동작 : call back

콜백 함수를 활용하면 다음과 같은 형태가 가능하다.
예시

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },	// yes일 경우 실행되는 ask의 콜백 함수
  function() { alert("취소 버튼을 누르셨습니다."); }	//no일 경우 실행되는 ask의 콜백 함수
);

• 물론 콜백함수는 별도로 정의해도 되지만,
• 함수 표현식을 활용해서 이름 없이 바로 인수로 넣어줄 수도 있다
• 이런 이름 없는 함수를 익명 함수라고 한다.
  • 익명 함수는 외부에서는 접근할 수 없다.

함수 표현식 vs 함수 선언문

1. 문법의 차이

• 함수 선언문 : 독자적인 구문 형태
• 함수 표현식 : 구문 구성 내부에 생성.

2. 함수 생성 시점

자바스크립트 엔진이 함수를 생성하는 시점에 차이가 있다.

• 함수 선언문 : 스크립트 실행 전 초기화 단계에서 먼저 함수 선언 방식으로 정의된 함수를 생성한다.
  • 따라서 스크립트 어디서든 접근 가능!
• 함수 표현식 : 실행 중 함수에 도달했을 때 함수 생성. 따라서 함수 도달 이후에만 사용 가능.

3. 스코프

• 함수 선언문 : 엄격모드일 때, 코드 블록 내에 위치된 함수는 블록 내에서만 접근 가능
• 함수 표현식 : 코드 블록 내에 위치된 함수도 블록 밖에서 접근 가능한 방법이 있다.
  바로 아래와 같은 방식

let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

welcome(); // 제대로 동작합니다.

코드 블록 밖에서 변수를 선언하고
코드 블록 내에서 해당 변수에 함수 표현식을 정의하여 할당하면 된다.

💡 함수를 선언할 때 함수 선언문을 선택하는 것을 먼저 고려하고, 해당 방식이 부적절하거나 위의 예시와 같이 조건문 내에 사용해야 할 땐 함수 표현식을 사용하는 것이 좋다.

---

오늘의 TL;DR

• JS에서 함수는 특별한 '값'이기 때문에, 값이 쓰일 수 있는 방식 그대로 활용 가능
• 함수 선언식 : 독립된 구문 형태의 함수. 블록 어디서든 활용 가능
• 함수 표현식 : 함수에 다다랐을 때부터 사용 가능. but 코드 블록 스코프 제한에서 다소 자유롭다