js.svg

【JavaScript】変数・型

JavaScript

変数

var

var x = 10
x = 20 //再代入
var x = 30 //再宣言

varは変数を宣言する方法の 1 つですが、ES6 以降では非推奨です。

理由の詳細は割愛しますが、スコープや変数の巻き上げなどの問題があります。

そのため、最近では以下のletconstを使用するのが一般的です。

let

let x = 10
x = 20 //再代入
let x = 30 //再宣言はできない

letは可変な変数を宣言するために使用します。再宣言はできませんが再代入はできます。

const

const x = 10
x = 20 //再代入できない
const x = 30 //再宣言はできない

constは不変な変数、いわゆる固定値を宣言するために使用します。 letのように再代入はできません。

基本的にconstで宣言することが多くなります。

複数宣言

const x = 10,
  y = 20

変数はカンマ,を用いて 1 行で複数宣言することができます。

命名規則

const myData

変数の命名にはキャメルケースを使用します。

Number

const number1 = 10
const number2 = 3.14
const number3 = -5

Numberは整数または浮動小数点数を表します。

String  

const str1 = 'Hello World!'
const str2 = 'Hello World!'

const number = 1
const str3 = `One → ${number}` //One → 1

Stringは文字列を表します。

ダブルクォート"とシングルクォート'に違いはありません。 どちらを使うかはプロジェクトによって統一します。

バッククォート`は、テンプレートリテラルと言って${}を使い変数を含めた文字列を宣言できます。

Boolean

const bool1 = true
const bool2 = false

Booleanは真偽値(truefalse)を表します。

Array

const ary1 = [1, 2, 3]
const ary2 = ['A', 'B', 'C']
const ary3 = [1, 'A', true]

ary1[1] //2

Arrayは配列を表します。

通常は全ての要素が同じ型のものを使用しますが、別の型の要素を含めることもできます。

Arrayの要素はインデックスの指定により参照します。

Object

const obj = {
  field1: 1,
  field2: 'A',
  field3: true,
}

obj.field1 //1
obj['field2'] //"A"

Objectは上例のようにキーと値をセットにもつデータを表します。

Objectの値はキーを指定することで参照します。

undefined

const x

undefinedは、変数にリテラルを代入していない状態を指します。 つまり、型も値も持っていない状態のことです。

null

const x = null

nullは、値を持っていない状態になります。 undefinedと異なり、意図的にnullリテラルを代入する必要があります。

リテラル

10 //Numberのリテラル
;('Hello World') //Stringのリテラル
true //Booleanのリテラル

リテラルとは、値そのものを指します。 変数はどのようなリテラルを設定するかでその型が決まります。

型の判別

typeof 10 //"number"
typeof 's' //"string"
typeof true //"boolean"
typeof [1, 2, 3] //"object"
typeof { field1: 1, field2: 's' } //"object"

変数の型を判別するには、typeofを使用します。

Array"object"と判定されます。

Truthy / Falsy

JavaScript では、Boolean以外のリテラルまたは変数をそのまま条件式に指定することができます。

if (0)
if (1)
if ('')
if ('abcde')

このとき、以下はfalseとなる値(Falsy)になります。 それ以外はすべてtrueとなる値(Truthy)になります。

  • false
  • 0, -0, 0n
  • ''(空文字)
  • null
  • undefined
  • NaN