JavaScriptの関数設計とスコープ、型変換の基礎知識

関数の戻り値と引数の挙動

JavaScriptでは関数から複数の値を返す場合、配列やオブジェクトでラップして返却するのが標準的な手法です。

return [maxVal, minVal];

同一名称の関数を重複して定義した場合、実行環境は後から宣言された関数で前の定義を上書きします。また、仮引数と実引数の数が一致しない場合、以下のルールが適用されます。

  • 実引数が不足している場合、対応する仮引数には undefined が割り当てられます。
  • 実引数が過剰な場合、余剰の値は関数実行時に自動的に生成される arguments オブジェクトに格納され、配列ライクなインデックスで参照可能です。

関数内部で return 文が実行されると、その時点で制御フローが終了し、指定された値が呼び出し元に返されます。

スコープと変数の解決順序

変数の有効範囲はグローバルスコープとローカルスコープに大別されます。スクリプトファイル全体、および関数外の領域はグローバルスコープに該当し、関数ブロック内で宣言された変数はその関数内でのみアクセス可能です。

宣言キーワード(varletconst)を省略して値を直接代入した場合、その変数は自動的にグローバルスコープのプロパティとして登録されます。識別子の検索は「ローカルスコープを最優先し、該当しない場合は上位チェーンを辿ってグローバルスコープへ到達する」というレキシカルスコープの規則に従います。

無名関数と即時実行関数式(IIFE)

関数名を持たない無名関数は、モジュールパターンの構築やAPIの内部実装、スコープの隔離に広く利用されます。特に定義と同時に実行する即時実行関数式(IIFE)は、変数名の衝突を防ぐための有効な設計パターンです。

// 標準的な括弧記法
(function (alpha, beta) {
    const sum = alpha + beta;
    console.log(`合計: ${sum}`);
    const localBuffer = [];
})(10, 25);

// 演算子を用いた代替記法
void function (x, y) {
    const product = x * y;
    console.log(`積: ${product}`);
}(4, 7);

関数定義を括弧で囲み、末尾に引数リストを配置することで、メモリ上に生成された関数が直ちに評価・実行されます。これにより内部の変数や処理が外部スコープに漏洩することを防げます。

実装例:秒数を時・分・秒に変換

ユーザー入力から総秒数を受け取り、時間フォーマットへ整形する処理の実装例です。除算と剰余演算を組み合わせ、桁揃え処理を組み込んでいます。

const rawInput = Number(prompt('変換対象の秒数を入力:'));

function formatElapsedTime(totalSec) {
    const hrs = Math.floor(totalSec / 3600);
    const mins = Math.floor((totalSec % 3600) / 60);
    const secs = totalSec % 60;

    const padZero = (val) => val.toString().padStart(2, '0');
    return `${padZero(hrs)}時間${padZero(mins)}分${padZero(secs)}秒`;
}

document.body.insertAdjacentHTML('beforeend', `<div>${formatElapsedTime(rawInput)}</div>`);

論理演算子のショートサーキットとデフォルト値

論理演算子は左辺の評価結果によって式全体の真偽が確定した場合、右辺の評価を省略します。このショートサーキット評価を利用し、引数のフォールバック値を簡潔に設定できます。

function computeTotal(valA, valB) {
    const safeFirst = valA || 0;
    const safeSecond = valB || 0;
    console.log(safeFirst + safeSecond);
}

computeTotal(8, 12); // 20
computeTotal();      // 0

短絡評価が発生する条件は以下の通りです。

演算子短絡条件
&&左辺が偽値の場合、右辺を評価せずに偽値を返却
||左辺が真値の場合、右辺を評価せずに左辺の値を返却

暗黙的型変換と真偽値の分類

条件判定や演算実行時、JavaScriptエンジンは値を自動的に型変換します。偽値(falsy)として判定されるのは ''(空文字列)、0undefinednullfalseNaN の6種類のみであり、これら以外は全て真値として扱われます。

算術演算における暗黙変換の主要な規則:

  • 減算演算子(-)は被演算子を数値へ強制変換しようと試みます。
  • null は数値コンテキストで 0 として評価されます。
  • undefined は数値コンテキストで NaN へ変換されます。
console.log('data' - 3);      // NaN(文字列は数値化不可)
console.log(null + 9);        // 9
console.log(undefined + 14);  // NaN
console.log('' - 6);          // -6(空文字は数値0に変換)

数値への変換に失敗した場合は NaN が返されるため、厳密な等価比較(===)や Number.isNaN() による検証処理を併用することが推奨されます。

タグ: javascript scope iife type-coercion logical-operators

5月27日 17:01 投稿