関数のプロパティとローカル変数の違いについて

JavaScriptにおける関数のプロパティとローカル変数の役割と特徴を説明する．

具体例

function example() {
    // ローカル変数
    let localCounter = 0;
    localCounter++;
    
    // 関数プロパティ
    example.propCounter = (example.propCounter || 0) + 1;
    
    console.log(`Local: ${localCounter}, Property: ${example.propCounter}`);
}

example(); // Local: 1, Property: 1
example(); // Local: 1, Property: 2
example(); // Local: 1, Property: 3

この例では

localCounterは毎回1になる（関数が呼ばれるたびにリセット）
example.propCounterは呼び出しごとに増加し続ける（値が保持される）

詳しい説明

1. 関数のプロパティの場合

function sayHi() {
    alert("Hi");
    sayHi.counter++; // 関数のプロパティにアクセス
}
sayHi.counter = 0; // 関数にプロパティを追加

// プロパティは関数の外からアクセス可能
console.log(sayHi.counter); // 0

2. ローカル変数の場合

function sayHi() {
    let counter = 0; // ローカル変数
    alert("Hi");
    counter++; // ローカル変数を増加
}

// ローカル変数は関数の外からアクセス不可
console.log(counter); // エラー: counter is not defined

違いを表にまとめると

特徴	関数プロパティ	ローカル変数
スコープ	関数の外からアクセス可能	関数内でのみアクセス可能
生存期間	関数オブジェクトが存在する限り維持	関数の実行中のみ存在
アクセス方法	関数名.プロパティ名	変数名で直接アクセス
値の保持	関数の呼び出し間で値を保持	関数の呼び出しごとにリセット