【javascript】データ型・リテラルを✅
人狼オールとかいう学生みたいなことをしてしまって狼というより眠気に襲われて体調が頗る悪い23期中野昴です
.
宣伝
ZEROKENをリリースいたしました!
サイトURL
簡単にお酒の強さを測る事ができて、アルハラを予防する事ができるアプリになります!
自分に合ったお酒の飲み方の順番を見つけて自分のペースで飲み会を乗り切ってください!
さて、今回はjavascriptの基本を理解するために、データ型とリテラルに関して学習していきたいと思います。
データ型とは
文字列、数値、真偽値といった値の型のこと**。**
javascriptは動的型付け言語であるため変数の型
静的型付け言語とは
事前にコンパイルを行うことで、プログラムの実行時には、型の整合性チェックの必要量が少なくなるというメリットを持つ。C、JAVA、COBOLのような高級言語も静的型付け言語である。処理が早い。
動的型付け言語とは
プログラムを書くときに変数や関数に何が入ってくるかというのが特に決まっていない形を指している。
要は、プログラマーは、変数や関数になんとなく、こんな感じのデータが入るであろうということを予測するだけで、どんな値が入るかはコーティングには影響なく、実行時に多少影響するぐらいで、型の管理はインタプリタやコンパイラが実行時にしてくれるという形態のことを言っている。
データ型は大きくプリミティブ型とオブジェクトの2つに分類されている。
プリミティブ型
真偽値や数値などの基本的な値の型のことです。
下記のような特徴を持つ
- 一度作成したらその値自体を変更できないというイミュータブル(immutable)の特性
- JavaScriptでは、文字列も一度作成したら変更できないイミュータブルの特性を持ち、プリミティブ型の一種として扱われます。
オブジェクト
ざっくりプリミティブ型ではないものをオブジェクトという。
複数のプリミティブ型の値またはオブジェクトからなる集合を指す。
下記のような特徴を持つ。
- 一度作成した後もその値自体を変更できるためミュータブル(mutable)の特性を持っている。
- 値そのものではなく値への参照を経由して操作される。そのため、参照型のデータとも言われている。
さらにデータ型は、7つのプリミティブ型とオブジェクトに分類する事ができる。
- プリミティブ型(基本型)
- 真偽値(Boolean):
true
またはfalse
のデータ型 - 数値(Number):
42
や3.14159
などの数値のデータ型 - 巨大な整数(BigInt): ES2020から追加された
9007199254740992n
などの任意精度の整数のデータ型 - 文字列(String):
"JavaScript"
などの文字列のデータ型 - undefined: 値が未定義であることを意味するデータ型
- null: 値が存在しないことを意味するデータ型
- シンボル(Symbol): ES2015から追加された一意で不変な値のデータ型
- 真偽値(Boolean):
- オブジェクト(複合型)
- プリミティブ型以外のデータ
- オブジェクト、配列、関数、正規表現、Dateなど
リテラルとは
リテラルとは、直接データ型に格納できる値のこと。
今まで聞いたことはあるがそれぞれの違いをあまり理解していなかった、配列,オブジェクト.文字列などは語尾にリテラルという言葉が省略されていた。
次の4つのプリミティブ型は、それぞれリテラル表現を持っている。
- 真偽値
- 数値
- 文字列
- null
また、オブジェクトの中でもよく利用されるものに関してはリテラル表現が用意されている。
- オブジェクト
- 配列
- 正規表現
上から順番に理解していきたい。
真偽値(Boolean)
真偽値にはtrue
とfalse
のリテラルがある。
それぞれはtrue
とfalse
の値を返すリテラルで、見た目どおりの意味となっている。
true; #=> true
false; #=>false
数値(Number)
数値には42
のような整数リテラルと3.14159
のような浮動小数点数リテラルがある。
整数リテラル
進数の種類が4つある。
浮動小数点数をリテラルとして書く場合には、次の2種類の表記が利用できる。
3.14159
のような.
(ドット)を含んだ数値2e8
のようなe
またはE
を含んだ数値
文字列(String)
文字列リテラル共通のルールとして、同じ記号で囲んだ内容を文字列として扱います。
文字列リテラルとして次の3種類のリテラルがあり、その評価結果はすべて同じ"文字列"
になる。
console.log("文字列"); // => "文字列"
console.log('文字列'); // => "文字列"
console.log(`文字列`); // => "文字列"
シングルクォート、ダブルクォート
''、""で囲まれた範囲を文字列とするリテラルのこと。
改行の代わりに改行記号のエスケープシーケンス(\\n
)を使うことで複数行の文字列を書くことができる。
"明日の\\n晩御飯は\\nカレー";
#明日の
#晩御飯は
#カレー
バックスラッシュを入れてエスケープをする必要がある。
'8 o\\'clock'; // => "8 o'clock"
テンプレートリテラル
テンプレートリテラルは、```(バッククォート)で囲んだ範囲を文字列とするリテラルのことを指す。
複数行の文字列も```で囲めば、そのまま書くことができる。
`明日の
晩御飯は
カレー`; // => "複数行の\\n文字列を\\n入れたい"
${}で囲むことで、文字通りテンプレートとして使用することもできる
const str = "文字列";
console.log(`これは${str}です`); // => "これは文字列です"
nullリテラル
Reference Errorを吐き出す。
const foo = null;
console.log(foo); // => null
オブジェクトリテラル
javascriptで基本となるリテラル
{}
(中カッコ)を書くことで、新しいオブジェクトを作成できる。
const case = {}; # 中身が空のオブジェクトを作成
キー名には、文字列またはSymbolを指定し、値にはプリミティブ型の値からオブジェクトまで何でも入れることができる。
const case = {
"sake": "highball"
};
この場合、 case
というオブジェクトはsake
というプロパティを持っていると言える。
case
のsake
プロパティを参照するには、.
(ドット)でつないで参照する方法と、 []
(ブラケット)で参照する方法がある。
const case = {
"sake": "highball"
};
// ドット記法
console.log(case.sake); // => "highball"
// ブラケット記法
console.log(case["sake"]); // => "highball"
配列リテラル
オブジェクトリテラルと並んで、よく使われるリテラルとして配列リテラルがある。
[
と]
で値をカンマ区切りで囲み、その値を持つArrayオブジェクトを作成するという特徴を持つ。
ちなみに 配列(Arrayオブジェクト)とは、複数の値に順序をつけて格納できるオブジェクトの一種のこと。
const alcohol_cases = []; // 空の配列を作成
const alcohols = [1, 2, 3]; // 値を持った配列を作成
配列は0
からはじまるインデックス(添字)に、対応した値を保持している。
作成した配列の要素を取得するには、配列に対してarray[index]
という構文で指定したインデックスの値を参照できる。
const sake = ["highball:0", "beer:1", "wine:2"];
// 0番目の要素を参照
console.log(sake[0]); // => "highball:0"
// 1番目の要素を参照
console.log(sake[1]); // => "beer:1"
正規表現リテラル
JavaScriptは正規表現をリテラルで書くことができる。
/
(スラッシュ)と/
(スラッシュ)で正規表現のパターン文字列を囲み、正規表現リテラルを作成している。
次のコードでは、数字にマッチする特殊文字である\\d
を使い、1文字以上の数字にマッチする正規表現をリテラルで表現している。
const numberRegExp = /\\d+/; // 1文字以上の数字にマッチする正規表現
// `numberRegExp`の正規表現が文字列"123"にマッチするかをテストする
console.log(numberRegExp.test("123")); // => true
まとめ
- javascriptは動的型付け言語であり、データ型を持っている。
- データ型はオブジェクトとプリミティブ型に分かれている。
- 今までなんとなく使ってきた、配列や文字列という言葉はリテラルのことだった。