JavaScriptのデータ型一覧を押さえよう

目次

はじめに

JavaScriptが扱うことができる主なデータ型を一覧にしました。
JavaScriptはデータ型には寛容であるらしいのですが、細かなデータの挙動が気になったので備忘録としてまとめました。

JavaScriptが扱うことができる主なデータ型

分類 データ型 概要
基本型 数値型(number) 123,1444など
文字列型(string) "kuma", ‘super’
真偽型(boolean) true,false
シンボル型 シンボルを表す。ES2015から
特殊(null/undefind) 値がない,未定義
参照型 配列(array) データの入れ物(順番)
オブジェクト(object) データの入れ物(名前付き)
関数(function) 処理の入れ物

参照型に関して

例えば配列のオブジェクトであるarrayオブジェクトは参照型です。
参照型の変数はメモリのアドレスに参照値を格納しておく動作をします。
値渡しはその値そのものの情報を別の変数に渡していて、参照渡しはメモリ上のどこを参照しているかの情報を別の変数に渡しているかということです。

JavaScriptの参照型に関しては下記の記事が参考になりそうです!
JavaScriptに参照渡し/値渡しなど存在しない

上記の記事をざっと書くと何が起きているのかというと

var a = "test"
var b = "super"
var c = [1, 2, 3]
var d = c
変数名 メモリのアドレス
a S1 "test"
b S2 "super"
c S3 [1, 2, 3]
d S3 ※上の配列を参照している

ということです。
arrayオブジェクトはは参照型のデータなので、変数cと変数dは同じarrayオブジェクトの[1, 2, 3]を参照しています。

# dのインデックス番号0を上書きする
d[0] = 4;
=>[4, 2, 3]

#cの中身を見てみる。
c
=>[4, 2, 3]

以上の例では参照型のデータの内容を確認しています。
変数dとcは同じarrayオブジェクトを参照しているので、どちらかを書き換えたらもう一つの返り値も変わっているのがわかると思います。

変数とは?

データの格納先はメモリ上のアドレスです。(Rubyなどはobject_idメソッドなどを使うと格納先がわかる。)
そのアドレスに人間がわかりやすく使えるように名前をつけておく必要があります。
つまり変数とはデータの格納先につけるラベルです!!

リテラルとは?

リテラルとは、データ型に格納できる値そのものです!

リテラル 中身
number(数値リテラル) 1や3などの数字。細かく定義すると整数リテラル(1や3)や浮動小数点リテラル(0.4や11.5)などがあります。
string(文字列リテラル) ”super”, ‘engineer’などのダブルクォーテーションやシングルクォーテーションで囲っている文字のこと
配列リテラル ["super", "engineer", "kuma"]などの配列そのもの
オブジェクトリテラル {name: "super", name2: "engineer", name3: "kuma"}といった連想配列
function(関数リテラル) function(){}といった関数
undefinded(未定義) ある変数の値が定義されていないことを表すものです。
null(ヌル) 該当する値がないことを意味します。

undefindedとnullの違い

忘れがちなのでアウトプットがてらどういう違いがあるか整理しました。
undefinded

  • ある変数が宣言済みであるものの値を与えられていない。
  • 未定義のプロパティを参照しようとした。
  • 関数で値が返されていなかった。

null

  • 空である。

undefindedは関数リテラルでreturnで値を返していないときなどによく発生しますが、
自分で空だと定義した意思があるときは「null」そうでないときは「undefinded」といった形でしょうか!

まとめ

JavaScriptのデータ型はあまり意識しないで書くこともできますが、ES2015から様々なオブジェクトが追加されましたし、基本の型を押さえておくことで意図しない挙動を防ぐことができます。
※何度????となったかわからないですw

よかったらシェアしてね!
目次
閉じる