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

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