Web development and Tech news Blog site. WEBISFREE.com

HOME > webdevetc

[lodash] How to use get() method

Last Modified : 23 Feb, 2023 / Created : 24 Feb, 2023
View Count
Today, we'll take a closer look at the lodash get() method.

# Lodash get() Method

get() is a method used for objects that can be used to retrieve the value of properties owned by the object. Of course, you can obtain the value of a property without using get(), but using get() makes it easier and more convenient, especially when retrieving values with deep internal nested structures. Here is the simple syntax:

_.get(target object, path to be found, default value)

Each is used for the following purposes:

Target Object : The object to target
Path to be found <Array | String> : Path value used to obtain the value
Default Value (Option) : The value to be returned by default when the search value is not found

The usage is simple ~ you just need to enter the value of the object and the path to be found. Let's create a simple example below to understand it more easily.

! See the lodash get() method example

Let's create a few examples. The object myObj below has multiple values, and we're going to use get() to retrieve various values and check how the results differ.
const myObj = {
  no: 1,
  name: 'Webisfree',
  url: 'webisfree.com',
  depth1: {
    depth2: {
      depth3: {
        num: 3

Now let's use get() to get the value of myObj.
_.get(myObj, 'no')
_.get(myObj, 'name')
_.get(myObj, 'url')

// Result

The execution result makes it relatively easy to obtain the value of the desired object.

If you want to get the value of a lower-depth value that has an object value as the object value, you can use the `. symbol as follows.
_.get(myObj, 'depth1.depth2.depth3.num')

// Result

In the example above, the . (dot) symbol was used, but it can be converted to an array and used as follows. The code below works the same way.
_.get(myObj, ['depth1', 'depth2', 'depth3', 'num'])

// Result

@ If the property does not exist
What if you used it to get the value of an object, but there is no actual property? If you modify the code a bit to find an nonexistent value, it will return undefined.
_.get(myObj, 'depth2')
_.get(myObj, 'depth1.depth3')
_.get(myObj, 'depth1.depth2.depth4.num')

// Result

You can use the default value (Default) in the third argument here. If you want to return 0 when there is no value, you can change it as follows.
_.get(myObj, 'depth2', 0)
_.get(myObj, 'depth1.depth3', 0)
_.get(myObj, 'depth1.depth2.depth4.num', 0)

// Result

How is it different from using pure JavaScript?
If you were using pure JavaScript, an error could occur instead of undefined. For example, the code below would result in an error instead of undefined.

// Error message
VM2217:1 Uncaught TypeError: Cannot read properties of undefined (reading 'num') at <anonymous>:1:28

When I tried to print it to the console, an error occurred. The reason is that the property "depth4" does not exist within "depth2", but it is trying to access the "num" property.

There is a significant difference between encountering an error and returning "undefined." To avoid errors, If statements are often repeated, as shown below:
if (myObj.depth1) {
  if (myObj.depth2) {
    if (myObj.depth4) {
      if (myObj.num) {

While this method can be used, it is difficult to understand at a glance and the code becomes very complex. In this case, using the "get()" method is the best option.

[Note] How to use Optional Chaining in ES 2020
With the latest ES, Optional Chaining can be used to access object properties. The advantage of this method is that it returns undefined without errors if the property does not exist. Please see the example below. The code above was changed to use Optional Chaining, and the result returned undefined without errors.

// Result

Using Optional Chaining allows for very concise code to be written without libraries, making it useful.

So far, we have looked at the "get()" method in lodash.


[IDE] How to use the esc key when editing files with vi or vim in the Intellij terminal


Announcing the Nuxt 3 stable version release news.