함수 정의 및 할당 방식

1. 함수 선언 (function declaration)

함수 선언은 function 키워드를 사용하여 함수를 정의하는 방식이다.

function greeting() {
  console.log("Hello!");
}

greeting(); // Hello!

2. 함수 표현식 (function expression)

함수 표현식은 함수를 변수에 할당하는 방식이다. 함수 표현식은 익명 함수 또는 기명 함수로 정의될 수 있다.

// 익명 함수 표현식
const sayHello = function() {
    console.log('Hello!');
};

// 기명 함수 표현식
const sayHello = function greet() {
    console.log('Hello!');
};

3. 화살표 함수 (arrow function)

화살표 함수는 ES6에서 도입되어 function 키워드를 사용하는 일반 함수보다 간결하게 함수를 정의하는 방식이다.

const greeting = () => {
  console.log('Hello!');
}; // 마찬가지로 변수 할당이기 때문에 세미콜론 추가

greeting(); // Hello!

함수 정의 및 할당 방식의 차이

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

1) 호이스팅

• 함수 선언
  호이스팅되어 함수 선언 전에도 함수 호출을 할 수 있다.
• 함수 표현식
  호이스팅되지 않아 변수에 할당되기 전에 호출할 수 없다.

declaredFunction(); // This is a declared function
expressedFunction(); // Error!

// 함수 선언
function declaredFunction() {
  console.log('This is a declaered function');
}

const expressedFunction = function() {
  console.log('This is a expressed function');
};

2) 선언 방식

• 함수 선언
  코드 블록 내에서 독립적으로 정의된다. (세미콜론 불필요)
• 함수 표현식
  변수에 할당되는 방식으로 정의된다. (세미콜론 필요)

3) 코드 가독성 및 유지보수 측면

• 함수 선언
  일반적으로 코드 최상단에서 함수를 선언하여 가독성과 유지보수를 높일 수 있다.
• 함수 표현식
  필요에 따라 코드 블록 내부에서 함수를 정의할 수 있어 유연성이 높다.

4) 함수 이름

• 함수 선언
  함수 이름을 반드시 포함해야 한다.
• 함수 표현식
  함수 이름은 선택적이다. (익명 함수, 기명 함수)

// 함수 선언 - 함수 이름 반드시 필요
function add(a, b) {
  return a + b;
}

// Error! 익명 함수는 독립적으로 사용할 수 없다
function(a, b) {
  return a + b;
}

// 함수 표현식 - 익명 함수
const subtract = function(a, b) {
  return a - b;
};

// 함수 표현식 - 화살표 함수 (익명 함수)
const multiply = (a, b) => {
  return a * b;
};

// 함수 표현식 - 기명 함수
const divide = function divdeAbyB(a, b) {
  return a / b;
};

익명 함수와 기명 함수의 차이

1. 이름 유무

• 익명 함수
  함수에 이름이 없고, 변수나 다른 함수의 인자로 사용된다.
• 기명 함수
  함수에 이름이 있고, 함수 내부에서 이름을 참조할 수 있다.

// 익명 함수
const greet = function() {
  console.log('Hello!');
};

// 기명 함수
const factorial = function computeFactorial(n) {
  if (n<=1) {
    return 1;
  }
  return n * computeFactorial(n-1);
};

2. 호출 방법

• 익명 함수
  주로 함수 표현식이나 콜백 함수로 사용된다. 이름이 없으므로 직접 호출할 수 없고, 변수나 다른 함수의 인자로 호출된다.

setTimeout(() => {
  console.log('This is an anonymous function');
}, 1000);

• 기명 함수
  함수 선언이나 기명 함수 표현식으로 정의할 수 있다. 이름을 통해 직접 호출할 수 있다.

function greet() {
  console.log('Hello!');
}

greet(); // Hello!

3. 스코프

• 익명 함수
  함수 이름이 없으므로 함수 내부에서 자기 자신을 참조할 수 없다.

const greet = () => {
  // 여기서는 함수 이름을 참조할 수 없음
  console.log('Hello!');
};

greet(); // Hello!

• 기명 함수
  함수 이름을 통해 함수 내부에서 자신을 참조할 수 있다. 주로 재귀 호출에 사용된다.

const factorial = function computeFactorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * computeFactorial(n - 1);
};