lodash from pairs method and vanilla javaScript options

In lodash there is the from pairs array method that can create a new object where each key is the value of the first element of a nested array in an array of arrays, and the value is the second element of an array nested in an array. It is the inversion of the lodash to pairs method that does the opposite of this by creating such an array of arrays from an object.

Although that might sound like a mouthful if you take a moment to look at some quick code examples you will find that this is not something that is all that hard. In addition this is one of many lodash methods where doing the same with plain old vanilla javaScript is pretty quick and easy. So lets look at some code examples for the lodash from pairs method as well as some plain old vanilla javaScript code examples that do the same thing.

1 - Basic examples of the from pairs method, and other lodash methods

First off in this section I will be starting out with some quick simple examples that make use of the from pairs method. While I am at it I will also be going over some quick examples of various other lodash methods and features. So then I assume that you have at least a little background when it comes to working with native javaScript and how to make use of an external javaScript library such as lodash. If not you might want to take a step back and check out my main post on lodash, or one of my getting started type posts on javaScript in general.

1.1 - lodash _.fromPairs method basic example

So lets say you have an array, and each element in that array is another array. In addition each nested array has a first element that you want to be a key value, and a second element that you want to be a value of that key value in a new object. The lodash from pairs method can be used to do just that.

just call the lodash from pairs method and pass the array of arrays to it. The result that is returned will be the object that you want where each key name is the first element of a nested array, and each value is then then second.

1
2
3
4
let arr = [['x', 1],['y', 2], ['z', 3]];
console.log( _.fromPairs(arr) );
// { x: 1, y: 2, z: 3 }

Thats it, that is what the lodash from pairs method does. However there is also having a method that does the opposite of this that will create such an array of array from an object. Also it is not so hard to just do this with plain old javaScript in a number of ways, so lets look at some more related coded examples with and without the use of lodash.

1.2 - lodash _.toPairs to do the opposite

The lodash _.toPairs method is the inverse of the lodash .FromPairs method. If I pass an object to it, I am given an array of arrays where the keys and values are the first and second elements of each nested array for each key value pair in the given object.

1
2
3
4
5
6
7
8
9
10
let arr = [['x', 1],['y', 2], ['z', 3]];
let obj = _.fromPairs(arr);
console.log(obj);
// { x: 1, y: 2, z: 3 }
let arr2 = _.toPairs(obj);
console.log(arr2);
// [['x', 1],['y', 2], ['z', 3]]

2 - vanilla javaScript alternative wto lodash from pairs

It is not so hard to just work out a little javaScript to make a method that does the same thing as that of the lodash from pairs method. Also I often think that it is kind of silly to have this massive collection of methods, unless I am in fact using all of them at least once or twice in the full body of the code of a project. So then in this section I will be going over a few quick examples of vanilla javaScript solutions for doing the same things as that of the lodash from pairs method.

2.1 - Using a while loop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var fromPairs = function (arr) {
let i = 0,
len = arr.length,
pair,
obj = {};
while (i < len) {
pair = arr[i];
obj[pair[0]] = pair[1];
i += 1;
}
return obj;
};
let arr = [['x', 1], ['y', 2], ['z', 3]];
console.log(fromPairs(arr));
// { x: 1, y: 2, z: 3 }

I went with using var, a function expression, and a while loop to maximize javaScript engine support. However of course a similar method could easily be made in a flash with all kinds of more modern javaScript features. So lets look at a few more examples of making this kind of function using just vanilla javaScript alone.

2.2 - Using array map

While loops are great but there are also of course a number of useful array prototype methods that can also prove to be useful for these kinds of tasks. In this example I am using the array map method to create an array of keys, and a array of values, and then I am using the array for each method to set the values for a new object with these arrays.

1
2
3
4
5
6
7
8
9
10
11
12
13
let fromPairs = function (arr) {
let obj = {};
let keys = arr.map((a) => { return a[0]; });
let values = arr.map((a) => { return a[1]; });
keys.forEach((key, i)=>{
obj[key] = values[i];
});
return obj;
};
// demo
let arr = [['x', 1], ['y', 2], ['z', 3]];
console.log(fromPairs(arr));
// { x: 1, y: 2, z: 3 }

In some cases I might want to cerate an array of key names, and values first like this, however for the most part this kind of solution might still prove to be a little more complex that it needs to be actually.

2.3 - Just using array for each

So then yet another option would be to just use the array for each method to create an object from an array of arrays of key value pairs.

1
2
3
4
5
6
7
8
9
10
11
let fromPairs = function (arr) {
let obj = {};
arr.forEach((pairs, i)=>{
obj[pairs[0]] = pairs[1];
});
return obj;
};
// demo
let arr = [['x', 1], ['y', 2], ['z', 3]];
console.log(fromPairs(arr));
// { x: 1, y: 2, z: 3 }

3 - Conclusion

The lodash from pairs method is not the most compelling reason to use lodash of course. It is another one of the many methods that I either never use, or if I do need can be replicated very easily with just native javaScript by itself. There are still redeeming qualities with lodash though of course, however I would not say this method is the best talking point for defending the use of the full lodash library in new projects. What can be done with many of these methods can also often be done with a little quick javaScript by itself, also often there are native methods for much of the functionality as well.

There are still some methods that do take at least a little time to write though as there may not be a native counterpart method at all. Also there may be a native method, but it still may be relatively new, so often I might have to make use of a ploy fill method to make sure it is there. It is also possible to create customs builds of lodash which is often the root that a developer might utility want to go with a general utilities library. However getting into that may be a matter for a whole other post.

If you would like to read up more on lodash I have a number of other posts lodash that might be worth checking out. However these days I seem to be focusing more so on using native javaSccript and developing things from the ground up with that said there is my collection of posts on javaScript project examples that I am making with just native javaScript alone including one that is a vanilla javaScript utility library of sorts. I am not sure if I can recommend the polar opposite extreme of doing everything from the ground up compared to the alternative, but it does have its good points when it comes to learning how to be a better programmer when it does come to working on a real project rather than just borrowing code for just about almost everything.