JavaScriptのデータ型について

2020年09月22日

フロントエンド

JavaScriptのオブジェクトについて勉強していくとデータ型について出てきたので一度ブログにまとめて整理していこうと思います。

データ型

データ型は大きく分けると、プリミティブ型(基本形)とオブジェクト型(複合型)に分けられます。

プリミティブ型とオブジェクト型は、数値や文字列自体が同じでも全く同じ値ではありません。簡単な例が以下になります。

let price1 = 10;
let price2 = 10;
let price3 = new Object(10);

console.log(price1 === price2)// 両方プリミティブ型の数値なのでtrue
console.log(price2 === price3)// price2はプリミティブ型の数値で、price3はオブジェクト型なのでfalse

変数price1と変数price2は両方プリミティブ型なのでtrue、変数price2と変数price3は変数price2がプリミティブ型で変数price3はオブジェクト型なのでfalseになっていますね。このことからお互い違う値の型ということがわかるかと思います。

プリミティブ型(基本形)

プリミティブ型についてまとめていきます。

プリミティブ型は、数値や文字列など基本的な値のことです。プリミティブ型は以下のような値になります。

  • 真偽値→trueまたはfalseのデータ型
  • 数値(Number): 数値のデータ型
  • 文字列→文字列のデータ型
  • undefined: 値が未定義であることを意味するデータ型
  • null: 値が存在しないことを意味するデータ型

プリミティブ型は「値そのもの」を保存し、操作します。簡単な例が以下になります。

// プリミティブ型の文字列を生成
var test = "test"
// 値を新しい変数に複製
var testCopy = test
// 変数testの値を変更
var test = null

console.log(testCopy)// 結果→test
console.log(test)// 結果→null

この例では、変数testの値であるtestを変数testCopyに複製します。その後に変数testの値を変更しても、変数testCopyの値は変更されずにそのままtestになります。このことからプリミティブ値は変更不可の値として保存されて、操作されていることも分かります。

オブジェクト型(複合型)

オブジェクト型は、プリミティブ値以外の値のことで、オブジェクトや配列、関数などがオブジェクト型のデータ型になります。プリミティブ型では無いものがオブジェクト型と覚えておけば問題ないようです。オブジェクトについてはまた違う記事で詳しくまとめようと思います。

ちなみにtypeof演算子を使うとデータ型を調べることができます。

console.log(typeof true);//→boolean
console.log(typeof 10); //→number
console.log(typeof "kokeblog"); //→string
console.log(typeof undefined); //→undefined
console.log(typeof null); //→object
console.log(typeof []); //→object
console.log(typeof {}); //→object
console.log(typeof function() {}); //→function

typeof nullがobjectとなってしまうのは仕様によるバグみたいですね。

まとめ

今回はデータ型についてまとめていきました。JSの勉強をしていて最初はよくわからなかったことが徐々に分かってきた感じがします。また以前学んで理解していたつもりだったものについてもより深く理解できたこともあります。新しいことを勉強しつつ、復習もしっかりやっていければと思います。

Pocket

related

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

GitHub PagesとNetlifyでポートフォリオを公開してみた

今回は無料で静的サイトを公開できるGitHub PagesとNetlifyでポートフォリオを公開してみたので手順やメリットなどについてまとめていこうと思います。下記のURLが公開したポートフォリオです

フロントエンド

2020.09.09

gulpでsassのコンパイルするための環境構築

今回は、gulpでsassをコンパイルするために環境構築したので、まとめていこうと思います。Macで環境構築したのでMacでの手順でまとめていきます。とはいえほとんどWindowsも変わらないので同じ

フロントエンド

2020.08.22

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き