本ページはプロモーションが含まれています。

【JavaScript】変数の定義とvar、let、constの違い

JavaScriptの変数について JavaScript

varを使用すれば、新たに変数を宣言することができます。

しかし、全ての変数をvarで宣言してしまうと、後々に重大なバグを生み出してしまう可能性があります。

本記事では、変数の宣言で使われるvarに加え、同じくES6にて新たに追加されたlet及びconstについて解説します。

var

varは通常、このようにして変数を宣言可能です。

var greet = "Hello";
console.log(greet); // Hello 

しかし、同名の変数が再宣言されることによって、想定した結果が得られないことがあります。

var greet = "Hello";

/* 省略 */

var greet = "こんにちは";

/* 省略 */

console.log(greet); // こんにちは

また、varはスコープ(変数の有効範囲)が関数全域に及びます。

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

末端のconsole.log()30の出力を期待していたにもかかわらず10が出力されました。途中のforで再宣言されたiで値を変更させられ10になってしまったのです。

さらにvarは変数の巻き上げが起こります。

console.log(greet); // undefined
var greet = "Hello";

上記のコードは一見エラーになると思われますが、undefinedが出力され、エラーにはなりません。なぜなら、関数内でvarで宣言された変数は先頭にまとめて行われるからです。上記コードは下記と等価になります。

var greet;
console.log(greet); // undefined
greet = "Hello";

このようにvarには潜在的なバグを生み出す要素があります。

let

letvarと違って再宣言ができない仕組みで、ブロックスコープになっており、巻き上げ問題もありません。ブロックとは{}で囲まれた部分の事を意味します。

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

ブロックスコープであるletではforで定義されたiforの前に定義されたiはそれぞれ別物として扱われます。

const

constは編集不可能な定数を定義することができます。letと同様に再宣言は不可能でブロックスコープであり、再代入もできません。ただし、配列やオブジェクトに追加、編集をすることはできます。

const num_list = [1,2,3,4,5];
num_list.push(6);
num_list[0] = 0;

console.log(num_list); // 0,2,3,4,5,6

num_list = [7,8,9]; // Uncaught TypeError

JavaScriptの変数についてのまとめ

それぞれの違いをまとめるとこうなります。

var let const
再宣言 できる できない できない
値の再代入 できる できる できない
巻き上げ問題 あり なし なし
スコープ 関数 ブロック ブロック
主な用途 極力使わない 再代入が必要な変数 再代入が不要な定数

varは変数の再宣言が可能であり、関数内であればどこからでも参照可能、なおかつ巻き上げが起こるなどの問題を抱えています。そのため、varを多用したコードを書いてしまうと、いずれは重大なバグを引き起こす可能性があるのです。

しかし、letconstは使い分けやスコープなどの観点から扱いづらいものがあります。

varを使ったからと言って、直ちにバグが発生するという問題も無いため、初心者であるうちはvarを使用して徐々に慣れていくことも一考です。

また、ES6以前のコードではvarが使われていることがあるため『varが使用されている = 間違い』と考えるのは早計です。

スポンサーリンク
記事を書いている人

記事を書いている人Private Works

STUDY CODEの運営や記事の執筆は、Web制作やWebメディアを運営している個人事業(フリーランス)や、Web制作・プログラミングに精通したライターによって提供しています。詳しくはこちら

JavaScript
studycode-adminをフォローする

コメント

タイトルとURLをコピーしました