Kevin Powell - Community•3d ago

rest operator | ...

Hey, I've looked into the rest operator and came to my own conclusion that it handles a group of things allowing them to be placed somewhere else. I've mainly seen it being useful in situations regarding objects and lists e.g.

const john = {
  name: "John",
  age: "25",
  occupation: "builder"
}
const bob = {
  ...john,
  name: "bob"
}

let numberList = [1, 2, 3]
let concatList = [...numberList, 4, 5, 6]

const john = {
  name: "John",
  age: "25",
  occupation: "builder"
}
const bob = {
  ...john,
  name: "bob"
}

let numberList = [1, 2, 3]
let concatList = [...numberList, 4, 5, 6]

I can't help but think that something else i've seen does something similar if not the same thing since i've never come across an operator like this before, i just can't put my finger on it. I'm pretty sure you can add two lists for example using + or something like that so i'm not entirely sure why there would be a need for an operator that let's you do this? what does the rest operator really do? Is there a special functionality i'm missing? Thanks in advance.

28 Replies

ἔρως•3d ago

you can add 2 arrays in php, but not in javascript and i don't know what the "rest operator" is

Jochem•3d ago

it's called the spread operator the spread basically pulls off the first layer of what comes after and Epic is right, you can't do ['a','b'] + ['c'] in JS

ἔρως•3d ago

oh, the 3 dots? yes, that's the spread operator react people LOVE it

Jochem•3d ago

it's got plenty of uses but yeah, you see it a lot when people need to trigger reactivity in a lot of frameworks, because appending to an existing array isn't detectable for whatever does the reactivity so vue and svelt and all the rest use the spread operator a ton too, afaik

ἔρως•3d ago

it's useful to extend objects too pojos, in this case

Choo♚𝕂𝕚𝕟𝕘•3d ago

Both the spread and rest operators use three dots. The spread operator separates an object/array into a comma separated list, and the rest operator joins a comma separated list into an array. The reason that the spread operator can be used to copy and/or concatenate arrays, is because it separates the elements into a comma separated list, which is how normal array items are placed into arrays. As a consequence. The spreading of numberList is the same as doing 1,2,3. Doing that inside the definition of concatList would be [1,2,3,4,5,6]. A similar thing happens when spreading john. An example of using the rest operator would be in destructuring.

const numbers = [1,2,3,4,5,6];
const [first, second, ...others] = numbers;
console.log(first);//1
console.log(second);//2
console.log(others);//[3,4,5,6]

const numbers = [1,2,3,4,5,6];
const [first, second, ...others] = numbers;
console.log(first);//1
console.log(second);//2
console.log(others);//[3,4,5,6]

Jochem•3d ago

I did not realize they had different names, when used at the start or end of the list

ἔρως•3d ago

i always just assumed it was called "destructive spread" because that's inside a destructive assignment

Jochem•3d ago

oh, derp, I'm not even thinking straight, I didn't notice it was on the left side of the assignment in ChooKing's example This message is all spread operator

snxxwyy•3d ago

Im still quite confused on the difference between the rest and spread operators. Does the name differ depending on the context?

Jochem•3d ago

no, it's two different operators that just happen to be the same symbols the spread operator takes an array or object and then removes the outer layer the rest operator goes in a list assignment or a function declaration and takes the "rest" of the items

ἔρως•3d ago

rest - takes the rest of the values/arguments spread - spreads the values on an array/pojo that's what i got from my research

Jochem•3d ago

so if you have a function add:

function add(a,b) {
  return a + b;
}

function add(a,b) {
  return a + b;
}

You may want a version to add two, or three, or four, which you can do with the spread operator

function add_rest(...params) {
  let sum = 0;
  for (const val of params) {
    sum += val;
  }
  return sum;
}

function add_rest(...params) {
  let sum = 0;
  for (const val of params) {
    sum += val;
  }
  return sum;
}

You can call add_rest with any number of parameters:

add_rest(1,2); //3
add_rest(1,2,3); //6
add_rest(1,2,3,4,5,6); //something valid, I'm tired.

add_rest(1,2); //3
add_rest(1,2,3); //6
add_rest(1,2,3,4,5,6); //something valid, I'm tired.

snxxwyy•3d ago

ah okay, so to make sure i understand, is this all correct? rest = represents values/arguments. And an example of that would be the example jochem gave with arguments and the example chooking gave with the values? spread = spreads out the values of an array/object, turning something like let list = [1, 2, 3, "string"] into 1, 2, 3, "string" which can then be placed into other objects/arrays like the example in my original question sorry epic, i didn't realise i had the reply on for you

ἔρως•3d ago

that's okay and sounds like you're in the ballpark of it

snxxwyy•3d ago

Awesome, thank you everyone for the help, it’s been super useful

snxxwyy•3d ago

so i researched it a little more, and have a question what makes the first example a rest operator and the second a spread operator? the both seem to pretty much be doing the same thing which is imputing values? and since rest is for values/arguments the both seem like they should be rest to me?

function example(first, second, ...others) {
  return others //expected output: [3, 4, 5, 6, 7]
}

example(1, 2, 3, 4, 5, 6, 7)

function example(first, second, ...others) {
  return others //expected output: [3, 4, 5, 6, 7]
}

example(1, 2, 3, 4, 5, 6, 7)

const numbers = [1, 2, 3, 4, 5]

function addNumbers(a, b, c) {
  return a + b + c //expected output: 6
}

let result = addNumbers(...numbers)

const numbers = [1, 2, 3, 4, 5]

function addNumbers(a, b, c) {
  return a + b + c //expected output: 6
}

let result = addNumbers(...numbers)

this also confuses me a little more since going by jochems example the first example would be a spread not a rest however in the resource i read (https://www.freecodecamp.org/news/javascript-rest-vs-spread-operators/) it's a rest not a spread?

freeCodeCamp.org

JavaScript Rest vs Spread Operator – What’s the Difference?

JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same. The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaSc...

Choo♚𝕂𝕚𝕟𝕘•3d ago

They are not doing the same thing. They are doing the opposite thing. The rest operator is creating an array from a comma separated list. The spread operator is creating a comma separated list from and array.

snxxwyy•3d ago

Ohh okay i see now. With the rest operator example, is the array you’re referring to the one returned by the return keyword or the set of parameters?

Choo♚𝕂𝕚𝕟𝕘•3d ago

The others becomes an array because the rest operator is used on the comma separate list of 3,4,5,6,7. It doesn't apply to 1,2 because there are two other parameters preceding it which take those values. Without the dots, the value of others would be 3. I am not sure if I understand the question, because the value returned is a parameter.

snxxwyy•3d ago

I was just confused what you meant by array in that situation. Does the rest operator return values in a comma separated list as an array?

Choo♚𝕂𝕚𝕟𝕘•3d ago

The rest operator creates an array from whatever comma separated values it receives. This is not in any way related to the fact that the function returns something. That function just happens to return the variable that a rest operator was used on, but the return itself has no connection to the fact that it's a rest operator. You can use a rest operator without ever returning any part of it.

snxxwyy•3d ago

I used the wrong phrasing I think, I’m aware it’s not related to the function returning anything, for example, the array method .filter always returns an array with its results, I was wondering if the rest operator did the same, and as you say, I think it does?

ἔρως•3d ago

basically, the rest operator takes the rest of the arguments in a function literally that if you have 2 arguments and then a ...numbers, then the variable numbers will have all the other arguments from jochem's example, calling add(1, 2, 3, 4, 5, 6) if the function is declared as add(a, b, ...rest), then a = 1, b = 2 and rest = [3, 4, 5, 6] it doesn't create any "comma separated" anything it's an array with what wasn't picked by the other arguments the excess ... the rest the spread operator inserts the elements of the variable into the position where the operator is used for example:

let numbers = [1, 2, 3, 4, 5, 6];
let digits = ['1', '2', '3'];

// [1, 2, 3, 4, 5, 6, '1', '2', '3']
let together = [...numbers, ...digits];

let numbers = [1, 2, 3, 4, 5, 6];
let digits = ['1', '2', '3'];

// [1, 2, 3, 4, 5, 6, '1', '2', '3']
let together = [...numbers, ...digits];

it's also not a "comma-sepated" something when someone says "comma-separated", it's a string something like this: 'a, comma, separated, string'

snxxwyy•3d ago

Oh right I see now, sorry to make everyone explain that again, I appreciate it. Thank you. Oh, when chooking mentioned a comma separated list I thought he was referencing the arguments when the function was being called e.g. example(1, 2, 3, 4, 5, 6, 7)

ἔρως•3d ago

the correct term for that is "arguments" "parameters" is acceptable too, but i don't consider it correct

snxxwyy•3d ago

Ah okay, got it Thanks again

ἔρως•3d ago

you're welcome also, a list is just an array an array without any sparse or missing elements just 0 to the length-1, with values

Gaming

Programming

rest operator | ...