Spread operator vs Rest Operator (Parameters)

Shehraz arain — Fri, 05 Feb 2021 08:30:51 +0000

Remember: Spread Operator and Rest operator are the same when you look, just three dots ... But use differently.

Spread Operator:

Three dots ... Used to spread up array elements OR object properties.

For Example

We have an old array and we want to add all the elements from that old array to a new array three dots simply pull outs all the elements and add them to the new array which we created with square brackets and of course then we can add more elements to it.

const old_array = [1,2,3,4];
console.log([...old_array, 5]);

output:

[1,2,3,4,5]

Spread operator used same it for the object we create a new object with curly braces with the age property but then we also have dot dot dot old_object means to pull out all the properties of the old object and their values and add them as a key value.

const old_object = {
  name: 'sheraz',
}
console.log({...old_object, age: 21});

output

{name: 'sheraz', age: 21}

Rest parameter:

Rest operator or Parameter is the same operator as a spread operator but used differently, Used of merge a list of function arguments into the array.
args received an unlimited amount of arguments, so 1 args,2,3, or whatever, we received more than one and they will merge all be merged together into an array. So we can apply the array method to our argument list or do whatever we want.

const args = [1,2,3];
const filter = (...args) => {
   return args.filter((el) => el === 1);
};
console.log(filter(...args));

output:

[1]

React.Fragment understand with simple words

Shehraz arain — Sun, 12 Jan 2020 10:41:46 +0000

Fragment lets you group a list of children elements without adding an extra node to the DOM.

as you know It works fine.

when you see in inspect:
You have an additional div tag

That why React.Fragment concept is coming to the picture:
So now it works fine

when you see in inspect there is not additional div.

DEV Community: Shehraz arain

Spread operator vs Rest Operator (Parameters)

Spread Operator:

For Example

output:

output

Rest parameter:

output:

React.Fragment understand with simple words