こんにちは、”はふぃ”です。

lodashとはいろいろと便利なユーティリティー関数を集めたライブラリのことです。
同種として有名なUnderscore.jsと互換性があり、Underscore.jsより機能が多くて高速であるためよく利用されているようです。

lodash

Underscore.js

参考:JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)

lodashのget

lodashのget()はオブジェクトに対して利用する関数で深いプロパティを取得する際やプロパティ名が動的に変化する場合によく利用されます。

使い方

_.get([対象のオブジェクト], [プロパティのパス], [undefinedの場合のデフォルト値(省略可)])

参考: https://lodash.com/docs/4.17.10#get

< get.js >

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

console.log(_.get(obj, 'key1.key2.key3.key4', 'no value')) // value
console.log(_.get(obj, 'key1.key2.key3.key5', 'no value')) // no value

nullの扱い

JavaScriptではundefinednullは条件式で共にfalseとして扱われるため混同して考えがちです。

< example.js >

const obj = {
  key1: undefined,
  key2: null
}

const str1 = obj.key1 || 'str1'
const str2 = obj.key2 || 'str2'

console.log(str1) // str1
console.log(str2) // str2

しかし、lodashのgetでは対象の値がnullだった場合でもnullがそのまま返ってきます!
(第3引数で指定したデフォルト値は返ってきません)

< null.js >

const obj = {
  key1: {
    key2: {
      key3: {
        key4: null
      }
    }
  }
}

console.log(_.get(obj, 'key1.key2.key3.key4', 'no value')) // null

※ undefinedの場合は第3引数で指定したデフォルト値が返ってきます。

参考:https://lodash.com/docs/4.17.10#get

対策

とはいえnullでもundefinedでもデフォルト値を返して欲しい!という場合が多いと思います。
その場合は以下のように書けば解決するかと。

< solve.js >

const obj = {
  key1: {
    key2: {
      key3: {
        key4: null
      }
    }
  }
}

console.log(_.get(obj, 'key1.key2.key3.key4') || 'no value') // no value

おわりに

Documentにはしっかり書いてあるのですが、JavaScriptの扱いと混同してハマったので書きました。
確かにnullはそのまま返して欲しいってニーズはありそうだけど、便利なのか不便なのか…。

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA