11
6

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 5 years have passed since last update.

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

Last updated at Posted at 2018-11-05

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の使い分け

11
6
1

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
11
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?