【JavaScript入門】変数とデータ型

変数の基本
- varとletの違い
- メモリ領域とアドレス（番地）
変数の再代入
変数のコピー
定数
変数の命名規則
データ型

変数の基本

JavaScriptでの変数は、データを格納するためのコンテナです。変数には、数値、文字列、オブジェクト、配列など、様々なデータタイプを格納することができます。

変数を宣言するには、「var」キーワードを使用します。次のように記述します。

let 変数名;

変数に値を代入するには、変数名の後に「=」を記述し、値を記述します。

変数名 = 値;

変数を宣言し、同時に値を代入することもできます。

let 変数名 = 値;

JavaScriptは動的型付け言語であるため、変数に格納されているデータ型は、代入される値によって変化します。

let name = "山田太郎";
console.log(name); // "山田太郎"
name = 20;
console.log(name); // 20

また、「var」キーワードと「const」キーワードも変数を宣言するためのキーワードとして使用できます。

varとletの違い

varは、古いバージョンのJavaScriptで使用されていた変数宣言方法です。varは、同じ変数名で複数回宣言することができ、変数のスコープは関数スコープ、またはグローバルスコープになります。

例えば、以下のコードでは、同じ変数名で複数回宣言されています。

var x = 10;
var x = 20;
console.log(x); // 20

また、以下のコードでは、if文のブロック内で宣言された変数yは、関数スコープを持つため、if文の外でyにアクセスできます。

function test() {
  if (true) {
    var y = 10;
  }
  console.log(y); // 10
}
test();

letは、ES6以降のJavaScriptで導入された新しい変数宣言方法です。letは、同じ変数名で複数回宣言することはできません。また、letで宣言された変数のスコープは、ブロックスコープになります。

例えば、以下のコードでは、同じ変数名で複数回宣言しようとするとエラーが発生します。

let x = 10;
let x = 20; // Uncaught SyntaxError: Identifier 'x' has already been declared
console.log(x);

また、以下のコードでは、if文のブロック内で宣言された変数yは、if文の外でyにアクセスできません。

function test() {
  if (true) {
    let y = 10;
  }
  console.log(y); // Uncaught ReferenceError: y is not defined
}
test();

したがって、letはvarよりも安全であり、スコープもより直感的であるため、できる限りletを使用することが推奨されています。

メモリ領域とアドレス（番地）

プログラムで使用される値は、全てメモリ領域に保管されます。保管された場所はアドレスと呼ばれる数値で表現されます。一般にアドレスは16進数で表されます。変数が保持しているのはこのアドレスであり、値そのものではありません。

let sample = "サンプル";

上記の場合、変数sampleに”サンプル”という文字列を格納しています。しかし、実際に入ったのは”サンプル”という文字列が保管された、メモリ領域を示すアドレス（番地）です。プログラミングでは参照という単語がよく使われます。参照とは、メモリ領域上のアドレスの事。つまり、変数とは値への参照を保持する機能です。上記コードの場合、「変数sampleは、文字列サンプルという値への参照を保持している」と表現できます。

変数の再代入

let x = 10;
console.log(x); // 10
x = 20;
console.log(x); // 20

上記の例では、最初に変数xに10を代入しています。そして、その後で同じ変数名で新しい値20を再代入しています。変数に別の値が代入されると、変数が保持しているアドレスが、再代入された値のアドレスに切り替わります。使われなくなった以前の値（この場合10）は、他に使用箇所がない場合、自動的にメモリから破棄されます。

変数のコピー

変数をコピーするには、その変数の値を単純に新しい変数に代入するだけで、コピーができます。

let x = 10;
let y = x; // xの値をyにコピー
console.log(y); // 10

上記の例では、変数xに10を代入し、変数yにxの値をコピーしています。yにはxと同じ値がコピーされているため、yを出力すると10が表示されます。

定数

JavaScriptにおいて、定数は変数と同様に値を保持するものですが、一度代入した値を再度変更することができないという特徴があります。定数は「const」キーワードを使って宣言します。

例えば、次のようなコードを見てみましょう。

const PI = 3.14;
PI = 3.15; // Uncaught TypeError: Assignment to constant variable.

このように、定数は「const」キーワードを使って宣言されます。定数は一度代入した値を再度変更することができないため、実行時にエラーが発生します。

定数は、変更されない値を保持するために使用されます。例えば、円周率や特定の定数値など。また、プログラムの中で再代入されないようにするためにも使用されます。

定数は必要な場合にのみ使用することをお勧めします。必要がない場合は、通常の変数を使用しましょう。

変数の命名規則

変数に名前を付けるときの規則を命名規則といいます。JavaScriptでは次のような変数の命名規則があります。

変数名はアルファベット、数字、アンダースコア（_）、ドル記号（$）が使用できますが、数字から始めることはできません。
変数名は大文字と小文字を区別します。
予約語は使用できません。
大文字と小文字を区別しないという「キャメルケース」または「スネークケース」を使用して命名することが推奨されます。

JavaScriptの予約語一覧

予約語は、プログラミング言語で特別な意味を持つ単語のことです。これらの単語は、変数名や関数名などの識別子として使用することができません。以下に、JavaScriptの予約語の一覧を示します。

break
case
catch
class
const
continue
debugger
default
delete
do
else
export
extends
false
finally
for
function
if
import
in
instanceof
new
null
return
super
switch
this
throw
true
try
typeof
var
void
while
with
yield

これらの単語は、予約語として構文規則に使用されるため、識別子として使用することはできません。たとえば、次のコードはエラーになります。

let var = 10; // エラー！ "var"は予約語です。

Strictモードで追加される予約語一覧

Strictモードを有効にすると以下の予約語が追加されます。

implements
let
private
public
interface
package
protected
static

Strictモードとは、プログラムのエラーを減らし、コードをより堅牢にするためにJavaScriptコードを実行する際の厳密なルールを適用することができるモードです。

Strictモードを有効にするには、以下のようなコードをファイルまたは関数の先頭に追加します。

'use strict';

Strictモードを有効にすると、次のような効果があります。

将来的に使いそうなキーワードが予約語として確保される。
宣言されていない変数への代入は不可。
書き込み不可のプロパティの変更不可。
関数宣言にブロックスコープが適用される。
thisはプリミティブ値も許容するようになる。

Strictモードを有効にすることで、バグを減らし、コードの安全性を向上させることができます。ただし、Strictモードが有効な場合、一部の非互換性が発生する可能性があるため、注意が必要です。

一般的な命名規則の紹介

JavaScriptでよく使われる3つの命名規則は、キャメルケース、スネークケース、パスカルケースです。

キャメルケース: 最初の単語は小文字で書き、次の単語からは大文字で書きます。例えば、「firstName」「userName」などがキャメルケースの例です。結合された箇所がラクダのコブに見立てています。
スネークケース: 単語をアンダースコアで区切って全て小文字で書きます。例えば、「first_name」「user_name」などがスネークケースの例です。アンダースコアを蛇に見立てています。
パスカルケース: 全ての単語の最初の文字を大文字で書きます。例えば、「FirstName」「UserName」などがパスカルケースの例です。

JavaScriptではES5までは、変数名や関数名スネークケースがよく使われましたが、現在の趨勢ではキャメルケースを使うことが多いようです。パスカルケースは昔も今もクラス名やコンストラクタ関数に使用されるため、変数や関数に使用するのは避けるべきです。

データ型

JavaScriptは動的型付け言語であり、変数は宣言されたときにデータ型を持たず、値が代入されたときにデータ型が決まります。代入された値のデータ型で変数のデータ型が決まる性質を「動的型付け」と呼びます。

データ型は大別するとプリミティブ型と非プリミティブ型があります。

プリミティブ型
- 数値 (Number)
- 巨大な整数(BigInt)
- 文字列 (String)
- 真偽値 (Boolean)
- undefined (未定義)
- null (値が空)
- シンボル (Symbol)
オブジェクト型
- オブジェクト (Object)
- 配列 (Array)
- 関数 (Function)
- 日付 (Date)
- 正規表現 (RegExp)
- その他、複数の値を持つオブジェクト (Map, Set, WeakMap, WeakSet など)

プリミティブ型は、単一の値を持ち、オブジェクト型は、複数のプロパティやメソッドを持つオブジェクトを表します。プリミティブ型はイミュータブル(変更不可)であるため、変数に再代入される場合、新しいメモリ空間が確保されます。

データ型の値をコードで直接記述する構文をリテラルと呼びます。以下が各データ型のリテラルです。

数値

数値リテラルには、以下のような書き方があります。

整数 (integer): 10, 100, 0, -5 など
浮動小数点数 (float): 1.0, 3.14, 2.5, -0.5 など
指数表記 (exponential notation): 3e8 (3 × 10の8乗), 1.5e-3 (1.5 × 10の-3乗) など

また、以下のような記法を使って、2進数、8進数、16進数の数値を表すこともできます。

2進数: 0b1010 (10)
8進数: 0o777 (511)
16進数: 0xFF (255)

以下は、それぞれの数値リテラルの例です。

// 整数の例
let x = 10;
let y = -5;

// 浮動小数点数の例
let pi = 3.14;
let height = 1.83;

// 指数表記の例
let distance = 1.5e8; // 150000000

// 2進数の例
let a = 0b1010; // 10

// 8進数の例
let b = 0o777; // 511

// 16進数の例
let c = 0xFF; // 255

数値計算で使う演算子は以下のとおりです。

演算子	意味
`+`	加算
`-`	減算
`*`	乗算
`/`	除算
`%`	剰余（余り）
`++`	インクリメント
`--`	デクリメント

これらの演算子を使用することで、数値の加算、減算、乗算、除算、剰余の計算を行うことができます。たとえば、以下のようにして2つの数値を加算することができます。

let a = 3;
let b = 4;
let c = a + b; // cには7が代入される

文字列

文字列リテラルには、以下のような書き方があります。

シングルクォートで囲む方法: 'Hello, World!'
ダブルクォートで囲む方法: "Hello, World!"
バッククォートで囲む方法: Hello, World!

シングルクォートやダブルクォートで囲まれた文字列は、基本的に同じです。ただし、シングルクォートで囲んだ文字列の中にシングルクォートを含める場合は、エスケープ文字 (\') を使用する必要があります。同様に、ダブルクォートで囲んだ文字列の中にダブルクォートを含める場合は、エスケープ文字 (\") を使用する必要があります。

バッククォートで囲まれた文字列は、テンプレートリテラルと呼ばれ、以下のような機能が使えます。

変数の埋め込み: ${変数名} の形式で、変数を文字列中に埋め込むことができます。
複数行にまたがる文字列の記述: 複数行にまたがる文字列をそのまま書くことができます。

以下は、それぞれの文字列リテラルの例です。

// シングルクォートで囲む方法
let str1 = 'Hello, World!';

// ダブルクォートで囲む方法
let str2 = "Hello, World!";

// バッククォートで囲む方法 (テンプレートリテラル)
let name = 'Alice';
let str3 = `Hello, ${name}!`;

// 複数行にまたがる文字列の記述
let str4 = `これは
複数行にまたがる
文字列です。`;

JavaScriptでは、文字列の連結には + 演算子を使用します。

let str1 = 'Hello, ';
let str2 = 'World!';
let message = str1 + str2; // 'Hello, World!'

また、文字列の長さを取得するには、文字列の length プロパティを使用します。

let str = 'Hello, World!';
let len = str.length; // 13

エスケープシーケンス

JavaScriptにおけるエスケープシーケンスの一覧は以下のとおりです。

エスケープシーケンス	意味
`\'`	シングルクォート (`'`)
`\"`	ダブルクォート (`"`)
`\\`	バックスラッシュ (`\`)
`\n`	改行
`\r`	キャリッジリターン・復帰
`\v`	垂直タブ
`\t`	水平タブ
\`	バッククォート
`\b`	バックスペース
`\f`	改ページ
`\0`	NULL文字
`\xXX`	2桁のXX(16進数)が表すLatin-1文字
`\uXXXX`	4桁のXXXX(16進数)が表すUnicode文字
`\u{XXXXXX}`	16進数のコードポイントが表すUnicode文字

これらのエスケープシーケンスは、文字列リテラル内で使用することができます。たとえば、以下のようにしてシングルクォートを含んだ文字列を作成することができます。

let str = 'I\'m a JavaScript developer.';

また、以下のようにして改行を含んだ文字列を作成することもできます。

let str = 'おはようございます。\n本日は\nよろしくお願いします。';

BigInt

BigIntは、従来の数値型では扱えないような、非常に大きな整数を扱うためのデータ型です。

BigIntのリテラルは、末尾に”n”を付けることで示します。例えば、以下はBigIntの値を代入する例です。

const a = 123456789012345678901234567890n;
console.log(a); // 123456789012345678901234567890n

BigInt型は、通常の数値型と同じように演算子を使用して演算することができます。ただし、BigInt型と通常の数値型を混在して演算することはできません。BigInt型の値に対しては、専用の演算子を使用する必要があります。

const a = 123456789012345678901234567890n;
const b = 987654321098765432109876543210n;
console.log(a + b); // 1111111111111111111111111111110n
console.log(a * 2n); // 246913578024691357802469135780n

BigIntはES2020以降の仕様で追加されたため、古いブラウザではサポートされていない場合があります。また、BigIntは一部の場面で通常の数値型よりも遅いため、パフォーマンスに注意する必要があります。

真偽値

真偽値は、trueとfalseの2つの値で表されます。真偽値は、比較演算子や論理演算子と組み合わせて使います。

比較演算子は、2つの値を比較して真偽値を返します。以下は、よく使われる比較演算子です。

演算子	意味
`==`	等しい
`!=`	等しくない
`===`	厳密に等しい
`!==`	厳密に等しくない
`<`	小なり
`>`	大なり
`<=`	以下
`>=`	以上

以下は、比較演算子を使用して真偽を調べる例です。

let a = 3;
let b = 4;

console.log(a < b); // true
console.log(a == b); // false

論理演算子は、複数の真偽値を組み合わせて真偽を判断します。以下は、よく使われる論理演算子です。

演算子	意味
`&&`	論理積（AND）
`\|\|`	論理和（OR）
`!`	否定（NOT）

以下は、論理演算子を使用する例です。

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

真偽値は、条件式の評価にもよく使用されます。たとえば、以下のようにして処理を分岐することができます。

let a = 3;
if (a < 5) {
  console.log("aは5未満");
} else {
  console.log("aは5以上");
}

null

nullは、何も値がないことを表すための特別な値です。つまり、変数が何かしらの値を持たないことを示す場合にnullを使用します。

以下は、nullを使用する例です。

let a = null;
console.log(a); // null

また、関数の戻り値としてnullを使用することもできます。関数が正常に処理できなかった場合に、nullを戻り値として返すことができます。

function findUserById(userId) {
  if (userId === null) {
    return null;
  }
  // userIdがnullでなければ実行される処理
  ...
}

ただし、nullを使用する場合は注意が必要です。nullはオブジェクトではありません。したがって、nullに対してプロパティやメソッドを参照しようとすると、TypeErrorが発生します。

let a = null;
console.log(a.toString()); // TypeError: Cannot read property 'toString' of null

また、nullはundefinedとは異なる値です。undefinedは、変数に値が代入されていないことを表す特別な値であり、nullとは別の目的で使用されます。

undefined

undefinedは、変数が未定義（値を持たない）であることを示す特別な値です。変数が初期化されていない場合や、オブジェクトのプロパティが存在しない場合など、値が代入されていないことを示す場合にundefinedを使用します。

以下は、undefinedを使用する例です。

let a;
console.log(a); // undefined
let obj = { name: 'tarou', age: 20 };
console.log(obj.city); // undefined

また、関数の引数に値が渡されなかった場合には、引数の値がundefinedになります。

function sayHello(name) {
  if (name === undefined) {
    console.log('Hello!');
  } else {
    console.log('Hello, ' + name + '!');
  }
}
sayHello(); // "Hello!"
sayHello('tarou'); // "Hello, tarou!"

変数にundefinedを代入することは、原則的に避けるべきです。変数がundefinedを参照している場合は、それは不要な値であることを示すために、変数自体をnullに設定するべきです。

オブジェクト

JavaScriptでは、オブジェクトを使ってデータを表現することができます。オブジェクトは、プロパティと呼ばれる名前と値のペアの集合体で構成されます。

オブジェクトの作成

オブジェクトは、{}（中括弧）を使って作成することができます。以下は、空のオブジェクトの作成方法です。

const obj = {};

プロパティを持つオブジェクトを作成するには、次のようにオブジェクトリテラルを使ってプロパティを追加します。

const person = {
  name: 'hanako',
  age: 30,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};

プロパティの追加・削除・更新

オブジェクトのプロパティには、ドット記法またはブラケット記法を使ってアクセスすることができます。ドット記法は、プロパティ名をピリオドで区切って指定します。

オブジェクト名.プロパティ名

const person = {
  name: 'hanako',
  age: 30,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};

console.log(person.name); // nameプロパティの値を取得
// 'hanako'
console.log(person.address.city); // addressプロパティに設定されたオブジェクトのcityプロパティの値を取得
// 'Tokyo'
person.address.city = 'Kyoto'; // cityプロパティの値を変更
person.email = 'hanako@example.com'; // emailプロパティと値の追加
person.family = {husband; 'tarou', child; 'mami'}; // familyプロパティとオブジェクトを追加

console.log(person); // オブジェクトの中身を確認
// {address: {city: 'Kyoto', country: 'Japan'}, age: 30, email: 'hanako@example.com', family: {husband; 'tarou', child; 'mami'}, name: 'hanako'}

ブラケット記法は、プロパティ名を引用符で囲んで指定します。

オブジェクト名['プロパティ名']

const person = {
  name: 'hanako',
  age: 30,
  address: {
    city: 'Tokyo',
    country: 'Japan'
  }
};

console.log(person['name']); // nameプロパティの値を取得
// 'hanako'
console.log(person['address']['city']); // addressプロパティに設定されたオブジェクトのcityプロパティの値を取得
// 'Tokyo'
person['address']['city'] = 'Kyoto'; // cityプロパティの値を変更
person['email'] = 'hanako@example.com'; // emailプロパティと値の追加
person['family'] = {husband; 'tarou', child; 'mami'}; // familyプロパティとオブジェクトを追加

console.log(person); // オブジェクトの中身を確認
// {address: {city: 'Kyoto', country: 'Japan'}, age: 30, email: 'hanako@example.com', family: {husband; 'tarou', child; 'mami'}, name: 'hanako'}

ブラケット記法では、[]内に変数を使ってプロパティ名を指定することもできます。

const propName = 'name';
console.log(person[propName]); // 変数内の値"name"でnameプロパティの値を取得
// 'hanako'

person['prop1'] = 'プロパティ1'; // prop1プロパティと値の追加
const props = "prop";
console.log(person[props + "1"]) // 変数props内の文字列"prop"と、文字列"1"が結合されて"prop1"となる
// 'プロパティ1'

変数を使ってプロパティを指定する場合はブラケット記法を使い、それ以外はより短く記述できるドット記法を使えばよいでしょう。

プロパティの削除

プロパティを削除するには、delete演算子を使ってプロパティ名を指定します。

// ドット記法
delete person.address;

// ブラケット記法
delete person['address'];

for…inループ

オブジェクトのプロパティには、for…inループを使ってアクセスすることができます。

for (let prop in person) {
  console.log(prop + ': ' + person[prop]);
}

メソッドの定義

オブジェクトには、関数をプロパティとして定義することができます。これをメソッドと呼びます。メソッドもドット記法、ブラケット記法どちらでも呼び出せます。

const person = {
  name: 'hanako',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.sayHello // ドット記法で呼び出し
// 'Hello, my name is hanako'
person['sayHello'] // ブラケット記法で呼び出し
// 'Hello, my name is hanako'

Symbol

Symbolは、プリミティブ型の一つで、他のプリミティブ型とは異なり、同じ値を持つSymbolが存在しない一意な識別子を表します。Symbolは、主にオブジェクトのプロパティ名として使用され、オブジェクト内での重複を避けるために利用されます。

Symbolを作成するには、Symbol()関数を呼び出します。

const symbol1 = Symbol();
const symbol2 = Symbol("description");

Symbol()関数には、省略可能な文字列パラメータがあり、これを使用すると、Symbolに関連付けられた文字列を指定することができます。

Symbolをオブジェクトのプロパティ名として使用する場合、以下のようにしてドット記法またはブラケット記法を使用できます。

const myObj = {};
const symbol1 = Symbol("mySymbol");

// ドット記法でのプロパティの追加
myObj.symbol1 = "foo";

// ブラケット記法でのプロパティの追加
myObj[symbol1] = "bar";

// プロパティへのアクセス
console.log(myObj.symbol1); // "foo"
console.log(myObj[symbol1]); // "bar"

また、組み込みのSymbolを使用することもできます。これらは、JavaScriptの内部的な処理に使用されます。例えば、Symbol.iteratorは、オブジェクトが反復可能であることを示すために使用されます。

const myArray = [1, 2, 3];
const iterator = myArray[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

データ型の取得

JavaScriptでデータ型を確認する方法はいくつかあります。以下にいくつかの方法を示します。

typeof演算子

typeof演算子を使用して、オペランドのデータ型を文字列で返します。

console.log(typeof "Hello World"); // 出力結果: "string"
console.log(typeof 42); // 出力結果: "number"
console.log(typeof true); // 出力結果: "boolean"
console.log(typeof undefined); // 出力結果: "undefined"
console.log(typeof null); // 出力結果: "object" (typeof nullは"null"でなく"object"を返します)
console.log(typeof {}); // 出力結果: "object"
console.log(typeof []); // 出力結果: "object"
console.log(typeof function(){}); // 出力結果: "function"
console.log(typeof Symbol("foo")); // 出力結果: "symbol"
console.log(typeof BigInt(123)); // 出力結果: "bigint"

instanceof演算子

instanceof演算子を使用して、オブジェクトが特定のコンストラクタから生成されたものであるかどうかを確認します。

console.log("Hello World" instanceof String); // 出力結果: false (プリミティブ型のため)
console.log(new String("Hello World") instanceof String); // 出力結果: true
console.log(42 instanceof Number); // 出力結果: false (プリミティブ型のため)
console.log(new Number(42) instanceof Number); // 出力結果: true
console.log(true instanceof Boolean); // 出力結果: false (プリミティブ型のため)
console.log(new Boolean(true) instanceof Boolean); // 出力結果: true
console.log([] instanceof Array); // 出力結果: true
console.log({} instanceof Object); // 出力結果: true
console.log(function(){} instanceof Function); // 出力結果: true
console.log(Symbol("foo") instanceof Symbol); // 出力結果: false (Symbolはプリミティブ型のため)
console.log(BigInt(123) instanceof BigInt); // 出力結果: false (BigIntはプリミティブ型のため)

Object.prototype.toString.callメソッド

Object.prototype.toString.callメソッドを使用して、オブジェクトの型を調べることができます。

console.log(Object.prototype.toString.call("Hello World")); // 出力結果: "[object String]"
console.log(Object.prototype.toString.call(42)); // 出力結果: "[object Number]"
console.log(Object.prototype.toString.call(true)); // 出力結果: "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // 出力結果: "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // 出力結果: "[object Null]"
console.log(Object.prototype.toString.call({})); // 出力結果: "[object Object]"
console.log(Object.prototype.toString.call([]));

型変換

明示的な型変換

データ型を他のデータ型に変換することを型変換と言います。明示的な型変換を行う方法が関数として提供されています。以下に代表的なものを示します。

Number()関数
- 文字列を数値に変換する際に使用します。
- 数値でない文字列を変換する場合は、NaNが返されます。
- 例: Number("123")は数値の123を返します。
String()関数
- 値を文字列に変換する際に使用します。
- 例: String(123)は文字列の”123″を返します。
Boolean()関数
- 値を真偽値に変換する際に使用します。
- 空の文字列や0など、偽とみなされる値はfalseに変換されます。
- 例: Boolean("Hello")はtrueを返します。
parseInt()関数
- 文字列を整数値に変換する際に使用します。
- 数値以外の文字列を変換する場合は、最初の数値が出現するまでの部分が変換されます。
- 例: parseInt("123")は数値の123を返します。
parseFloat()関数
- 文字列を浮動小数点数に変換する際に使用します。
- 例: parseFloat("3.14")は数値の3.14を返します。

暗黙的な型変換

JavaScriptは、演算子や比較演算子などを使用する際に、必要に応じて暗黙的に（自動で）型変換を行います。加算演算子は数値の足し算だけではなく、文字列の結合にも使われます。もしも、数値と文字列が混在した場合、加算演算子は数値を文字列に暗黙的に変換し、文字列として扱います。JavaScriptでは、1つの文に複数のデータ型の値が含まれる場合、データ型を統一して処理を行うのです。

以下に、JavaScriptの主な演算子における暗黙的な型変換の結果の一覧を示します。なお、以下のコード例では、各演算子において、左辺値に数値、右辺値に文字列、真偽値、undefined、null、オブジェクトのいずれかを与えた場合の挙動を示しています。

// 加算演算子
console.log(1 + '2'); // '12'
console.log(true + '2'); // 'true2'
console.log(undefined + '2'); // 'undefined2'
console.log(null + '2'); // 'null2'
console.log({} + '2'); // '[object Object]2'

// 減算演算子
console.log(1 - '2'); // -1
console.log(true - '2'); // -1
console.log(undefined - '2'); // NaN
console.log(null - '2'); // -2
console.log({} - '2'); // NaN

// 乗算演算子
console.log(1 * '2'); // 2
console.log(true * '2'); // 2
console.log(undefined * '2'); // NaN
console.log(null * '2'); // 0
console.log({} * '2'); // NaN

// 除算演算子
console.log(1 / '2'); // 0.5
console.log(true / '2'); // 0.5
console.log(undefined / '2'); // NaN
console.log(null / '2'); // 0
console.log({} / '2'); // NaN

// 剰余演算子
console.log(1 % '2'); // 1
console.log(true % '2'); // 1
console.log(undefined % '2'); // NaN
console.log(null % '2'); // 0
console.log({} % '2'); // NaN

// 比較演算子
console.log(1 == '1'); // true
console.log(1 == '2'); // false
console.log(true == 'true'); // false
console.log(undefined == 'undefined'); // false
console.log(null == 'null'); // false
console.log({} == '[object Object]'); // true

// 論理和演算子
console.log(1 || '2'); // 1
console.log(true || '2'); // true
console.log(undefined || '2'); // '2'
console.log(null || '2'); // '2'
console.log({} || '2'); // {}

// 論理積演算子
console.log(1 && '2'); // '2'
console.log(true && '2'); // '2'
console.log(undefined && '2'); // undefined
console.log(null && '2'); // null
console.log({} && '2'); // '2'

== と === の違い

== 演算子は、左右のオペランドの型が異なる場合に暗黙的な型変換を行ってから比較を行います。例えば、数値と文字列を比較した場合、文字列が数値に変換されてから比較が行われます。このため、以下のような挙動が起こります。

console.log(1 == '1');  // true
console.log(true == 1); // true
console.log(null == undefined); // true

一方、=== 演算子は、左右のオペランドの型が同じである場合に、値の比較を行います。このため、型の異なる値同士を比較した場合は必ず false となります。

console.log(1 === '1');  // false
console.log(true === 1); // false
console.log(null === undefined); // false

=== 演算子は、型の異なる値を比較する際に暗黙的な型変換を行わないため、予期しない挙動を防止することができます。そのため、できる限り === 演算子を使うことが推奨されます。

リンク