Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

JavaScriptの「スコープ」を徹底解説

JavaScript

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20211114052320p:plain

おはようございます。Shotaです。

今回の記事では、JavaScriptの「スコープ」について初心者向けに徹底解説します。スコープを正しく理解し、適切に範囲を指定することでより可読性の高いプログラムを書けるようになります。

そもそも、JavaScriptについてわからない人は以下の記事を参考にしてください。

▼おすすめの記事

shotanukumizu-1000.hatenablog.com

shotanukumizu-1000.hatenablog.com

それでは早速、本題に入りましょう。


「スコープ」とは

スコープは「変数の有効範囲」です。JavaScriptは細かくスコープを扱える一方で、少しの記述ミスでスコープの種類が大きく変わることがあります。

簡単なプログラムを書いているうちは、スコープをそこまで意識しなくてもコーディングできるようになることが多いです。しかし、複雑なコードを書くとスコープを小さくすることでバグを減らしたり、プログラム全体の見通しを良くすることを意識する必要があります。

スコープの役割

スコープで変数の有効範囲を限定することで、範囲の外へ影響することを未然に防げます。これによって、エラーの範囲を限定しやすく編集しやすいコードに仕上がります。

スコープの種類

JavaScriptには次のようなスコープが存在します。

  • グローバルスコープ
  • ローカルスコープ(関数、ブロック)

また、クラスに関係する変数もスコープに影響します。一般的には次のようなものが挙げられます。

ブロックスコープ

ブロックとは{}で囲まれたコードを指します。ifやforと一緒に使われることが多いです。constやletで宣言された定数や変数はこのブロックスコープで扱われます。

if (true) {
    const myBlockVar1 = 'value1'
    console.log(myBlovkVar1)
} else {
    const myBlockVar1 = 'value2'
    console.log(myblockVar1)
}

上記のプログラムのように、if～else文の2つのブロック内にmyBlockVar1という変数をそれぞれ宣言して利用できます。コード中に二回myBlockVar1が出ていますが、それぞれ別の変数として扱われます。

ブロックは特にifやforと一緒に利用せずとも、自由にロジックを追加できます。

関数スコープ

関数の中が有効範囲内になるスコープです。関数の中でvarが宣言される変数のみがこれに該当します。

const funcScope = () => {
    var myFuncVar1 = 'value'
    console.log(myFuncVar1)
}

funcScope()
// console.log(myFuncVar1) エラー：関数の外なので変数を利用できません。

グローバルスコープ

JavaScriptにおいて最も範囲の広いスコープで、プログラムのどこからでも参照できます。

関数に全く含まれていない最上位の領域で変数を宣言したり、関数内でも変数を宣言する際にvarやconst、letを付けずに使うとグローバルスコープとして処理されます。

// 最上位でのvarはグローバルスコープに変数を宣言
var arg1 = 'JavaScript'

// これもグローバルスコープに変数を宣言
arg1 = 'TypeScript'

// varやconstが付けられていないので、グローバル変数として利用される
const myFunc = () => {
    arg2 = 'Dart'
} 

console.log(arg1)

// console.log(arg2)  まだ宣言していないのでここで呼び出すとエラー
myFunc() // 関数の中でグローバル変数arg2が呼び出される
console.log(arg2) // ここでarg2が利用できる

varやconst、letなどの宣言を付けずに変数を利用するとグローバル変数として処理されるので、これがバグの原因になることがよく知られています。

letとvar

今回の記事では変数宣言時にletとvarを両方とも使いました。

しかし、JavaScriptでは変数宣言時にletを使うと、varよりも厳密にプログラムがチェックされてバグが発生しにくい仕組みで実現されています。

このように考えると、varを使う機会はほとんど無くなるかと思います。

まとめ

今回の記事では、JavaScriptの「スコープ」を詳細に解説しました。

今回の記事を参考に、JavaScriptへの理解を一層深めていただけると幸いです。

今回の記事はこれで終了です。

参考サイト

techacademy.jp

codezine.jp