Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

[Spread operator, slice, map] Saw this fantastic piece of code and i can't wrap my head around it

I did a challange at codesignal. The objective was to make a function that returns the product of the two joined numbers that resulted in the largest product.

My code looked like this :

function adjacentElementsProduct(inputArray) {
    let arr = [];
    for(let i = 0; i < inputArray.length; i ++){
        if(inputArray[i] !== undefined && inputArray[i + 1 ] !== undefined) {
            let factor = inputArray[i] * inputArray[i+1];
            arr.push(factor)
        }
    }
    arr.sort(function(a, b) {return b-a})
    return arr[0];
}

console.log(adjacentElementsProduct([1, 4, 1, 0, 1000])); //Returns 4

I was superstoked, i made it. So i went to check the solutions, and the most upvoted one was this: 

function adjacentElementsProduct(arr) {
    return Math.max(...arr.slice(1).map((x, i)=>[x*arr[i]]));
    }
    console.log(adjacentElementsProduct([1, 4, 1, 0, 1000])); //returns 4

BOOM! mind blown, 10lines of code was now 3 lines. Wh.. wh.. but..

I sat down, for over an hour, trying to decode this. Google-foo didn't help me, and now i'm here. If someone could break this down for me, i would be very greatful. I will list what i know, and what i don't know under. But a detailed step-by-step here would be incredibly helpfull

What i (think i) know:

...arr returns every element in the array, as something (comming back to this in the i don't know section).

.slice(1) will return all of the elements in the array with and from the 1 index.

.map() does function(){Whatever you want} with every element of an array.

What i don't know:

When i log out ...arr, it doesn't look like an array, it looks like numbers seperated by spaces, why?

Why did he slice out the 0 index?

What does the x and the i represent in the map method?

Teach me sensei, thanks in advance

1 Answer

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Here's my take on it (disclaimer, I'm still learning also :smile:):

  1. When you console.log the spread (...arr) you shouldn't expect to see an array any more, that's the whole purpose of spread to break out the array and it is no longer an array.

  2. He sliced out the 0 entry of the array since you are doing the products of 2 values - so he started with the second value.

  3. If you check out the map doc

x is equal to the current element passed - 1st time it will be the second element of the array or the 4 in the example. This is why he did the slice(1) to start with the second element (and the loop will continue through the rest of the values updating x each time)

i is equal to the index of the current value - 1st time it will be 0, starting at the beginning of the sliced array.

Now when he does the product he does

[x*arr[i]]

Here's the kicker - notice that he is using arr - the original array so that the index i is pointing to the previous element.

So, 1st time through - Slice array element is 4 and index is 0 and we multiply x or 4 by the arr[0] or 1 as per this example. 2nd time through - slice array element is 1 and index is 1 and we multiply 1 X 4 3rd time through - slice array element is 0 and index is 2 and we multiply 0 x 1...

Hope that ramble makes some sense.

Kjetil-Lennart A. Lorentzen
Kjetil-Lennart A. Lorentzen
13,390 Points

Thanks! I didn't even notice the "kicker", I can't believe I didn't see it! Why is the [x*arr[i]] in brackets? Does it have to do with the map() method?

The slice and ...arr makes sense to me now, thanks to you

Fantastic answer, thank you for taking the time out of your day