CODEWITHSUNDEEP
javascriptlodash
user-9725874
user-9725874

Reputation: 871

Can't figure out the given native alternative code performing a certain tasks

Can't figure out the given native alternative code performing a certain tasks of creating an array of elements split into groups of the given size argument.

With lodash I've solve this task using _.chunk, but there are two versions of it on the documentation, one is with lodash and the other one is native JavaScript.

I'm interested in the native version and I've started to decipher it but I can't figure it out. I know how reduce works but the conditional part is where I got stuck. I understand if the condition is true it will return a certain value but its still not clear to me particularly the returned value with bracket notation, if someone can explain on detail will be much appreciated. 

// Lodash

_.chunk(['a', 'b', 'c', 'd'], 3); // This one is solve 
// => [['a', 'b', 'c'], ['d']]


// Native

const chunk = (input, size) => {
   return input.reduce((arr, item, idx) => {
      return idx % size === 0 // This entire part of conditional is not clear
        ? [...arr, [item]]
        : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
   }, []);
};

chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

Upvotes: 1

Views: 41

Answers (1)

Maheer Ali
Maheer Ali

Reputation: 36594

All the code is doing is that

  • Creating an empty array.
  • It creates another nested empty array [] inside that array.
  • It adds each element to that nested array each time.
  • If the index is multiple of 3 it adds another nested array and keep on add the elements to it

The easier version to understand is.

const chunk = (input, size) => {
   return input.reduce((arr, item, idx) => {
   
      if(idx % size === 0){
        //The previous nested arrays
        let previous = arr; 
        //Adds a new nested array with current element
        let newArr = [item]; 
        //concentrate both and return
        return arr.concat([newArr]); 
      } 
      else{
        //This is part of array which concatin all nested arrays expect the last one
        let allExepctLast = arr.slice(0, -1);
        //this is last nested array
        let last = arr.slice(-1)[0];
        //Add the current element to the end of last nested array.
        let addedValue = [...last,item]
        return [...allExepctLast ,addedValue]
      
      }
   }, []);
};
console.log(chunk(['a', 'b', 'c', 'd'], 3));

Explanation with example.

Consider the above array ['a', 'b', 'c', 'd']

The arr is initialized as empty array [].

idx = 0 and item = 'a'

When idx is 0 then the condition idx % size === 0 is true so the returned value will be.

[...arr, [item]]

The arr is empty so spreading it will get nothing. [item] will be ['a']. So the whole arr becomes 

[['a']]

idx = 1 and item = 'b'

This time the condition idx % size is false so the value returned will be 

[...arr.slice(0, -1), [...arr.slice(-1)[0], item]]

arr.slice(0,-1) will be empty array so spreading it will be nothing.

arr.slice(-1)[0] will get last nested array ['a'] and will add item at its end. So it become ['a','b']. So the arr becomes [['a','b']]

idx = 2 and item = 'c'

Same will happen as happened for idx = 1 The final array will become.

[['a','b',c]]

idx = 3 and item = 'd'

Now the first condition is true so the [...arr, [item]] will be returned.

...arr will generate the first nested array ['a','b','c'] and [item] will be ['d'] Both wrapped in [] will give 

[['a','b','c'], ['d']]

Upvotes: 2

Related Questions