JS) 함수(Function) 이해하기 2

이번에 정리할 내용은 javascript.info를 읽어내려가며 정리했다.

javascript.info 함수 표현식
https://ko.javascript.info/function-expressions

함수는 하나의 *동작(action)*을 나타낸다.

함수선언문(Function Declaration)

---

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

함수표현식(Function Expression)

---

함수가 변수에 할당 됨

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

자바스크립트에서 함수를 호출하려면 sayHi 옆에 괄호()가 붙어야 한다.

sayHi();

함수를 생성하고, 함수를 새로운 변수에 복사도 가능하다. 위에서는 함수를 호출하려면 sayHi()로만 호출할 수 있지만, 아래 코드에서는 sayHi(), func() 둘 다 가능하다.

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

let func = sayHi;    // (2) 함수 복사 - sayHi 옆에 괄호() 없음 주의

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

괄호가 있었다면 func = sayHi() 가 되어 sayHi 함수 그 자체가 아니라, 함수 호출 결과(함수의 반환 값) 가 func에 저장되었을 것이다.

콜백 함수

---

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

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

// ask(안의 함수는 이름이 없이 선언된 익명 함수다.)

함수 선언문과 함수 표현식의 차이

---

1) 문법
함수선언문: 주요 코드 흐름 중간에 독자적인 구문 형태로 존재
함수표현식: 표현식이나 구문 구성(syntax construct) 내부에 생성

// 함수 선언문
function sum(a, b) {
  return a + b;
}

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

2) 함수 생성 시기
함수선언문: 함수 선언문이 정의되기 전에도 호출
함수표현식: 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용

//함수선언문
sayHi("John"); // Hello, John

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

//함수표현식
sayHi("John"); // error!

let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};

3) 스코프
함수선언문: 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근하지 못한다.
함수표현식: 블록 밖에서 함수에 접근할 수 있다.

*함수 선언문과 함수 표현식 중 무엇을 선택해야 하는지에 대한 javascript.info의 내용*
함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려한다.
함수 선언물을 사용하면 더 눈길을 사로잡기 때문에 가독성이 좋아지고, 코드 구성을 좀 더 자유롭게 할 수 있다.
하지만 함수 선언문이 적합하지 않거나 조건에 따라 함수를 선언해야 한다면 함수 표현식을 사용해야 한다.