【JavaScript】lodashの概要とmergeの使い方

JavaScript

lodashは便利なメソッドをまとめて提供しているライブラリです。今回はlodashのメソッドの1つであるmergeについて紹介します。

lodashのインストール方法

$ yarn add lodash

### TypeScritを利用する場合
$ yarn add --dev @types/lodash

lodashの利用方法

lodash自身をインポートする場合

import 任意の名前 from 'lodash'でlodashをインポートできます。

import lodash from 'lodash'

const a = { value: "hoge" };
const b = { value2: "huga" };

console.log(lodash.merge(a, b));
// {value: 'hoge', value2: 'huga'}


import _ from 'lodash'

const a = { value: "hoge" };
const b = { value2: "huga" };

console.log(_.merge(a, b));
// {value: 'hoge', value2: 'huga'}

lodashのメソッドを指定してインポートする場合

impor 任意の名前 from 'lodash/メソッド名'でlodashの特定のメソッドのみをインポートできます。

import merge from 'lodash/merge'

const a = { value: "hoge" };
const b = { value2: "huga" };

console.log(merge(a, b));
// {value: 'hoge', value2: 'huga'}


import lodashMerge from 'lodash/merge'

const a = { value: "hoge" };
const b = { value2: "huga" };

console.log(lodashMerge(a, b));
// {value: 'hoge', value2: 'huga'}

lodash.mergeの使い方

mergeメソッドは_.merge(object, [sources]) のように記述します。
mergeメソッドは第1引数のオブジェクトを基準として、第2引数以降のオブジェクトがマージされます。

同じプロパティ（キー名）が存在する場合、値は上書きされます。つまり、後ろのオブジェクトの値が優先されます。

『merge(object, sources)』パターン

objectにsourcesがマージされるため、merge実行後objectは上書きされます。

import merge from 'lodash/merge';

const a = { value: "hoge" };
const b = { value2: "huga" };

console.log(merge(a, b));
// {value: 'hoge', value2: 'huga'}

console.log(a);
// {value: 'hoge', value2: 'huga'}

『merge({}, object, sources)』パターン

{}を基準にobjectとsourcesをマージするため、merge実行後objectは上書きされません。

import merge from 'lodash/merge';

const a = { value: "hoge" };
const b = { value2: "huga" };

console.log(merge({}, a, b));
// {value: 'hoge', value2: 'huga'}

console.log(a);
// {value: 'hoge'}

参考: mergeによるオブジェクトの複製は浅いコピーになる

mergeによるオブジェクトの複製は浅いコピーになるため、コピー前のオブジェクトの変更は複製されたオブジェクトに影響を与えません。
浅いコピーの詳細解説はJavaScriptの浅い比較・浅い（深い）コピーの挙動まとめで紹介しています。

import { shallowEqual } from "react-redux";
import merge from 'lodash/merge';

const a = { value: "hoge" };
const b = merge({}, a)

console.log(a);
// {value: 'hoge'}

console.log(b);
// {value: 'hoge'}

console.log(shallowEqual(a, b));
// true

a["value"] = "hogehoge"

console.log(a);
// {value: 'hogehoge'}

// 浅いコピーなのでaの変更はbに影響を与えない
console.log(b);
//{value: 'hoge'}

lodash.mergeの具体例

同じプロパティを持たないオブジェクトをマージする例

import merge from 'lodash/merge';

const a = { value: "hoge" };
const b = { value2: "huga" };

console.log(merge(a, b));
// {value: 'hoge', value2: 'huga'}

同じプロパティを持つオブジェクトをマージする例

import merge from 'lodash/merge';

const a = { value: "hoge", value2: "hogehoge" };
const b = { value2: "huga" };

console.log(merge(a, b));
// {value: 'hoge', value2: 'huga'}

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND