JavaScriptのスコープを徹底解説！7つのポイントで理解が深まる

var globalVariable = "私はグローバル変数です";

function globalFunction() {
    console.log("私はグローバル関数です");
}

console.log(globalVariable); // "私はグローバル変数です"
globalFunction(); // "私はグローバル関数です"

function localScopeExample() {
    var localVar = "私はローカル変数です";
    console.log(localVar); // "私はローカル変数です"
}

localScopeExample();
console.log(localVar); // ReferenceError: localVar is not defined

var outerVar = "外側の変数";

function outerFunction() {
    var innerVar = "内側の変数";

    function innerFunction() {
        console.log(innerVar); // "内側の変数"
        console.log(outerVar); // "外側の変数"
    }

    innerFunction();
}

outerFunction();

var globalVar = "グローバル変数です";

function scopeTest() {
    var localVar = "ローカル変数です";
    console.log(globalVar); // "グローバル変数です"
    console.log(localVar);  // "ローカル変数です"
}

scopeTest();
console.log(globalVar); // "グローバル変数です"
console.log(localVar);  // ReferenceError: localVar is not defined

function outerFunction() {
    function innerFunction() {
        console.log("内部関数です");
    }

    innerFunction(); // "内部関数です"
}

outerFunction();
innerFunction(); // ReferenceError: innerFunction is not defined

if (true) {
    let blockScopedVar = "ブロックスコープ変数です";
    console.log(blockScopedVar); // "ブロックスコープ変数です"
}

console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

function counterCreator() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const increment = counterCreator();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

(function() {
    var privateVar = "プライベート変数です";
    console.log(privateVar);
})(); // "プライベート変数です"

console.log(privateVar); // ReferenceError: privateVar is not defined

console.log(hoistedVar); // undefined
var hoistedVar = "巻き上げられた変数です";

// 悪い例
var userCount = 0;
var adminCount = 0;

function countUsers() {
    userCount++;
}

// 良い例
function UserCounter() {
    let count = 0;
    return {
        increment: function() {
            count++;
        },
        getCount: function() {
            return count;
        }
    };
}

const userCounter = UserCounter();
userCounter.increment();
console.log(userCounter.getCount()); // 1

// 悪い例
var result;
function calculate() {
    result = 10 * 5;
}

// 良い例
function calculate() {
    return 10 * 5;
}
let result = calculate();