tips: javascriptでnestedObjectでも動的にget,setする

TL;DR nested objectから任意のkeyで動的にget, setしたい時に使えるスニペット


ソースコードはこちらです

gist.github.com

モチベーション

const obj = {
  key1: {
    key2: {
      key3: 'value'
    }
  }
}

上記のようなnested objectがあった時に、

静的にアクセスするのであれば↓のような方法が取れると思います。

  1. object['key1']['key2']['key3']
  2. object.key1.key2.key3

しかし、これを動的に行うとしたらどうしましょう。

lodashという声が聞こえそうですが、彼を入れるとプロジェクトのバンドルサイズがおおきくなるので今回は不採用です。すでに入ってるなら .set, .getを使いましょう。

object[val1][val2]のようにおこなうのでしょう?。これを行うとすると各種変数が存在しない場合を考慮したりしないといけないため少し面倒です。

e.g. getValue(obj, 'key1.key2.key3'), setValue(obj, path, value) のような取得するためのpath(文字列)くらいであればjsでさくっと作成できそうですね。なので今回はこれを目指しました。

ざっと再起やreduce で書いた後に、いやこれ過去に考えた人いるだろうと思って調べるとstack over flowに質問&回答があったのでそれを拝借し↑のコードに至りました。