本記事では、JavaScriptで扱うことが出来るデータ型を紹介します。
それぞれのデータ型についての詳細は、別の記事で紹介していこうと思います。
本記事で学ぶこと
- 数値型
- 文字列型
- 論理型
- null
- undefined
- 配列
- オブジェクト
- Map
- Set
- 関数
数値型
数値型は、整数と浮動小数点を扱う型です。
const price = 1000; // 整数
const temperature = 26.6; // 浮動小数点
数値型は、以下の演算子を使って、計算することが出来ます。
演算 | 演算子 | 例 |
加算 | + | 1 + 2 => 3 |
減算 | – | 3 – 5 => -2 |
乗算 | * | 5 * 2 => 10 |
除算 | / | 10 / 5 => 2 |
剰余 | % | 10 % 3 => 1 |
前置加算(減算) | ++(–) | x = 0のとき、 ++x => 1 (x = x + 1と同じ意味) y = 0のとき、 –y => -1 (y = y – 1と同じ意味) |
console.log(1 + 2); // 3
console.log(3 - 5); // -2
console.log(5 * 2); // 10
console.log(10 / 5); // 2
console.log(10 % 3); // 1
let a = 0;
console.log(++a); // 1
let b = 0;
console.log(--b); // -1
文字列型
シングルクォート(‘)、またはダブルクォート(“)で囲むと文字列となります。
また、バッククォートで囲むとテンプレートリテラルといって、文字列の中に変数の値や計算結果を埋め込むことが出来ます。
文字列の中に値を埋め込むには、${変数名}とします。
const userName = 'yohyoh'; // シングルクォート
const country = "Japan"; // ダブルクォート
const message = `I'm ${userName}. I'm from ${country}.`; // I'm yohyoh. I'm from Japan.
論理型
論理型の値は、「true」または「false」しかありません。
主に、if文で条件分岐させる場合に使用します。
null型
null型の値は、「null」しかなく、値がないことを示す値です。
undefined型
undefined型の値は、「undefined」しかなく、値が定義されていないことを示す値です。
宣言しただけで値を代入していない変数は、「undefined」となります。
let userName;
console.log(userName); // undefined
配列型
配列は、複数の値をまとめて1つのデータとして扱うことが出来ます。
配列の要素には、インデックスを使用してアクセス出来ます。
const languages = ['JavaScript', 'Rust', 'PHP'];
console.log(languages); // ['JavaScript', 'Rust', 'PHP']
console.log(languages[0]); // 'JavaScript'
console.log(languages[1]); // 'Rust'
console.log(languages[2]); // 'PHP'
オブジェクト型
オブジェクト型も配列と同じく、複数の値をまとめて1つのデータとして扱うことが出来ます。
配列と異なる点は、要素ひとつひとつがプロパティ名(キー名)と値のセットで、要素へのアクセスにはインデックスではなく、プロパティ名を指定することです。
const book = {
title: 'これからのJavaScriptの教科書',
price: 3200,
};
console.log(book.title); // 'これからのJavaScriptの教科書'
console.log(book.price); // 3200
Map型
Map型は、オブジェクト型にとても似ていて、要素はキーと値のセットです。
要素には、get(キー名)でアクセス出来ます。
Mapとオブジェクトの違いについては、別の記事で紹介したいと思います。
const protocols = new Map([
['DHCP', 'Dynamic Host Configuration Protocol'],
['HTTPS', 'Hypertext Transfer Protocol Secure'],
['HTTP', 'Hypertext Transfer Protocol'],
]);
console.log(protocols.get('HTTPS')); // Hypertext Transfer Protocol Secure
Set型
Set型も配列同様、複数の値を保持できますが、重複する要素を持つことが出来ません。
また、配列、オブジェクト、Mapのように各要素にインデックスやキー名を使ってアクセスすることは出来ません。
const prefectures = new Set([
'東京',
'神奈川',
'千葉',
'埼玉',
]);
console.log(prefectures.has('東京')); // true
console.log(prefectures.has('北海道')); // false
console.log(prefectures.size); // 4
関数型
JavaScriptでは、関数もひとつのデータとして扱うことが出来るので、他のデータ型同様変数に代入したり、関数の引数に関数を渡したりすることが出来ます。
function calculateAmount(price, taxRate) {
return price + price * taxRate;
}
const price = 1000;
const taxRate = 0.1;
const amount = calculateAmount(price, taxRate);
console.log(amount); // 1100
const calculator = calculateAmount; // 変数に代入
console.log(calculator(price, taxRate)); // 関数のように呼び出すことが出来る
まとめ
今回は、JavaScriptで扱うことが出来るデータの型をサラッと紹介しました。
それぞれのデータ型についての詳細は、今後記事にしていこうと思うので、参考にしてみてください。
以上で、今回は終了です。
記事を読んでいただきありがとうございました。
読んだ感想や疑問、ご指摘などコメントしていただけると幸いです。
次回は、数値型についてもう少し詳しく紹介していきます。