Help us understand the problem. What is going on with this article?

var/let/constの使い分けのメモ

More than 1 year has passed since last update.

グローバルスコープ

  • トップレベルに変数や関数を置くと、それはどこからでもアクセスできるグローバルオブジェクトになる
  • 別のJSファイルに書いたとしても、同様にグローバル扱いになる

関数スコープ

  • functionの中に書かれた変数・関数はその内部でしか変更・参照はできない
  • 外部から参照できないので変更に強いモジュールが作れる

var

  • 巻き上げがおきる
    • JavaScriptは関数内のどこでもvarの宣言を書ける
    • 関数のどこで宣言しても、先頭で定義したものとしてみなされる
    • 先頭部分で使いたい変数は全て定義するのが定石
  • 関数スコープである
    • 関数内ならどこからでも参照できる
var pokemon = 'ライチュウ';
function sing(){
   //JavaScriptは関数内のどこでもvarの宣言を書ける
   //これらの変数は関数のどこで定義しても、先頭で定義したものとして見なされる
   //var pokemon;
   console.log(pokemon);
   var pokemon = 'ピカチュウ';
   console.log(pokemon);
}
sing();

let

  • ブロックスコープ
  • 今までvarで書いてきた所はletで置き換えられる
  • if,for等の{}内のブロックのみで使うブロックスコープが作れるので、スコープを狭く出来るため影響範囲を狭められる
  • 変数の巻き上げは従来どおり起きる
if (true) {
  //if内はスコープが無いのでグローバルスコープ扱い
  var test = 'hoge';
}

//ブロックスコープではないので、アクセスできる
console.log(test);

if (true) {
  //ブロックスコープになる
  let test2 = 'hoge2';
}

//アクセスできない
console.log(test2);

const

  • 再代入不可能な変数を作る (つまり定数にできる)
  • 再代入しようとするとエラーになる
  • letと同じブロックスコープ
  • 巻き上げは起きる
  • ほとんどは再代入は不要なのでconstを使う
  • constを使っておけば値が変わることが無いので、値が変わるかも?という懸念が無くてコードが読みやすい
  • forのイテレータのような再代入が必要な所のみletを使う
const test3 = 'hoge';

test3 = 'fuga'; //エラー

console.log(test3);
masarufuruya
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系のフリーランスエンジニア。React Nativeとサーバーレスアーキテクチャがマイブーム。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした