JavaScript
es6

varじゃだめなの?? constとletを使おう!

はじめに

constやletやら良く見るけどvarじゃだめなの??
ずっとvarでやってきたし、大きく困ったことないからいいじゃんって思いますよね!

そんなあなたもconstやletを使いたくなるように、constとletの便利な所をまとめて見ました!

対象読者

・ES2015をこれから使っていきたい

注意点
これから紹介する記法は主にES2015以降の記法です。
レガシーブラウザに対応させる場合は、トランスパイラ(Babel等)を使用し、
ES5記法にトランスパイルをおこなってください。
(参考記事)
https://qiita.com/mizchi/items/3bbb3f466a3b5011b509#%E3%81%84%E3%81%BE%E3%81%99%E3%81%90es2015%E3%82%92%E4%BD%BF%E3%81%86
https://qiita.com/hietahappousai/items/9570da4b9275425489b2

簡単にconstとletについて説明

constは定数を宣言するときに使用します。

どういうことかというと、
varを使って変数を宣言すると、

var  hoge = 'りんご';

console.log(hoge);  // りんご

hoge = '再代入だ!!'; 

// 再代入が可能
console.log(hoge); // 再代入だ!!

こんな感じで再代入ができます。
対しconstを使うと

const  hoge = 'りんご';

console.log(hoge);  // りんご

// 再代入してみる
hoge = '再代入だ!!'; // エラーになる Uncaught TypeError: Assignment to constant variable.

言語レベルで再代入を防いでくれます。
定数を宣言する場合に大文字で書くといったことをしなくても、
ひと目でわかりやすいですね!!

letは基本的にはvarと同じく、
変数を宣言する際に使用しますが以下に記載する、
constと共通のメリットがあります。

スコープを狭くできる(ブロックスコープになる)

varでfor文やif文を書いた場合は、

for (var i = 0; i < 10; i++) {
    i; // 0,1,2,3,4,5,6,7,8,9
}

// for文の外でもiにアクセスできてしまいます
i; // 10

for文の外でもiに対しアクセスが可能になってます。
このままですと、予想外の挙動をおこしてしまうかもしれません。。

letやconstを使うことで、

for (let i = 0; i < 10; i++) {
    i; // 0,1,2,3,4,5,6,7,8,9
}

i; // is not defined

iの有効範囲がfor文の中だけになり、アクセスが出来なくなりました。
このようにconstとletを使うことで、スコープを狭めることができます。

変数の巻き上げ現象が起こらなくなる

変数の巻き上げとは、「宣言された場所に関係なくスコープの先頭で宣言されたことになる」というものなのですが、

詳しく見ていくと、

console.log(hoge);
var hoge = 'xxx';

console.logが呼ばれた時にhoge変数が存在しないので、
is not definedとエラーが出そうなのですが、実際には

console.log(hoge); // undefined
var hoge = 'xxx';

undefinedが出力されます。
実際のJavaScriptの解釈を見てみると、

var hoge;
console.log(hoge); // undefined
var hoge = 'xxx';

上記のコードと同じ、処理が行われており、
コードの先頭で変数が宣言されていると見なされてます。
JavaScriptの仕様によるものなのですが、
このことを巻き上げ現象と呼びます。

巻き上げ現象もconstやletを使うことで、

console.log(hoge); // ReferenceError: hoge is not defined
let hoge = 'xxx';

適切なエラーが発生し巻き上げ現象がなくなります。

二重宣言ができなくなる

同じ変数名を宣言してしまった場合、上書きされることがなくなりました。

varの場合

var aaa = 'aaa';
var aaa = 'bbb';

// 後から指定した方に値が変わってしまっている
console.log(aaa); // bbb

letの場合

let aaa = 'aaa';
let aaa = 'bbb';

// SyntaxError: Identifier 'aaa' has already been declared ;
// エラーがでる

console.log(aaa);

まとめ

  • constは定数
  • letは変数
  • ブロックスコープになる
  • 変数の巻き上げ現象が起こらなくなる
  • 二重宣言ができなくなる

よきJavaScriptライフを!