この文章.📕Core JavaScriptベースの記事です.
この文章.👇古いポスター👇および.
JSを実行するコンテキスト-環境記録とエスケープ

💡 関数宣言文と関数式

関数宣言文と関数式がコード作成にどのように関連しているかを理解する前に、関数宣言文と関数式について説明します.
関数宣言(function declaration)と関数式(function expression)は、関数を再定義する方法です.
関数宣言は、関数定義子のみが存在し、個別の付与コマンドが存在しないことを示し、関数式は、定義された関数を個別の変数に割り当てることを示します.

function a(){...} // 함수 선언문. 함수명 a가 곧 변수명
a(); // 실행 OK
             
var b = function(){...} // (익명)함수 표현식. 변수명 b가 곧 함수명           
b(); // 실행 OK
                   
var c = function d(){...} // 기명 함수 표현식. 변수명은 c, 함수명은 d
c(); // 실행 OK
d(); // 에러!

📌 関数名を定義する関数式を記名関数式と呼びます.
記名関数式は、外部から関数名で関数を呼び出すことはできません.
上記の例では、c関数の内部では、c()呼び出しでもd()呼び出しでもうまく動作するため、関数の内部で再帰関数を呼び出すために使用することができる.
ただし、c()で呼び出すことができる場合は、d()で呼び出す必要はありません(結論はあまり使いにくい)

関数宣言文と関数式の実質的な違い

ソースコードの例

console.log(sum(1, 2));
console.log(multiply(3, 4));

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

var multiply = function (a, b) { // 함수 표현식 multiply
  return a * b;
};

実行コンテキストのlexicalEnvironmentは、環境記録の情報収集中に発生した状況を説明する2つの情報を収集します.

完了した照準

// 함수 선언문은 전체를 호이스팅 한다.
var sum = function sum(a, b) {
  return a + b;
};

// 변수는 선언부만 끌어올린다.
var multiply;

console.log(sum(1, 2));
console.log(multiply(3, 4));

// 변수의 할당부는 원래 자리에 남겨둔다.
multiply = function (a, b) {
  return a * b;
};

関数宣言文は全体的に明るくなり、関数式は変数宣言子のみが明るくなります.
関数は値としても使用できます.
関数を他の変数に値として割り当てます.これが関数式です.
上のコードを実行

以下の結果が得られたsum(1,2)は正常に動作し、3を出力します.
Multiに値が割り当てられていないため、エラーメッセージ「Multi is not a function」が出力され、実行時間が終了します.

関数宣言のリスク

上記の例のsum関数は、宣言前に呼び出されても問題はありません.
どのように作成しても間違いがない面では、初級者がJSにアクセスしやすい面もありますが、逆に大きな混乱を招くこともあります.
例えば、開発者Aが文書の100行目にsumという関数を記述しているとする.
新しく入社した開発者Bが同じファイルの5000行にsum関数を新たに宣言した場合?
グローバルコンテキストがアクティブな場合、グローバル空間に宣言されたすべての関数が一番上に引き寄せられます.
同じ変数名に異なる値を割り当てると、後で割り当てられた値は以前に割り当てられた値(override)を上書きします.
開発者AとBがsum関数を関数式として定義したらどうなりますか?
5000行目まではAの意図、5000行目以降はBの意図で正常に動作するはずです.
🙄 このようなことを避けるために、関数式を使う習慣を身につけてください.