函数声明（Function Declaration）

函数声明是使用 function 关键字直接声明一个函数，并且会在其所在的作用域中进行提升（hoisting），这意味着可以在函数声明之前调用该函数。

示例：

function add(a, b) {
  return a + b;
}

// 调用函数
console.log(add(2, 3)); // 输出：5

在上述示例中，add 函数可以在声明之前被调用，因为函数声明会被提升到作用域的顶部。

函数表达式（Function Expression）

函数表达式是将一个函数赋值给一个变量。函数表达式不会被提升，因此必须在定义之后才能使用。函数表达式可以是匿名的（没有名称），也可以是具名的（有名称）。

匿名函数表达式：

const add = function(a, b) {
  return a + b;
};

// 调用函数
console.log(add(2, 3)); // 输出：5

具名函数表达式：

const add = function addFunction(a, b) {
  return a + b;
};

// 调用函数
console.log(add(2, 3)); // 输出：5

在上述示例中，函数表达式赋值给变量 add。必须在定义之后才能调用 add 函数。

主要区别

1. 提升（Hoisting）：

   • 函数声明：会被提升到其所在作用域的顶部，因此可以在函数声明之前调用。
   • 函数表达式：不会被提升，必须在定义之后才能调用。

2. 调用方式：

   • 函数声明：直接使用函数名调用。
   • 函数表达式：通过变量名调用。

3. 作用域：

   • 函数声明：其作用域是函数所在的作用域。
   • 函数表达式：其作用域取决于定义的位置。

使用场景

• 函数声明：适用于需要在整个作用域中访问的函数，通常用于定义主要的函数逻辑。
• 函数表达式：更灵活，可以用作回调函数、立即调用函数表达式（IIFE），或作为某个变量的一部分。

补充：立即调用函数表达式（IIFE）

IIFE是一种特殊的函数表达式，可以在定义后立即执行。

示例：

(function() {
  console.log('This is an IIFE');
})(); // 输出：This is an IIFE

总结

• 函数声明：提升，提前使用，函数名调用，适合全局使用。
• 函数表达式：不提升，定义后使用，变量名调用，灵活应用。

理解函数声明和函数表达式的区别有助于编写更清晰、灵活和维护性更高的代码。