Edited at

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ライフを!