3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptのスコープについて

Last updated at Posted at 2020-04-01

##スコープとは
スコープとは変数を参照できる範囲のことです。今回はJavaScriptのvar,let,constについて解説します。
constは定数(再代入不可)の宣言なので特に難しく考えることはないのですが、letとvarは少し紛らわしいのでここを理解することでコードレビューの指摘が減ると思います。

##今回の記事用に書いたコード
コメントに解説が書いてあるので、これだけでも分かるかもしれませんが一応ひとつずつ解説します。

function Test(){
  var hoge = 1

  // hogeは関数スコープなのでTest関数の中で使う場合はエラーにならない
  console.log(hoge)

  if (true){
    let fuga = 2
    // fugaはブロックスコープなので、ブロック内(この場合はif文の中)で使用する場合はエラーにならない
    console.log(fuga)
  }
  // fugaはブロックスコープなので、ブロック内で定義した変数をブロックの外で呼び出そうとするとエラーになる
  // Uncaught ReferenceError: fuga is not defined
  console.log(fuga)
}

Test()

// hogeは関数スコープなので、Test関数内で定義した変数を関数の外で呼び出そうとするとエラーになる
// Uncaught ReferenceError: hoge is not defined
console.log(hoge)

// constで変数を定義すると定数扱いになるため、値の再代入はできない。
// Uncaught TypeError: Assignment to constant variable.
const aaa = 3
aaa = 3

##var
関数内で有効となる変数。上記のコードでは変数hogeをvarで宣言している。Test関数の外でhogeを参照使用とするとエラーとなる

##let
ブロック内で有効となる関数。上記のコードでは変数fugaをletで宣言している。変数を宣言したブロックの外でfugaを参照しようとするとエラーとなる。varに比べるとスコープが狭いため、想定外の値が入りにくいというメリットがある。

##const
constで宣言された場合は定数となり、再代入は不可能となる。処理内容ごとに値が変わらないことを想定している場合は定数にしておく。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?