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

ES6でのvar、let、constの使い分け

More than 1 year has passed since last update.

JavaScriptの変数の宣言方法は3つあります。var、let、constです。
JavaScriptの変数の宣言は元々varのみでした。ES6では、letとconstが追加されました。
そこで、var、let、constの使い分けを紹介をしたいと思います。

var - 変数を宣言する(再定義可)

特徴として、再代入可能で再定義可能です。

var x = 3;
x = 4;
var x = 4;

スコープ

ブロックの中で宣言した変数をブロックの外でも使用できます。

if (true) { var y = 3 }
console.log(y); // 3 

for (var i = 0; i < 10; i++) {
  // do something
}
console.log(i); // -> 10

varはスコープの範囲が広く、挙動の予測が難しくなるため、今後varでの変数の宣言は避けるべきです。

let - 変数を宣言する(再定義不可)

再代入可能な変数を宣言する場合に使用します。varと異なる点は変数名を再定義できません。

let x = 3;
x = 4;
let x = 4; <- error

// if文
let name;
if (mode === "slack") {
  name = "youichi";
} else if (mode === "twitter") {
  name = "@wozozo";
}

スコープ

ブロックの中で宣言した変数はブロックの外では使用できません。

if (true) { let z = 4 }
console.log(z) <- error

for (let i = 0; i < 10; i++) {
  // do something
}
console.log(i); <- error

再代入可能な変数を宣言する場合では、影響範囲がvarよりも小さくなるため、varではなくletを使用するべきです。

const - 再代入不可能な変数を宣言する

constは再代入不可能で再定義不可能な変数を宣言する場合に使用します。

const x = 3;
x = 4; <- error
const x = 4; <- error

スコープ

letと同様に、ブロックの中で宣言した変数はブロックの外では使用できません。

if (true) { const z = 4 }
console.log(z); <- error

いずれの3つの宣言方法で、まず使うべきはconstです。変更が必要のないものは「もう変更がない」と宣言することで、他のコードへの影響を小さくします。

まとめ

  • varは使用しない
  • 基本的にconstを使用する
  • 再代入が必要な場合は、letを使用する

参考

イマドキのJavaScriptの書き方2018 - Qiita
JavaScriptにおけるvar/let/constの使い分け

yshz
Rails, React
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