Use the Spread Operator to Evaluate Arrays In-Place question

Tell us what’s happening:

I don’t understand why we use “spread operator” in this example. I
I mean why we don’t just use arr2 = arr1?
Also, I have an another question, what does .apply() do?
I really tried to understand it but failed its purpose.
Your code so far


const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
(function() {
  "use strict";
  arr2 = [...arr1]; // change this line
})();
console.log(arr2);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place

Because you have never assigned arr2 to arr1

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2; // unassigned

...

arr2 = [...arr1] // arr2 is now assigned and equal to arr1

What do you mean with that?

Of course I never assign it before, that’s why I assign it now by using “let arr2 = arr1”

I really didn’t understand what you meant.

Hi @OGTechnoBoy,

Hope you in a good health, you ask two questions.

1- Why we use “spread operator”?

Spread syntax allows an iterate such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

If you want to need more understand about spread operator just go here

2- What does .apply() do?
apply is very similar to call(), except for the type of arguments it supports. You use an arguments array instead of a list of arguments (parameters). With apply, you can also use an array literal, for example, func.apply(this, ['eat', 'bananas']), or an Array object, for example, func.apply(this, new Array('eat', 'bananas')).

If you want to need more understand about .apply() just go here

Hope this will help you, good luck my friend and have a happy coding.

Regards,
Ali Mosaad

In javascript values are assigned by reference or value. When you assign an object like an array, you’re just adding a reference. When you use the spread operator, you create a new copy

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
const arr2 = arr1 // assigned the reference to the same array

console.log(arr1 === arr2) // true

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
const arr2 = [...arr1] // assigned to a copy of arr1 values

console.log(arr1 === arr2) // false

5 Likes

Why arr1 === arr2 = false?

I mean, when you use spread operator, don’t you just copy the same values?

I tried it in console and I found that “arr2 = arr1” is the same as “arr2 = […arr1]”

Hi @JM-Mendez,

This is a very good example for understanding spread operator.

Thank you very much in advance.

Regards,
Ali Mosaad

1 Like

Dude, you basically copied what MDN said without any change.

I said it before that I didn’t understand .apply() even after searching about it, I wanted a more eplained example.

Thanks although.

Because I wasn’t clear enough. Let me try again and split it up this time

When you assign a variable to another variable, it will be passed as a reference or as the value. This is a more complex topic, so let’s just agree that assigning a variable to an array only passes the reference. That means

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
const arr2 = arr1 // assigned the reference to the same array

console.log(arr1 === arr2) // true

Here what we are saying is that arr2 is equal to arr1. Not that the values are equal, but that the actual arrays are the same. Try this in the console and you’ll see they are in fact the same

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
const arr2 = arr1 // assigned the reference to the same array

console.log(arr1 === arr2) // true

arr1[0] = 'I was mutated!'

console.log(arr1[0]) // I was mutated!
console.log(arr2[0]) // I was mutated! -- oh no, arr2 was changed also!

Now the spread operator returns a new copy, with all the same values of the original

So let’s try that out

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
const arr2 = [...arr1] // assigned to a copy of arr1 values

console.log(arr1 === arr2) // false

arr1[0] = 'I was mutated!'

console.log(arr1[0]) // I was mutated!
console.log(arr2[0]) // JAN -- yay arr2 has not changed!

Tell me if something is still not clear and I’ll try to find another method.

8 Likes

I understood it. Thank you a lot!

It seems that I had the wrong idea of “assigning means giving the values” while “assigning means a reference to the first, so if the first has changed, the assigned var will be changed too”

But I still didn’t understand what does apply() do, why we don’t just use math.max.apply(), why we don’t just write math.max alone? What is apply()'s purpose?

Sorry for the many questions. I really have a hard time understanding these new lessons.

1 Like

This is something even experienced js devs can get wrong, so don’t feel bad about it.

First some term clarification:

  • function parameters
    • what the function accepts
  • function arguments
    • what the function gets sent

Math.max only accepts a a group of numbers as parameters. So

// this works because arguments are properly separated
Math.max(1,2,3) // 3

/// But this doesn't because you're only sending 1 array as an argument
Math.max([1,2,3]) // NaN

What .apply() does is that it allows you pass in arguments as an array. Internally .apply() will extract all the items in the array into individual arguments.

This allows you to use Math.max with an array of numbers.

Don’t be sorry. Everyone is a beginner starting out. I’m just glad my explanations work for you.

10 Likes

I got it. Thank you a lot again!

1 Like

Thank you for sharing these explanations here @JM-Mendez. Huge help

1 Like

Just wanted to say thank you so much for taking the time to post explanations on this forum. I’ve seen your posts crop up every so often and they’re always so clear. Trouble with other forums sometimes is that the explanations rely on a knowledge of other terminology that beginners may not have yet. So yeah, many thanks!

You’re welcome! This is a very nice compliment. I suffered through the same issues when learning to code myself. So it’s nice to know that others find my breaking things down to be helpful. :slight_smile:

2 Likes

Very helpful. And I finally understand what apply does. Yay!

1 Like

@JM-Mendez Thank you for the explanation. I understand why apply() is required.

I’m still a little unclear on why null is required for the below code. Can someone please explain why null is required?

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // returns 89

The apply method exists on Function.prototype. Meaning that it’s available on all functions. Therefore the method does not know the this context that is calling it, and you have to supply it as the first argument. By passing null, you’re essentially saying that the this context is irrelevant.

Take a look at the syntax section here

1 Like