🦄

JavaScriptを一から理解する: var, let, const

2022/02/01に公開

JavaScript

tech

はじめに

はじめまして、Doxperと申します。
現在はフロントエンドエンジニアを目指し日々学習しております。

Reactを学習するにあたり、改めてJavaScriptの理解が浅いことを痛感したため、復習、知識の定着の意味を込めて今回記事を書かせていただきます。

対象読者

エンジニアを目指している同士
JavaScriptの基礎を身につけたい方
過去にプログラミング学習に挫折した方
プログラミング言語は他に触ったことがない方

変数/定数を宣言する

今回の記事では、JavaSciptの変数と定数について学びます。

変数(Variables)

プログラミングにおいて、変数とはデータを入れる容器（記憶領域）のようなものです。
変数を利用するには、あらかじめ変数を宣言する必要があります。
JavaScriptでは以下のように宣言します。

variables.js

// let 変数名 [=初期値]
let num

ここではnumという名前の変数を宣言しました。

また、変数の宣言時に初期値を設定することも可能です。

variables.js

let num = 10;

上記の例ではnumという名前の変数を宣言し、初期値として10を代入演算子=を用いて代入してます。

JavaScriptでは一つの命令の中で複数変数を宣言することも可能です。

variables.js

let x = 1, y = 2, z = 3;

変数を宣言するもう一つの構文

JavaScriptで変数を宣言する構文は２つあります。
一つは上記の例で使用したlet、そしてもう一つはvarです。
以下はvarを使用した変数の宣言方法です。

variables.js

//var 変数名 [=初期値]
var num

上記のコードも同じく、numという名前の変数を宣言しています。
見た目では、letをvarに置き換えただけに見えます。
しかし、実際は以下のような違いがあります。

var	let
変数の再宣言が可能	変数の再宣言が不可能
関数スコープ	ブロックスコープ

varは変数の重複を許可し、letは同名の変数を許しません。
簡単な例をあげます。

variables.js

var num = 1;
var num = 2;

varは再宣言が可能なので、numは2で上書きされます。

次はletの場合を見てみます。

variables.js

let num = 1;
let num = 2; //エラーが発生

letは再宣言が不可能なので同名の変数を宣言するとエラーが発生します。

スコープとは？

変数にはスコープという重要な性質が存在します。
スコープとは、端的に説明すると変数を読み書きできる範囲です。

スコープについての具体的な説明は次回以降の記事で書こうと思います。

今回の記事では、varとletではスコープが異なり、letの方がより限定的な範囲だと理解していただいて構いません。

変数の値を変更する

JavaScriptでは格納されている変数の値を変更することが可能です。

variables.js

//変数xに1を代入
let x = 1;
console.log(x); //1

//変数xの値を変更
x = 2;
console.log(x) //2

定数(Constants)

JavaScriptでは定数を以下のように宣言します。

variables.js

// const 変数名 [=値]
const num = 1;

constを用いて宣言された変数は定数と呼ばれます。
そして以下のような特徴を持ちます。

定数の値は再代入によって変更することができない。
再宣言ができない。
初期化が必須
letと同様にブロックスコープを持つ。

// ageを定数として宣言し、10を代入
const age = 10;

//再代入をするとエラーが発生します。
age = 12; //これはエラー

//再宣言するとエラーが発生します。
const age = 12; //これもエラー

// 初期化をしないとエラーが発生します。
const age; //これもエラー

letとconstの使いわけ

letとconstのどちらを使うべきか悩まれた方がいるかもしれません。
以下のような理由から再代入をする必要がなければconstを使うべきだと推奨されています。

定数を使用することによって値の意味が明確になる。
コードの可読性が増す。
コードの途中で値が書き変わることを防ぐ。

こちらの記事が非常に分かりやすかったので興味のある方はこちらもご覧下さい。

JavaScriptの命名規則

JavaScriptには他のプログラミング言語と同様に命名規則(ネーミング規約)があります。
最低限理解しておくべき命名規則は次の4つです。

一文字目は,半角英字,アンダースコア(_),ドルマークであること。
二文字目以降は、一文字目で使用できる文字、あるいは数字であること。
予約語でないこと。
変数名では大文字と小文字は区別される。

予約語とは?

JavaScriptであらかじめ特別な意味を持つ単語として登録されているものです。
今回ご紹介したvar　let　constなどが該当します。

例をあげます。

//良い例

let _num = 1; //ok
let $num = 1; //ok
let num1 = 1; //ok
let firstName = 'foo' //ok

//悪い例

let 1num = 1; //一文字目を数字にするとエラー
let const = 1// 予約語のためエラー

おわりに

今回はJavaScriptにおける変数/定数の宣言についてご紹介しました。
初めての記事ということもあり、読みづらい文章だったかもしれませんが、この記事が少しでも皆さまの参考になれば嬉しく思います。

また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

const - JavaScript | MDN
JavaScript の定数 - JavaScript の基本 - JavaScript 入門
 Learn JavaScript Programming
変数と宣言 · JavaScript Primer #jsprimer
JavaScript Tutorial
山田祥寛(2016).改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

はじめに

対象読者

変数/定数を宣言する

変数(Variables)

変数を宣言するもう一つの構文

スコープとは？

変数の値を変更する

定数(Constants)

letとconstの使いわけ

JavaScriptの命名規則

予約語とは?

おわりに

参考文献

Discussion