JavaScriptのデータ型と型変換 — プリミティブ・typeof・オブジェクトの違い

const name = 'Taro'; // string（プリミティブ）
const age = 25; // number（プリミティブ）
const user = { name: 'Taro', age: 25 }; // object（オブジェクト）
const items = ['book', 'pen']; // object（配列もオブジェクト）

typeof 'Taro'; // "string"
typeof 25; // "number"
typeof { name: 'Taro' }; // "object"
typeof ['book', 'pen']; // "object"
typeof function () {}; // "function"

const message = 'こんにちは';
const url = `https://example.com/users/${userId}`;

const count = 10;
const rate = 0.08;
const total = 1200 * (1 + rate);

const id = 9007199254740993n;
typeof id; // "bigint"

1n + 1; // TypeError
1n + BigInt(1); // 2n

const isLoggedIn = true;
 
if (isLoggedIn) {
  console.log('マイページを表示');
}

let name;
console.log(name); // undefined
 
const user = {};
console.log(user.email); // undefined

function logMessage() {
  console.log('hello');
}
 
const result = logMessage(); // undefined

let selectedUser = null;
 
// ユーザーを選択したらオブジェクトが入る
selectedUser = { id: 1, name: 'Taro' };

const a = Symbol('id');
const b = Symbol('id');
 
console.log(a === b); // false

typeof 'hello'; // "string"
typeof 123; // "number"
typeof 123n; // "bigint"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Symbol('id'); // "symbol"
typeof {}; // "object"
typeof []; // "object"
typeof function () {}; // "function"

typeof null; // "object"

const value = null;
 
value === null; // true
typeof value === 'object'; // true だが、null判定としては不適切

const list = [1, 2, 3];
 
typeof list; // "object"
Array.isArray(list); // true

let a = 1;
let b = a;
 
b = 2;
 
console.log(a); // 1
console.log(b); // 2

let x = 'hello';
let y = x;
 
y = 'bye';
 
console.log(x); // "hello"
console.log(y); // "bye"

const userA = { name: 'Taro' };
const userB = userA;
 
userB.name = 'Hanako';
 
console.log(userA.name); // "Hanako"
console.log(userB.name); // "Hanako"

const a = { id: 1 };
const b = { id: 1 };
const c = a;
 
console.log(a === b); // false
console.log(a === c); // true

[1, 2, 3] === [1, 2, 3]; // false

'1' + 2; // "12"
'5' - 2; // 3
true + 1; // 2

1 + 2; // 3
'1' + 2; // "12"
2 + '1'; // "21"

const price = '1000';
const tax = 100;
 
price + tax; // "1000100"
Number(price) + tax; // 1100

1 == '1'; // true
1 === '1'; // false
 
'' == false; // true
'' === false; // false
 
null == undefined; // true
null === undefined; // false

Boolean(''); // false
Boolean('hello'); // true
Boolean([]); // true
Boolean({}); // true

Number('123'); // 123
Number('3.14'); // 3.14
Number(''); // 0
Number('hello'); // NaN
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN

const input = '1200';
const price = Number(input);
 
if (Number.isNaN(price)) {
  console.log('数値を入力してください');
}

String(123); // "123"
String(true); // "true"
String(false); // "false"
String(null); // "null"
String(undefined); // "undefined"

Boolean('hello'); // true
Boolean(''); // false
Boolean(1); // true
Boolean(0); // false
Boolean(null); // false
Boolean([]); // true

parseInt('123', 10); // 123
parseInt('123px', 10); // 123
parseInt('3.14', 10); // 3
parseInt('hello', 10); // NaN

parseFloat('3.14'); // 3.14
parseFloat('3.14px'); // 3.14
parseFloat('hello'); // NaN

Number('123px'); // NaN
parseInt('123px', 10); // 123
parseFloat('12.5px'); // 12.5

typeof NaN; // "number"
typeof Infinity; // "number"

Number('hello'); // NaN
0 / 0; // NaN
Math.sqrt(-1); // NaN

NaN === NaN; // false

Number.isNaN(NaN); // true
Number.isNaN(Number('hello')); // true
Number.isNaN('hello'); // false

1 / 0; // Infinity
-1 / 0; // -Infinity
Number.MAX_VALUE * 2; // Infinity

Number.isFinite(100); // true
Number.isFinite(Infinity); // false
Number.isFinite(NaN); // false
Number.isFinite('100'); // false

typeof null; // "object"

'' == false; // true

null == undefined; // true
null === undefined; // false

value === null || value === undefined;

Boolean([]); // true
Boolean({}); // true

const items = [];
 
if (items.length === 0) {
  console.log('空です');
}

Number(''); // 0

const input = '';
 
if (input === '') {
  console.log('未入力です');
} else {
  const value = Number(input);
}

const original = {
  profile: { name: 'Taro' },
};
 
const copied = { ...original };
copied.profile.name = 'Hanako';
 
console.log(original.profile.name); // "Hanako"