LoginSignup
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-05

はじめに

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

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
8