nikkie-ftnextの日記

イベントレポートや読書メモを発信

JavaScriptにおける連想配列でハマりました。全てをお話しします

はじめに

秘密はね、最後に明かされるんだよ。
『アイの歌声を聴かせて』めっちゃいいですよね、nikkieです。

Python大好き（＝極振り）、裏返せば他の言語は全然書けない私、このたびJavaScriptでめっちゃハマりました。
それをネタに記事を書きます。

連想配列（キーと値のペアのデータ型）でハマりました。

目次

参考書籍

JavaScript［完全］入門

JavaScript［完全］入門

Amazon

連想配列について3-4を参照しました。
読んだ上での私の理解を以下で書いています。

この本は何か1つプログラミング言語を使っている方が読むと、JavaScriptの特徴がつかみやすいのではないかと思います。
分厚くカバー範囲が広い感じで、リファレンス的に使えそうです。
「本を読んで入門するのが好きな方は、立ち読みして確認してみては」と思いました。

以下のJavaScriptのコードは、ブラウザの開発者ツールのコンソールで確認しています。
Pythonインタプリタの対話モードみたいでした。
コンソールだとletやconstなしでも動くんですねー

JavaScriptにおける連想配列

Pythonでお世話になっている連想配列といえばdict！
では、JavaScriptにおける連想配列1は？

以下の2つがあるそうです：

  • オブジェクト
  • Mapオブジェクト

JavaScriptのオブジェクト

名前と値をペアで持ちます。

obj = {apple: 100, "awesome banana": 50}

名前と値のペアは「プロパティ」と呼ばれ、オブジェクトのプロパティへのアクセスは次の2通りがあります。

  • ドット
  • []
obj.apple
// 100
 
obj["awesome banana"]
// 50

Mapオブジェクト

連想配列のオブジェクトでキーと値がペアになっています。
上で紹介したオブジェクトより処理性能がいいそうです。

map = new Map([["apple", 100]])
map.set("awesome banana", 50)

Mapの値はgetメソッドで取得します。

map.get("apple")
// 100
 
map.get("awesome banana")
// 50

ハマった箇所：Mapにオブジェクトのプロパティのアクセスを適用しても値は取れない

Mapの値をオブジェクトのプロパティのようにアクセスしようとして、だいぶハマりました。

map.apple
// undefined

map["awesome banana"]
// undefined

Mapの値の取得はgetメソッドです。
Mapもオブジェクトも連想配列として使えますが、Mapの値の取得はオブジェクトのプロパティの値の取得とは別物です。

[余談1] JavaScriptのオブジェクトの書き方

Pythonではできない書き方ができて、面白い！と思いました。

  • obj = {apple: 100}のように、名前に変数を指定できる
  • 変数があるとき、それを書くだけで、変数の名前と指す値からプロパティが作られる
lemon = 150
obj2 = {lemon}
obj2["lemon"]
// 150

[余談2] JSON: JavaScript Object Notation

Pythonを使うときは、標準ライブラリのjsonをimportしまくっています。
JavaScriptのオブジェクトに入門したことで「JSONはまさしくJavaScriptのオブジェクトを表す文字列なんだな」と気づきました。

// オブジェクトを作るときの変数の扱いによらず、JSONとしては同じになる
JSON.stringify({apple: 100, "awesome banana": 50}) == JSON.stringify({"apple": 100, "awesome banana": 50})
// true

名前が文字列であるか否かによらず、JSONでは名前にはダブルクォートが付きます。

終わりに

JavaScriptの2つの連想配列、オブジェクトとMapとで、値へのアクセスの仕方が異なることが理解できていなくてハマりました。

  • オブジェクト：ドットまたは[]
  • Map：getメソッド

慣れていないプログラミング言語を使うとこういうハマり方は付き物だと思いますが、ハマった分理解も深まり、普段使いの言語を見つめ直す機会にもなりますね。

  1. GASのコードのリファクタリングで必要になったのですが、対象のコードの話はまたどこかで↩