勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでオブジェクトのキーに変数を指定する方法

  JavaScript

JavaScriptでオブジェクトのkey及びvalueに変数を指定したかった。「const obj = {key : value}」のように記述したところkeyの方が正常に指定できていないようで呼び出そうとしてもundefinedになった。以下に解決方法をメモ。

 

ソースコード

NGパターン

const key = 'name';
const value = '鈴木';

const obj = {
    key : value,
}

console.log(obj.name);

上記の記述だと「undefined」が出力される。

OKパターン

const key = 'name';
const value = '鈴木';

const obj = {
    [key] : value,
}

console.log(obj.name);
console.log(obj[key]);

上記の記述だと「鈴木」が出力される。

 

参考サイト

https://engineering.webstudio168.jp/2023/04/javascript-obj-key-variables/

 - JavaScript

  関連記事

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...

PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法

管理画面等から何らかのデータをMySQLに登録し、そのデータをPHPで作成したA ...

バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法

画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...