Author: John Au-Yeung

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 how to implement array methods for excluding items and unzipping arrays.

unzip

unzip accepts an array of grouped elements and creates an array by regrouping the elements into their configuration before zipping them.

All we have to do to implement unzip is to loop through each of the arrays and rearrange them as follows:

const unzip = (zipped) => {
  let unzipped = zipped[0].map(z => []);
  for (let j = 0; j < unzipped.length; j++) {
    for (let i = 0; i < zipped.length; i++) {
      unzipped[j].push(zipped[i][j])
    }
  }
  return unzipped;
}

In the code above, we created a function that takes zipped arrays and inside the function, we mapped the first entry of zipped to a new array of arrays.

This is because the unzipped array should have arrays that are of the same size as each array entry in the zipped array.

Then we push the zipped entry in the given position into the unzipped array’s array entry.

For instance, if we call unzip with the following zipped array:

const result = unzip([
  ['a', 1, true],
  ['b', 2, false]
]);

Then unzip first maps the first zipped entry into a new array and set it to the unzipped variable.

Then the nested loop takes 'a' and then puts it into the first entry of the unzipped array. Then it pushes 'b' as the 2nd entry of the same array.

In the next iteration, it pushes 1 into the next unzipped array entry. Then it pushes 2.

The same process is done for the next iteration. Therefore, the unzipped array should be:

[
  [
    "a",
    "b"
  ],
  [
    1,
    2
  ],
  [
    true,
    false
  ]
]

unzipWith

unzipWith is like unzip , but we can pass in an iteratee function to choose how to regroup our array. The iteratee function takes 2 arguments and returns the one that’s the combination of the 2.

For instance, we can implement unzipWith as follows:

const unzipWith = (zipped, iteratee) => {
  let unzipped = zipped[0].map(z => []);
  for (let j = 0; j < unzipped.length; j++) {
    for (let i = 0; i < zipped.length; i++) {
      unzipped[j].push(zipped[i][j])
    }
  }
  return unzipped.map(arr => {
    return arr.reduce(iteratee);
  });
}

It’s almost the same as unzip except that we called reduce to combine the values with iteratee via the map method before returning the unzipped array.

Then when we call it as follows:

const result = unzipWith([
  [1, 10, 100],
  [2, 20, 200]
], (a, b) => a + b);

We get:

[
  3,
  30,
  300
]

for result .

without

The Lodashwithout method returns an array that excludes all the given values using the SameValueZero algorithm for comparison.

We can easily exclude items with our own without function as follows:

const without = (arr, values) => arr.filter(a => !values.includes(a))

In the code above, we called filter on arr and the leave the ones that aren’t in values by calling includes to check if it’s in values .

Then when we call it as follows:

const result = without([1, 2, 3, 4, 5], [4]);

We get that result is:

[
  1,
  2,
  3,
  5
]

xor

The xor function returns an array of unique values that aren’t included in all arrays. This is also known as the symmetric difference.

The order of the result is determined by when they occur in the array.

To implement it, we can just check whether they occur in all arrays and then exclude them if they do:

const xor = (...arrs) => {
  const symDiff = [];
  for (const arr of arrs) {
    for (const a of arr) {
      const inAllArrays = arrs.every(arr => arr.includes(a));
      if (!inAllArrays) {
        symDiff.push(a);
      }
    }
  }
  return symDiff;
}

In the code above, we looped through each array in arrs then inside, we loop through each array entry in each entry of arrs and check whether an element is in every array in arrs by using the every method on arrs .

The callback uses includes to check whether each element is in each array in arrs .

If it’s not, then we push it to the symDiff array, and in the end, we return that array.

Then when we call it as follows:

const result = xor([2, 1], [2, 3])

We get that result is:

[
  1,
  3
]

since 1 and 3 are not in all the arrays.

Conclusion

unzipping arrays means that we’re rearranging the entries so that each entry in the nested array is now in their own array position.

We can also return a new array with some entries excluded with the without function, which we can implement with filter and includes .

Finally, we can find the symmetric difference by checking if the elements are included in each array in the nested array and exclude those.

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 and function methods that we can replace with our own plain JavaScript implementation.

unary

The Lodash unary method returns a function that only calls the original function with one argument.

We can just create our own function that returns a function that calls the original function ourselves as follows:

const unary = (fn) => (val) => fn(val);

In the code above, we have our own unary function, which takes a function that returns (val) => fn(val) , which is a function that only takes one argument and then calls fn with that argument.

Then we can call it as follows:

const result = ['6', '8', '10'].map(unary(parseInt));

And we get:

[
  6,
  8,
  10
]

as the value of result .

wrap

The Lodash wrap method takes a wrapper function another function fn that we want to call with the wrapper as the first argument.

It returns a function that takes in a value val as the parameter and calls the function in the second argument with the wrapper as the first argument and val as the 2nd argument.

For instance, we can implement our own wrap function as follows:

const wrap = (wrapper, fn) => (val) => fn(wrapper, val)

In the code above, the wrap function takes wrapper and fn , which are functions. Then we return a function that takes in an argument, which is val and then calls fn with wrapper and val .

Then we can call it as follows with the Lodash _.escape method as the first argument and our own function to wrap our text around p tags as follows:

const p = wrap(_.escape, (func, text) => `<p>${func(text)}</p>`);

In the code above, the escape method escapes the text and our own function wraps func(text) , where func is the escape method since that’s the first argument and text is the text that we’ll pass into the returned p function.

Then we can call p as follows:

const result = p('foo bar');

and we get that result is <p>foo bar</p> .

forIn

The Lodash forIn method loops through the own and inherited enumerable string keyed properties of an object and run an iteratee function on each property.

The iteratee is a function that takes the value , key , and object parameters and we can stop the loop by returning false explicitly

We can implement our own forIn function as follows:

const forIn = (object, iteratee) => {
  for (const key in object) {
    const result = iteratee(object[key], key, object);
    if (result === false) {
      break;
    }
  }
}

In the code above, we have the forIn function that takes an object and an iteratee function.

Then inside the function, we used the for...in loop to loop through all the enumerable own and enumerable string keys of object .

Inside the loop, we call the iteratee function with the value, which we get by using object[key] , the key itself, and the object . We assign the return value of iteratee to result .

Then if result is false , then we break the loop. Otherwise, it continues running.

We can then call our forIn function as follows:

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

Foo.prototype.c = 3;

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

In the code above, we have the Foo constructor, which has 2 own properties a and b . It also has an additional inherited property c .

Then we called forIn with a Foo instance, and pass in a callback that logs the keys of the Foo instance.

In the end, we should see a , b and c logged in the console log output.

Conclusion

The unary and wrap Lodash methods both return a function that takes in some arguments and call the original function that’s passed in as the argument from the returned function.

Lodash’s forIn method is like the for...in loop, except that we can return false with our iteratee function to break the loop. The iteratee is run on every iteration until it returns false .