JavaScript を書き始める前に知っておきたい JavaScript のこと #04

JavaScript のデータ型を見てみようという内容。今回はプリミティブ型の解説です。

Transcript

1. JavaScript を書き始める前に知 っておきたい JavaScript のこ と #04 Kanazawa.js Remote Meetup #05 千葉 弘太郎 1 1
2. 千葉 弘太郎（ちば こうたろう） Kotaro Chiba Twitter: @ur_uha Github: uruha Work: DMM.com LLC 2 2
3. 前回 JavaScript を書き始める前に知っておきたい JavaScript のこと #03 JavaScript の実⾏順に迫る イベントループ の仕組み 3 3
4. 今回 JavaScript の データ型 について知ろう（プリミティブ型 編） ！ 4 4
5. JavaScript は 動的型付け の⾔語 5 5
6. let mutableVar = 'Hello'; // => String Type // substitution mutableVar = 42; // => Number Type // substitution mutableVar = true; // => Boolean Type 6 6
7. Mutable な変数を定義した場合、 動的にその変数の型を変更することができる。 7 7
8. ＿⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈＿ ＞ JavaScript にも型はあります ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 8 8
9. 型の種類 9 9
10. プリミティブ型 String Number Boolen Undefined Null Symbol (ES6~) BigInt (ES10~ new) Object 10 10
11. プリミティブ型 JavaScript の情報において⼀番低いレイヤの単位。 これ以上別の型には分解できません。 対局に Object 型 が存在します。 プリミティブ型の値を プリミティブ値 と⾔います。 11 11
12. プリミティブ型の紹介 12 12
13. String const str = 'Hello World :)'; 16 ビット符号なし整数値の 要素 の集合体 各要素は⽂字列の位置を指します 'Hello World :)' では最初の⽂字を index 0, 次を index 1... とする 13 13
14. Number const num = 1919; 「倍精度 64 ビット形式による IEEE 754 値」 (-(2^53-1) から 2^53-1 の間の数値) Number.MAX_SAFE_INTEGER (9007199254740991) で取得可能 『整数』というわけではないでないことに注⽬！ これより⼤きい数値を扱いたい場合はどうすれば... 14 14
15. BigInt const bigNum = 2n ** 54n; // 18014398509481984n const morebiggerNum = bigNum + 100n; // 18014398509482084n ES10(ES2020) で策定 Number.MAX_SAFE_INTEGER 以上の数値を安全に扱える Number と混同して仕様することができない 15 15
16. Boolean const thisIsTrue = true; const thisISFalse = false; 16 16
17. Undefined const unDefined; console.log(unDefined); // undefined const obj = {}; console.log(obj.foo); // undefined 以下の時に⾃動的に割り当てられます。 . 宣⾔されている変数に値が割り当てられていない . 任意のオブジェクトのプロパティが定義されていない 17 17
18. Null const nullnull = null; undefined と違い、明⽰的に値を割り当てていないことを宣 ⾔します。 また、その変数などは今後別の値が割り当てられることを⽰唆 していることも意味します。 18 18
19. Symbol const newSymbol = Symbol('new symbol'); newSymbol.toString(); // => 'Symbol(new symbol)' newSymbol.description // => 'new symbol' const preSymbol = Symbol('new symbol'); newSymbol === preSymbol // => false Symbol を宣⾔する値は、固有のID(シンボル)を持つ値とし て区別されます。 上記のようにシンボルには任意の description を宣⾔でき ますが、内容が同じでも⼀度作成したシンボルは固有のものと して存在するため⽐較をしても false が返ります。 19 19
20. 値の⽣成 リテラルとコンストラクタ関数の宣⾔で⾏えます。 コンストラクタ関数に new 演算⼦をつけて宣⾔すると Object型になるので注意しましょう。 20 20
21. // Literal const literalNum = 'stringggggggggg'; // Constractor const constractorNum = String('stringggggggggg'); // Object const newString = new String('stringggggggggg'); typeof literalNum // => string typeof constractorNum // => string typeof newString // => object 21 21
22. 値の⽐較 プリミティブ型の値は「値そのもの」を⽐較します。 ⽐較には 同値 等値 の2種類が存在します。 22 22
23. // 同値 1 === 1 // true 1 === '1' // false 1 === new Number(1) // false null === undefined // false // 等値 1 == 1 // true 1 == '1' // true 1 == new Number(1) // true null == undefined // true 同値 : 型と値、両⽅を⽐較 等値 : 値を⽐較し型はスルーする 23 23
24. まとめ JavaScript のデータ型にはプリミティブ型とObject型があ る プリミティブ型は現在7種類 型から値を⽣成するにはリテラルとコンストラクタ関数を⽤ いて⾏える プリミティブ値は「値そのもの」を⽐較できる 同値 等値 の2種類の⽐較ができる 24 24
25. 次回 データ型をもう少し詳しくやっていき！ 25 25