はじめに
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ライフを!