Learning JavaScript by Implementing Lodash Methods — Objects

Lodash is a very useful utility library that lets us work with objects and arrays easily.

However, now that the JavaScript standard library is catching up to libraries such as Lodash, we can implement many of the functions in simple ways.

In this article, we’ll look at some Lodash object methods that we can implement ourselves in plain JavaScript.

forInRight

The forInRight method loops through the own and inherited properties of an object in reverse order. In each iteration, it calls the iteratee function with the value, key, and object arguments until it returns false . Then the loop will end.

value is the value of the object property that’s being looped through. key is the key of the property that’s being looped through, and object is the object where the properties are being traversed.

We can implement that ourselves by using the for...in loop to get all the keys in the order that it returns and put them in an array.

Then we can reverse the keys by calling the array instance’s reverse method and use the for...of loop to loop through the keys:

const forInRight = (object, iteratee) => {
  const keys = [];
  for (const key in object) {
    keys.push(key);
  }
  const reversedKeys = keys.reverse();
  for (const key of reversedKeys) {
    const result = iteratee(object[key], key, object);
    if (result === false) {
      break;
    }
  }
}

In the code above, we first used the for...in loop to loop through the keys of an object forward and put them all in the keys array.

In the for...in loop, we push the keys into the keys array. Then we reverse the keys that are in keys array by calling reverse and then assign the reversed array as the value of reversedKeys .

Then we can use the for...of loop to loop through reversedKeys and then call iteratee with object[key], key, and object . We assigned the returned value of iteratee to result .

When result is false , we break the loop.

Now when we call it with the Foo constructor as follows:

function Foo() {
  this.a = 1;
  this.b = 2;
}

Foo.prototype.c = 3;

forInRight(new Foo(), (value, key) => console.log(key));

We get that we get back c , b and a as the logged values in that order.

findKey

The Lodash findKey finds the first property of an object where the predicate returns true .

We can implement that by traversing the items of an object and call the predicate function to check if the given property value matches the condition returned by the predicate .

For instance, we can implement that as follows:

const findKey = (object, predicate) => {
  for (const key of Object.keys(object)) {
    if (predicate(object[key])) {
      return key
    }
  }
}

In the code above, we used Object.keys to get the own keys of object . Then we looped through the keys with the for...of loop.

Inside the loop, we call predicate with the value of the object to see if it meets the condition defined in the preicate function.

Then when we run the findKey function as follows:

const users = {
  'foo': {
    'age': 15,
    'active': true
  },
  'bar': {
    'age': 30,
    'active': false
  },
  'baz': {
    'age': 1,
    'active': true
  }
};

const result = findKey(users, o => o.age < 40);

We have the users object with multiple keys with an object with the age and active properties as the value.

Then we called findKey with it and the predicate function set to o => o.age < 40 .

We then get that 'foo' is the value of result .

findLastKey

Lodash’s findLastKey function is like findKey except the keys are looped over in the opposite order of it.

To implement it, we can just change our findKey implement by calling the reverse method on the keys array returned by Object.keys .

We can do that as follows:

const findLastKey = (object, predicate) => {
  for (const key of Object.keys(object).reverse()) {
    if (predicate(object[key])) {
      return key
    }
  }
}

Then we call our findLastKey function as follows:

const users = {
  'foo': {
    'age': 15,
    'active': true
  },
  'bar': {
    'age': 30,
    'active': false
  },
  'baz': {
    'age': 1,
    'active': true
  }
};

const result = findLastKey(users, o => o.age < 40);

We get 'baz' as the value of result instead of 'foo' since we looped through the keys in reverse.

Conclusion

The forInRight method can be implemented by putting the own and inherited in an array by looping through them with the for...in loop and then pushing them in the array.

Then we can loop through them with the for...of loop and call the iteratee function on it.

The findKey and findKeyRight functions can be implemented by looping through the keys and then calling the predicate function on it.