JavaScriptでドット表記のパス文字列を使ってオブジェクトのプロパティを安全に設定する方法

JavaScriptでネストした（入れ子になった）オブジェクトのプロパティを設定する場合、lodash の set メソッドを使うと、どの階層のプロパティでも安全に値を書き込めます。

第1階層のプロパティ設定は obj.a = value のようにシンプルに書けますが、深くネストされたプロパティへ直接アクセスしようとすると、途中の階層が存在しない場合にエラーが発生するなど扱いが難しくなります。そのため、実績のあるテスト済みライブラリである lodash を利用するのがおすすめです。

lodash の set メソッドは、ドット区切りの文字列（例： "a.b.foo"）や配列形式のパスを受け取ることができ、パス上のオブジェクトが存在しない場合は自動的に生成してくれます。

lodashのsetメソッドを使った例

深くネストされたオブジェクトには、次のように値を設定できます。

let _ = require("lodash");

let obj = {
    a: {
        b: {
            foo: "test"
        },
        c: 2
    }
};

_.set(obj, "a.b.foo", "test1");
_.set(obj, "a.c", { test2: "bar" });

console.log(obj);

出力結果

{ a: { b: { foo: 'test1' }, c: { test2: 'bar' } } }

"a.b.foo" というパスで指定した場所の値が test1 に更新され、a.c には新しいオブジェクトが代入されていることがわかります。既存のプロパティも、存在しないパスも同じ書き方で扱えるのが set の強みです。

自作のsetUpdateProp関数で実装する方法

外部ライブラリに頼りたくない場合は、再帰呼び出しを使って独自の setUpdateProp 関数を実装することもできます。

const setUpdateProp = (object, path, value) => {
    if (path.length === 1) object[path[0]] = value;
        else if (path.length === 0) throw error;
    else {
        if (object[path[0]])
            return setUpdateProp(object[path[0]], path.slice(1), value);
        else {
            object[path[0]] = {};
            return setUpdateProp(object[path[0]], path.slice(1), value);
        }
    }
};

この関数は、アクセスしたいプロパティへのパスを配列として渡して使います。パスの先頭要素が存在すればその階層へ再帰的に進み、存在しなければ空のオブジェクトを作成してから進むため、途中の階層が欠けていても安全に値を設定できます。

使用例

var obj = {
    level1:{
        level2:{
            level3:{
                name: "Foo"
            }
        },
        anotherLevel2: "bar"
    }
};

setUpdateProp(obj, ["level1", "level2"], "FooBar");
console.log(obj);

出力結果

{ level1: { level2: 'FooBar', anotherLevel2: 'bar' } }

["level1", "level2"] というパスを指定することで、ネストされた level2 の値が "FooBar" に更新されました。このように他の兄弟プロパティ（ここでは anotherLevel2 や level3）は保持されたまま、目的の場所だけが書き換えられます。

まとめ

• 手軽さと安全性を重視するなら lodash の set を使うのがベストです。文字列・配列どちらのパス形式にも対応しています。
• 依存関係を増やしたくない場合は、再帰を使った自作関数でも同様の処理を実現できます。
• どちらの方法でも、中間の階層が存在しないオブジェクトに対して安全にプロパティを設定できる点がポイントです。