Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

A85bfbcb7db07e936c0125487e7799fa?s=128

Kotaro Chiba

August 29, 2020
Tweet

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