JavaScriptのデータ型について

まずはプリミティブ型について説明します。

数値 (number)

1, -1, 3.1415

など、整数値や小数を扱う型。

文字列 (string)

”Hello”, “1”

など、ダブルコーテーション、シングルコーテーション、バッククオート（テンプレートリテラル）のどれかで囲む。バッククオートの場合は${}の中で変数が利用できます。

let name = "Ryota";
let age = 34;

let message = `私の名前は${name}です。年齢は${age}才です。`;

真偽値 (boolean)

true(真)とfalse(偽)がある。

let isSunny = true;   // ブール値
let isRaining = false;  // 別のブール値

console.log(isSunny);  // 出力: true
console.log(isRaining);  // 出力: false

// これらのブール値は条件文で使用できます
if (isSunny) {
    console.log("サングラスを着用すべきです！");
} else {
    console.log("サングラスを必要としないかもしれません。");
}

JavaScriptの値はすべて、trueとして判定されるtruthyな値か、falseとして判定されるfalsyな値かになる。falsyな値は、false,0,undefined,null,NaNなどがあり、他はtrutyな値として判定されます。
※falsyな値として上記のほかに、-0,0n,””(空文字),document.allがあります。

null

let string = null;
console.log(string); // 出力: null 

値が存在しないという意味。ECMAScriptの仕様では、開発者が意図的に設定しない限りnullになることはありません。※純粋なECMASｃriptでない、DOMAPIのメソッドなどはnullを返すものがあります。

let element = document.getElementById("nonexistentId");
console.log(element); // 出力: null (ID "nonexistentId" を持つ要素が存在しない場合)

undefined

let string = “”;
console.log(string); // 出力: undefined

ｎullと同じく値が存在しないという意味。ＥCMASｃriptで値が定義されていないときはnullではなく、undefineとなります。

null == undefined // 出力: true
null === undefined // 出力: false

シンボル (symbol)

let Sym1 = Symbol("Sym")
let Sym2 = Symbol("Sym")
console.log(Sym1 === Sym2) // 出力: false

Symbol関数を使用して定義します。シンボル型は一意の値になるのが特徴です。これはES6(ES2015)で作成された新しい仕様です。

JavaScriptで使用できる複合データ型は以下の通りです。

配列 (array)

const ary = [
  10, // 数値
  "Hello, world!", // 文字列
  true, // ブール値
  { name: "John Doe", age: 30 }, // オブジェクト
  [1, 2, 3], // 配列
  null, // null
  undefined, // undefined
  function(a, b) { return a + b; }, // 関数
]

配列にはすべてのデータ型を入れることができます。
※上記配列ではシンボル型は省略しました。
以下のように使用します。

ary[0]; // 出力: 10
ary[1]; // 出力: Hello world!

オブジェクト (object)

let obj = {
  number: 10, // 数値
  string: "Hello, world!", // 文字列
  boolean: true, // ブール値
  object: { name: "John Doe", age: 30 }, // オブジェクト
  array: [1, 2, 3], // 配列
  null: null, // null
  undefined: undefined, // undefined
  function: function(a, b) { return a + b; }, // 関数
};

オブジェクトにもすべての値を入れることができます。以下のように使用できます。

obj.number; //10
obj.string; //"Hello, world"

関数 (function)

function sumNumber(num1, num2) {
  return num1 + num2;
}

console.log(sumNumber(2,3)); // 出力: 5

上記は数字を２つ受け取って返す関数です。
ES2015からアロー関数という書き方もできるようになりました。

const sumNumber = (num1, num2) => {
  return num1 + num2;
}

console.log(sumNumber(2, 3)); // 出力: 5

また、アロー関数が１行で記載出来る場合は”{}”とreturnを省略できます。

const sumNumber = (num1, num2) => num1 + num2;

console.log(sumNumber(2, 3)); // 出力: 5