NEW ARTICLE
Rocky Linuxでのディスク容量不足を防ぐ設定
  1. HOME
  2. javascript
  3. javascript ドット演算子とブラケット演算子の違い

javascript ドット演算子とブラケット演算子の違い

javascript ドット演算子とブラケット演算子の違い

javascriptで、オブジェクトのプロパティにアクセスすることができるドット記法とブラケット記法の違いを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.66
Javascript サンプル集はこちら

ドット記法使い方

ドット記法を使用して、オブジェクトのプロパティの値を取得する場合は、以下となります。

let obj = { 'name':'hoge', 'age':35, 'tel':'090-1111-1111'};

let name = obj.name;

console.log(name); // hoge

階層がある場合は、以下のように記述します。

let obj = { 'name': { first: 'hoge', last: 'foo' }, 'age': 35, 'tel': '090-1111-1111' };

let name = obj.name.last;

console.log(name); // foo

ブラケット記法使い方

ブラケット記法を使用して、オブジェクトのプロパティの値を取得する場合は、以下となります。

let obj = { 'name':'hoge', 'age':35, 'tel':'090-1111-1111'};

let name = obj['name'];

console.log(name); // hoge

ドット記法とブラケット記法に結果の違いはありません。

また、階層がある場合は、以下のように記述します。

let obj = { 'name': { first: 'hoge', last: 'foo' }, 'age': 35, 'tel': '090-1111-1111' };

let name = obj['name']['last'];

console.log(name); // foo

ドット記法とブラケット記法の違い

ブラケット記法は、ドット記法とは違いプロパティ名に変数を利用することが可能です。

let str = 'name';

let obj = { 'name':'hoge', 'age':35, 'tel':'090-1111-1111'};

let name = obj[str];

console.log(name); // hoge

ドット記法は、変数を使用すると「undefined」になってしまいます。

let str = 'name';

let obj = { 'name':'hoge', 'age':35, 'tel':'090-1111-1111'};

let name = obj.str;

console.log(name); // undefined

また、ブラケット記法は数値や予約語などの不正な名前も、プロパティとして使用することができます。

let obj = { 'name':'hoge', 'age':35, 'tel':'090-1111-1111'};

obj[123]= 'test';

console.log(obj); 
// {123: "test", name: "hoge", age: 35, tel: "090-1111-1111"}

ドット記法の場合は、SyntaxErrorとなってしまいます。

let obj = { 'name':'hoge', 'age':35, 'tel':'090-1111-1111'};

obj.123= 'test';// Uncaught SyntaxError: Unexpected number

console.log(obj);

基本的には、ドット記法が多く利用されているが、変数を利用したい場合はブラケット記法を使用することもできます。