【JavaScript】変数 - 値の記憶と取得

JavaScriptでは値の記憶や取得を行うことができます。

ここでは、それらを実現する変数について解説します。

変数

変数は“記憶領域とその名称”です。

コンピュータの物理的な記憶領域とその名称として変数名を持ち、文字列や数値などの値を記憶したり、記憶した値を取得することができます。

変数の基本的な操作は『変数の宣言』、『値の代入（記憶）』、『値の取得』があります。

変数の宣言

変数の宣言は“変数の使用を明示すること”です。

プログラムで変数を使用するには、初めにコンピュータの物理的な記憶領域を確保する必要があります。

変数の宣言によって、記憶領域の確保とその記憶領域の名前（変数名）を割り当てます。

基本構文

宣言キーワード 変数名

変数名は変数の名称で、次のルールに従って自由に決めることができます。

• アルファベット（大文字/小文字）、アンダースコア（_）、ダラー（$）、数字のみ
• 頭文字に数字は使えない。
• 予約語（JavaScriptの構文等で使用する単語）は使えない。

宣言キーワードはvar、let、constの３種類あり、キーワードによって変数の性質が変わります。

var

var 変数名

varキーワードで宣言した変数は値の記憶と取得が可能です。

記憶する値はプログラムの途中で変更することができます。

既に同じ変数名の変数が存在する場合でもエラーが発生しないため、意図しない動作が発生する可能性があり、非推奨の宣言キーワードとなっています。

let

let 変数名

letキーワードで宣言した変数は値の記憶と取得が可能です。

記憶する値はプログラムの途中で変更することができます。

既に同じ変数名の変数が存在する場合、エラーが発生するため、変数名の重複に容易に気づけます。

const

const 変数名 = 初期値

constキーワードで宣言する変数は宣言時に初期値を定義します。

初期値から値を変更することはできず、取得のみ可能になっており、一定の値を保持するため定数とも呼ばれます。

既に同じ変数名の変数が存在する場合、エラーが発生するため、変数名の重複に容易に気づけます。

各宣言キーワードの性質をまとめると次の表のようになります。

サンプル

___ih_hl_start
let message;
___ih_hl_end

let messageが変数の宣言です。

出力はありませんが、messageという変数名の記憶領域を確保した状態になります。

値の代入

値の代入は“変数に値を記憶すること”です。

基本構文

変数 = 値

イコール（=）は代入演算子と呼ばれ、変数に値を代入（記憶）します。

数学や算数のイコールとは意味が異なり、左右が等しいことを表すものではないことに注意してください。

サンプル

let message;

___ih_hl_start
message = 'Hello World';
___ih_hl_end

３行目のmessage = 'Hello World'が値の代入です。

変数messageの記憶領域に代入演算子（=）によって、文字列の'Hello World'を代入（記憶）しています。

値の取得

値の取得は“変数の値を取り出すこと”です。

基本構文

変数

特別な構文はなく、値を取得する処理の部分に変数を記述します。

サンプル

let message;

message = 'Hello World';

___ih_hl_start
console.log(message);
___ih_hl_end

Hello World

５行目のmessageの部分で値を取得しています。

messageは３行目で'Hello World'を代入しているため、その値が取得され、console.logによってコンソールに出力されています。

変数の初期化

変数の初期化は“変数の宣言と値の代入を同時に行うこと”です。

constキーワードで宣言する変数は初期化で値を記憶する必要があります。

letキーワードとvarキーワードで宣言する変数は初期化を行わなくても使うことができますが、値が不明な状態となるためバグやエラーの原因となります。

そのため、JavaScriptに限らずプログラミング言語では変数の初期化を行うことが推奨されています。

基本構文

宣言キーワード 変数 = 値

サンプル

___ih_hl_start
let message = 'Hello World';
___ih_hl_end

console.log(message);

Hello World

１行目のlet message = 'Hello World'が変数の初期化です。

letキーワードによる変数messageの宣言と'Hello World'の値の記憶を同時に行っています。

変数の利用ケース

変数を利用する際に発生するケースをご紹介します。

値の再代入

変数に記憶する値を変更したい場合があります。

そのような場合は、値を改めて代入することによって変更することが可能です。（『値の再代入』といいいます。）

例えば、次のコードは１行目と３行目で値を代入したため、２行目と４行目の出力では異なる出力結果となります。

let message = "Hello World";
console.log(message);
message = "Good Morning"
console.log(message);

Hello World
Good Morning

なお、constキーワードで宣言した変数は値の再代入ができません。

変数名の重複

letキーワードやconstキーワードで宣言した変数の変数名が重複した場合、次のようなエラーが発生します。

var x = "sample";
let x = "sample";

Uncaught SyntaxError: Identifier 'x' has already been declared;