はじめに

今回は、Javascriptの"超基本"
データ型のリテラルについて について記録します。

過去に5点オブジェクトについて、記事を投稿しました。

・(Javascript) オブジェクト指向とオブジェクト&配列の違い
・(Javascript) インスタンス化とコンストラクター
・(Javascript) 静的プロパティと静的メソッド
・(Javascript) 組み込みオブジェクトとnew演算子によるインスタンス化
・(Javascript) データ型と参照型

リテラルとは？

リテラルとは、直接データ型に格納できる値のことです。
また、リテラルは 数値型・文字列型・真偽値型・シンボル型・特殊型 などの型にそれぞれの表現方法があります。

それぞれの型のリテラル表現

※こちらで記載するのは、各リテラルのアバウトな説明です。
以降、深堀した記事をアウトプットしたいと思います。

数値リテラル(number)

数値リテラルには 整数リテラル と 浮動小数点リテラル の2点があります。

→浮動小数点(ふどうしょうすうてん)

整数リテラル
10進数
16進数
8進数
2進数

浮動小数点リテラル
通常の小数表現と指数表現

文字列リテラル

文字列リテラルは、シングルクォート・ダブルクォート で囲む必要がある物です。

'こんにちは'
"こんばんは"

エスケープシーケンス

また、エスケープシーケンスを利用することも可能です。

window.alert('大丈夫 \n 頑張ろう!')

\n
改行のエスケープシーケンス

テンプレート文字列(ES2015)

テンプレート文字列を利用すると、文字列への変数埋め込みを行うことができます。

let name = '福沢諭吉'
let text = '一万円札は${name}である'

comsole.log(text)
//出力→ 一万円札は福沢諭吉である

小説サイトの"任意名前"の設定みたいで、面白いですね。

テンプレート文字列
${name}
${変数名}

配列リテラル

配列とはデータの集合になります。
配列では、1つの変数に対して複数の値を格納できます。
また、格納された各1つ1つの値を要素と言います。

また、配列はインデックス番号をキーにアクセスします。

ブランケット構文とインデックス番号

let country = ['Japan','China','North Korea'];
console.log(country[0]);
//出力→ Japan

ブランケット構文
['Japan','China','North Korea'];
↑の['・・・・']

インデックス番号
(data[0])
↑インデックス番号は 0 1 2 3 4 5 ・・・と番号が割り振られます。

要素
先のソースコードでは、ブランケット構文上にある
'Japan','China','North Korea' になります。

配列リテラルは入れ子も可能

let country = ['America',['Italia','Spain'],'France'];
console.log(country[1][0])
//出力→ Italia

ここでは、インデックス番号1の"['Italia','Spain']"を選択して、その中から番号0の'Italia' を出力しています。

オブジェクトリテラル

オブジェクトは、名前をキーにアクセスできる配列のことです。
配列リテラルだと、インデックス番号でしかキーにできないことに対して、オブジェクトは文字列をキーアクセスができることが特徴です。

また、配列では個々のデータを要素と言いましたが、オブジェクトではプロパティと言います。プロパティの中には関数も格納することができますよ。

オブジェクトリテラルの記述方法

let country = { a:'Germany', b:'Austria', c:'Switzerland' };
console.log(country.a);
//出力→ Germany
console.log(country['a']);
//出力→ Germany

{ キー名:値, キー名:値, キー名:値 };

また、console.log で出力している 2種の構文で出力させることがきます。

console.log(country.a);
//ドット演算子
console.log(country['a']);
//ブランケット構文

console.log(オブジェクト名.プロパティ名);
//ドット演算子
console.log(オブジェクト名[プロパティ名]);
//ブランケット構文

ドット演算子の注意

console.log(オブジェクト名.プロパティ名);

は、ブランケット構文よりシンプルな見た目をしていますが、プロパティ名が識別子と見なされてしまうので、識別子の命名規則に反していると予期せぬアクシデントが発生します。

country.555
//識別子に違反しているためエラー
country['555']
//OK

またブランケット構文は、555のような数字を使っても、プロパティ名を文字列として返すので問題はありません。

関数リテラル

関数とは、、入力値に引数を与えることにより処理を行い、その結果(返り値)を返す仕組みのことです。

引数(パラメーター/処理素材) → 関数(処理) → 戻り値(結果)

未定義値

未定義関数(undefined)は、値が定義されていない値を表します。

let japan;
let country = { c:japan };

console.log(japan);
//出力→ undefined 値が設定されていない
console.log(country.nihon);
//出力→ undefined プロパティが存在しない

個人的に馴染む深い。

null

javascriptでは、先の undefined の他に該当する値がないことを意味するnullがあります。
2つは、類似して煩わしいですが明確な違いがあります。

undefined
定義されていない

null
空である

あとがき

以上が、データ型のリテラルについて でした。
いかがでしたか？
役に立っていれば嬉しいです。
では!

Myリンク

また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

Twitter
Portfolio
Github
Note