スコープ外から変数にアクセスした場合の挙動

関数スコープ

userNameという関数の中に、変数が定義されています。
この場合、変数の有効範囲はuserNameという関数の中だけとなります。
よって、スコープ外から参照しようとしても、ReferenceErrorとなります

{}がバリア(壁)のような役割を果たしており、
スコープ外からアクセスできないようなイメージです。

補足

クラスのようにメンバ演算子を利用してみましたが、
undefinedでした（firstNameに代入されている"Ringo"を参照できなかった)

test.js

function userName(){
    let firstName = "Ringo";
    let lastName = "Sheena";

    return firstName + " - " + lastName;
}

console.log(userName().firstName);
//出力結果：undefined

console.log(userName.firstName);
//出力結果：undefined

クラススコープ

一方で、クラス内に定義されたメンバ変数には、
メンバ演算子(.)を使うことで参照することが可能です。

PIというメンバ変数(PIだから定数?)自体はCircleクラスの中で定義されていますが、
Circleクラス自体が呼び出し元と同じスコープで定義されているため、
Circle.PIという形式で呼び出すことが可能です。

クラス名自体はスコープ外(バリアの外)のため、
クラス名を経由すればバリア内の変数にアクセスできるイメージです。

クラス名を経由せず、
直でメンバ変数にアクセスすることはできません。(バリアに跳ね返される)

補足①

Circleクラスの外側にもう1枚{}というバリアを張ると、
呼び出している箇所から、
Circleというクラス名を経由することができなくなるので、
アクセスできません

補足②

クラス名の中からのアクセスであっても、
クラス名を経由する必要があります。

↓OK

test.js

class Circle {
    static PI = 3.14;
    static getPI(){
        console.log(Circle.PI);
    }
}

Circle.getPI();
// 出力結果：3.14

↓NG

test.js

class Circle {
    static PI = 3.14;
    static getPI(){
        console.log(PI);
   }
}

Circle.getPI();
// 出力結果：ReferenceError: PI is not defined