はじめに
プログラミング言語には、動的型付け言語と静的型付け言語という2種類のタイプがあります。
動的言語と静的言語の違い
- 両者の違いは、あらかじめデータ型を決めるか(宣言する)どうかという部分です。
動的型付け言語
言語変数などのデータ型の宣言がいらない以下のようなプログラミング言語のことです。
例)
Python
Ruby
JavaScript
PHP
など
静的型付け言語
変数などのデータ型の宣言があらかじめ必要なプログラミング言語のことです。以下のような言語が当てはまります。
例）
C/C++
C#
Java
Go
Scala
Swift
など
データ型
JavaScriptは動的型付け言語に分類される言語であるため、静的型付け言語のような変数の型はありません。 しかし、文字列、数値、真偽値といった値の型は存在します。 これらの値の型のことをデータ型と呼びます。
データ型を大きく分けると、プリミティブ型とオブジェクトの2つに分類されます。
- JSは、動的型付け言語であるため変数に型をつけることはありませんが、変数に代入される値には型が存在します。
- JSのデータ型は、プリミティブ型とオブジェクトの2つがあります。
プリミティブ型
- プリミティブ型（基本型）は、最初から用意されている基本的な値の型のことです。
- プリミティブ型の値は、一度作成したらその値自体を変更できないというイミュータブル（immutable）の特性を持ちます。
- イミュータブルは、オブジェクトが作成された後は状態を変更できないオブジェクトです。
- 値を変更できないというのは、メソッドや関数を使って値を直接操作、変更したりすることができないという意味です。
- ただし、プリミティブ値を代入することで新しい値に置き換えることは可能です。その場合も値の状態が変わった訳ではありません。変数自体が他の参照に代わるだけです。
- プリミティブ型（基本型）
- 真偽値（Boolean）: trueまたはfalseのデータ型
- 数値（Number）: 42 や 3.14159 などの数値のデータ型
- 巨大な整数（BigInt）: ES2020から追加された9007199254740992nなどの任意精度の整数のデータ型
- 文字列（String）: "JavaScript" などの文字列のデータ型
- undefined: 値が未定義であることを意味するデータ型
- null: 値が存在しないことを意味するデータ型
- シンボル（Symbol）: ES2015から追加された一意で不変な値のデータ型
Primitive (プリミティブ)
イミュータブルな値の例⏬
var immutableString = "Hello";
console.log(immutableString);
immutableString = immutableString + "World";
console.log(immutableString);
ミュータブルな型とイミュータブルな型の相違を知ろう
JavaScriptでイミュータブルなプログラミングをする
オブジェクト
- オブジェクトは複数のプリミティブ型の値またはオブジェクトからなる値の集合のことです。
- オブジェクトは、一度作成した後もその値自体を変更できるためミュータブル（mutable）の特性を持ちます。
- オブジェクトは、値そのものではなく値への参照を経由して操作されるため、参照型のデータとも言います。
- プリミティブ型以外のデータをオブジェクトであると覚えていれば問題ありません。
Mutable (ミュータブル)
- オブジェクト（複合型）
- プリミティブ型以外のデータ
- オブジェクト、配列、関数、正規表現、Dateなど
typeof演算子を使うことで、値のデータ型を調べることができます。typeof演算子は、基本的にプリミティブ型またはオブジェクトかを判別するものです。typeof nullが"object"となるのは、歴史的経緯のある仕様のバグです。本来は、nullと出力されるべきです。
typeof演算子
console.log(typeof true);
console.log(typeof 42);
console.log(typeof 9007199254740992n);
console.log(typeof "JavaScript");
console.log(typeof Symbol("シンボル"));
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof ["配列"]);
console.log(typeof { "key": "value" });
console.log(typeof function() {});
リテラル表現を持つプリミティブ型①:真偽値（Boolean）
真偽値にはtrueとfalseのリテラルがあり、trueとfalseの値を返します。
true;
false;
リテラル表現を持つプリミティブ型②:数値（Number）
数値には42のような整数リテラルと3.14159のような浮動小数点数リテラルがあります。
整数リテラルには次の4種類があります。
console.log(1);
console.log(10);
console.log(255);
- 2進数:0bからはじまり、数値の0と1で表現される2進数リテラルは、ビットを表現するのによく利用されています。 bは2進数を表すbinaryを意味しています。
console.log(0b1111);
console.log(0b10000000000);
- 8進数: 0o（または0O）から始まり、0から7までの数字の組み合わせで表現される。ファイルのパーミッションを表現するのによく利用されます。
console.log(0o644);
console.log(0o777);
- 16進数: 0xからはじまり、0から9までの数字とaからfまたはAからFのアルファベットの組み合わせで表現されます。文字のコードポイントやRGB値の表現などに利用されています。
console.log(0xFF);
console.log(0xff);
console.log(0x30A2);
.123;
2e8;
上記を含む数値を浮動小数点リテラルとしてみなします。
リテラル表現を持つプリミティブ型③: [ES2020] BigIntとは？
bigint型は、数値型よりも大きな整数を扱えるプリミティブ型です。
bigint型のリテラルは整数値の末尾にnをつけて書きます。
サバイバルTypeScript
- 数値リテラルが正確に扱える数値の最大値は253-1（2の53乗から1引いた値）です。
- 数値リテラルで253-1（9007199254740991）よりも大きな値を表現したり計算すると間違った結果となる場合があります。
- その問題を解決するためにES2020でBigIntという新しい整数型のデータ型とリテラルが追加されました。
- BigIntでは253-1（9007199254740991）よりも大きな整数を正しく表現できます。
console.log(1n);
console.log(9007199254740992n);
1.2n;
[ES2021] Numeric Separatorsとは？
ES2021から、数値リテラル内の区切り文字としてを追加できるNumeric Separatorsがサポートされています。 Numeric Separatorsは、数値リテラル内では区切り文字としてが追加できます。
1_000_000_000_000;
リテラル表現を持つプリミティブ型④: 文字列（String）
文字列リテラル共通のルールとして、同じ記号で囲んだ内容を文字列として扱います。 文字列リテラルとして次の3種類のリテラルがありますが、その評価結果はすべて同じ"文字列"になります。
""または、''で囲んだ範囲が文字列リテラルになります- "（ダブルクォート）と'（シングルクォート）、バッククォートの3種類どちらで記述してもまったく同じ意味として評価されます。
console.log("文字列");
console.log('文字列');
console.log(`文字列`);
ダブルクォートとシングルクォート
- "（ダブルクォート）と'（シングルクォート）はまったく同じ意味となります。
- もちろん、評価結果も同じです。
- シングルクォートとダブルクォートの文字列リテラルに改行を入れるには、エスケープシーケンスを使わないと構文エラーになってしまいます。
'8 o\'clock';
"8 o'clock";
"複数行の
文字列を
入れたい"; // => SyntaxError: "" string literal contains an unescaped line break
"複数行の\n文字列を\n入れたい";
[ES2015] テンプレートリテラル
テンプレートリテラルは、`（バッククォート）で囲んだ範囲を文字列とするリテラルです。
- テンプレートリテラルでは、複数行の文字列を改行記号のエスケープシーケンス（\n）を使わずにそのまま書くことができます。
`複数行の
文字列を
入れたい`;
- テンプレートリテラル内で${変数名}と書いた場合に、その変数の値を埋め込むことができます。
const str = "文字列";
console.log(`これは${str}です`);
リテラル表現を持つプリミティブ型⑤:nullリテラル
nullリテラルはnull値を返すリテラルです。 nullは「値がない」ということを表現する値です。
const foo = null;
console.log(foo);
true、false、nullなどはグローバル変数ではなくリテラルであるため、同じ名前の変数を定義することはできません。 リテラルは変数名として利用できない予約語のようなものであるため、再定義しようとすると構文エラー（SyntaxError）となります。
- true、false、nullは、リテラルとして定義されているため、変数名として利用できない予約語に設定されています。
リテラル表現が用意されているオブジェクト①: オブジェクトリテラル
オブジェクトはあらゆるものの基礎となります。 そのオブジェクトを作成する方法として、オブジェクトリテラルがあります。 オブジェクトリテラルは{}（中カッコ）を書くことで、新しいオブジェクトを作成できます。
オブジェクトリテラルはオブジェクトの作成と同時に中身を定義できます。 オブジェクトのキーと値を:で区切ったものを {} の中に書くことで作成と初期化が同時に行えます。
キー名には、文字列またはSymbolを指定し、値にはプリミティブ型の値からオブジェクトまで何でも入れることができます。
- オブジェクトリテラル
{}を使って、オブジェクトを作成することができます。
- オブジェクト自体は、キーと値の組み合わせで記述していきます。
const obj = {};
const obj = {
"key": "value"
};
- オブジェクトが持つキーのことをプロパティ名と呼びます。
- プロパティを参照するには、.（ドット）でつないで参照する方法と、 []（ブラケット）で参照する方法があります。
const obj = {
"key": "value"
};
console.log(obj.key);
console.log(obj["key"]);
リテラル表現が用意されているオブジェクト②: 配列リテラル
配列リテラルは[と]で値をカンマ区切りで囲み、その値を持つArrayオブジェクトを作成します。 配列（Arrayオブジェクト）とは、複数の値に順序をつけて格納できるオブジェクトの一種です。
配列は0からはじまるインデックス（添字）に、対応した値を保持しています。 作成した配列の要素を取得するには、配列に対してarray[index]という構文で指定したインデックスの値を参照できます。
const emptyArray = [];
const array = [1, 2, 3];
console.log(array[0]);
console.log(array[1]);
JavaScriptは正規表現をリテラルで書くことができます。 正規表現リテラルは/（スラッシュ）と/（スラッシュ）で正規表現のパターン文字列を囲みます。
- /（スラッシュ）と/（スラッシュ）で正規表現のパターン文字列を囲むと正規表現リテラルとして表現できます。
- 実際に囲まれている部分は、正規表現のパターン文字列として認識されます。
const numberRegExp = /\d+/;
console.log(numberRegExp.test("123"));
プリミティブ型とオブジェクト
- 真偽値（Boolean）、数値（Number）、文字列（String）などのプリミティブ型はそれぞれリテラル以外にオブジェクトとして表現する方法もあります。
- それは、ラッパーオブジェクトを使う方法です。
- 本来オブジェクト型でないプリミティブ型の値(undefined と null を除く)をそれぞれ対応したラッパーオブジェクトで包んであげることで、あたかもオブジェクトのようにプロパティを参照したりメソッドを実行したりすることができるようになります。
- ラッパーオブジェクトは、new演算子と対応するコンストラクタ関数を利用して作成します。
- しかし、プリミティブ型の値は、必要に応じて自動的に対応するラッパーオブジェクトに変換されます。
- そのため、明示的にラッパーオブジェクトを作成する処理を記述する必要はありません。
- ラッパーオブジェクトのメソッドやプロバティを使用する際は、プリミティブ型のデータに対して直接メソッドを呼び出したりプロパティを参照するようにしましょう。
new演算子を使って、ラッパーオブジェクトを作成する場合(非推奨)
const str = new String("文字列");
console.log(typeof str);
console.log(str.length);
ラッパーオブジェクトに自動的に変換される仕組みを利用して、直接プリミティブ型の値にラッパーオブジェクトのメソッドやプロパティを使用する場合(推奨)
const str = "文字列";
console.log(typeof str);
console.log(str.length);
ラッパーオブジェクトとプリミティブ型
参照
JSPrimer
ミュータブルな型とイミュータブルな型の相違を知ろう
JavaScriptでイミュータブルなプログラミングをする
動的言語と静的言語の違い
Mutable (ミュータブル)
typeof演算子
サバイバルTypeScript
ラッパーオブジェクトとプリミティブ型
