JavaScript入門 - 関数とスコープ

関数とスコープ

関数は、コードの再利用性を高め、プログラムを整理するための重要な要素です。また、スコープは変数の有効範囲を決定し、コードの安全性を確保します。

タスク

関数の定義

基本的な関数定義、アロー関数、関数式を使って関数を定義してみましょう。

関数の使用

定義した関数を呼び出し、戻り値を表示してみましょう。

スコープの理解

グローバルスコープとローカルスコープの違いを確認しましょう。

結果の表示

関数の実行結果をHTMLに表示してみましょう。

ヒント

関数の定義方法と、変数のスコープについて学びましょう。

参考コード

// 関数の定義と使用

// 基本的な関数定義
function greet(name) {
    return `こんにちは、${name}さん！`;
}

// アロー関数
const add = (a, b) => a + b;

// 関数式
const multiply = function(a, b) {
    return a * b;
};

// スコープの例
let globalVar = "グローバル変数";

function scopeExample() {
    let localVar = "ローカル変数";
    console.log(globalVar); // アクセス可能
    console.log(localVar); // アクセス可能
}

// 結果の表示
const output = document.getElementById("output");
output.innerHTML = `
    <p>${greet("太郎")}</p>
    <p>5 + 3 = ${add(5, 3)}</p>
    <p>4 × 6 = ${multiply(4, 6)}</p>
    <p>${globalVar}</p>
`;

// スコープの確認
scopeExample();
// console.log(localVar); // エラー：localVarは未定義