Zenn
🧬

JavaScriptを一から理解する: データ型について

2022/02/01に公開
JavaScript
tech

はじめに

はじめまして、Doxperと申します。
今回はJavaScriptにおけるデータ型について学んでいきます。

この記事でできるようになること

  1. データ型とは何か理解することができる。
  2. JavaScriptの基本的なデータ型について理解することができる。

対象読者

  • エンジニアを目指している同士
  • JavaScriptの基礎を身につけたい方
  • 過去にプログラミング学習に挫折した方
  • プログラミング言語は他に触ったことがない方

JavaScript Data Types

データ型とは簡単に説明すると、データの種類です。
JavaScriptでは'apple'のような文字列から1,10,100のような数値。
true, falseなどの論理値など様々なデータ型が存在します。

プログラミング言語にはデータ型を強く意識するものも存在すれば、そうでないものであります。
JavaScriptは後者にあたり、データ型についてはそこまで意識する必要がありません。
このようなプログラミング言語のことを一般的に動的型付け言語と呼ばれたりします。
一方、データ型について強く意識する必要のある言語のことを静的型付け言語と呼びます。

では早速例に移ります

dataTypes.js
const foo = 10; 
const bar = 'Zenn';

上記の例ではfooは数値型(number), barは文字列型(string)となります。

JavaScriptの基本的なデータ型

データ型 概要 例
String シングルまたはダブルクォートで囲まれた0個以上の文字列を表します。文字列型と呼ばれます。 'apple', "Hello, Zenn"など
Number 整数または浮動小数点数を表します。数値型と呼ばれます。 5, 3.14 など
Boolean true(真)/false(偽)。真偽型と呼ばれます。 true, false
null,undefined 値が未定義、空であることを表します。特殊型と呼ばれます。 let foo;
Symbol シンボルを表します。シンボル型と呼ばれます。 let foo = Symbol('hello'); など
Object キーとバリューから成るデータの集まりを表します。オブジェクトと呼ばれます。 let songs = {};

String

stringはテキストを格納するために使われます。
JavaScriptでは''シングルクォートまたは、""ダブルクォートで囲む必要があります。
以下はいずれも正しいコードです。

string.js
//文字列型
const foo = 'apple';
const bar = "banana";

Number

Numberは整数と浮動小数点数(小数、指数)を格納するするために使われます。
以下はいずれも正しいコードです。

number.js
//数値型
const number1 = 100;
const number2 = 3.14;

Boolean

Booleanはtrueかfalseの２つの値のうちの1つを表します。
以下はいずれも正しいコードです。

boolean.js
//数値型
const bool1 = true;
const bool2 = false;

null, undefined

undefinedは変数の値が定義されていない値を表します。
変数が宣言されていても値が定義されていなければundefinedとなります。
nullは空の値、未知の値を表す特殊な値です。

let name;
console.log(name); // => undefined

明示的に変数値をundefinedにすることも可能です。

let name = undefined;
console.log(name); // => undefined

以下はnullの例です

const name = null;

null vs undefined

nullとundefinedは一見同じように見えるかもしれません。
しかし具体的には以下のような違いがあります。

  • undefinedは変数は宣言されているが、まだ定義されていないことを表す。
  • nullは何もないことを表すために割り当てられた値
  • nullはオブジェクト型
  • undefinedはundefined型

Symbol

symbolはJavaScriptの新しいバージョン(ES2015)から導入されました。
symbolは完全に一意（ユニーク）な識別子です。
例を見てみましょう。

const foo = Symbol('hello');
const bar = Symbol('hello');

Symbol()が返すシンボルはすべて一意であるため、すべてのシンボルは独自のIDを持っています。

const foo = Symbol('hello');
const bar = Symbol('hello');
console.log(foo === bar); // => false

上記の例であれば、foo, barともに引数として'hello'をとっていますが、falseと見なされます。

Object

Objectとはプロパティを複数集めたものの集合のことを言います。
ハッシュまたは連想配列と呼ばれる場合もあります。

// personというオブジェクトを作成
const person = {
    firstName: 'john',
    lastName: 'mayer',
    age: 44,
};

JavaScriptのオブジェクトに関しては、別の記事で詳しく紹介します。

typeof演算子

変数の型を調べるには,typeof演算子を使います。
以下が使用例です。

const fruit = 'banana';
typeof(fruit); // => 'string'

const num = 1;
typeof(num); // => 'number'

const bool = true;
typeof(bool); // => 'boolean'

const foo = null;
typeof(foo) => // 'object'

おわりに

いかがでしたでしょうか？
JavaScriptの基本的なデータ型についてご説明しました。
前述した以外にもarrayやfunctionなどまだまだ重要なデータ型は存在しますが、それについては次回以降の記事でご紹介いたします。

また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

JavaScript のデータ型とデータ構造 - JavaScript | MDN
データ型とリテラル · JavaScript Primer #jsprimer
Learn JavaScript Programming
JavaScript Tutorial
山田 祥寛(2016).改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

Discussion