Applications of JavaScript Spread Operators Tutorial | ES6 / ES2015

Three utilities of JavaScript ES6 / ES2015 Spread Operators. Creating a Copy of an array, Array to Arguments and Arguments to an Array.

Article and code samples from this tutorial

Please be my patreons on patreaon

Follow me for technology updates

Help me translate this video.

[ankitapatil]

I recently discovered your channel. Your teaching method is very clear and simple. Thank you for sharing your knowledge.

[josh]

@techsith, Another practical usage of spread operator I can think of is to conditionally construct JSON object ! Example below:
var a= {name:'abc', food:'cake'};
var b= { ...a,
...(a.name=='xyz' && {eyeColor: 'black'}) // if a.name is abc is there then adds this prop eyeColor
}
console.log(b);

[ErnestGWilsonII]

Totally awesome video as always great job, I love this channel! I can't believe how many good uses we have for the spread operator and you are the first person to explain it so clearly, I will definitely be using this in my code now! Thank you! Thumbs up!

[dzajakeks]

2022, here i am. I like you as a mentor, calm vibes (gotta thank you for that visual on spread, now i remember it too and it have meaning)

[erichrick]

I like your level of detail in your tutorials, and your examples. Great Job!

[mmr]

Hi! I recently discovered your channel and I love the way you explain, its very clear, and suits awesome for my current knowledge (and lack of knowledge). You are an awesome teacher. I will watch all of your videos. Keep going, thanks for sharing.
Greetings from Argentina.

[romikonlinepotapenko]

The example with the func function at 5:10. You defined the function using the rest parameter which is also represented by three dots, but when you passed an array into the function, you disassembled it into separate values by using the spread operator. Aren't they two distinct features in Javascript?

[VarunVMurthy]

Hi Techsith, can you please tell what is the difference between:


let x = [1, 2, 3];
function slog(...arg){
console.log(arg);
}
slog(...x)


and


let x = [1, 2, 3];
function slog(arg){
console.log(arg);
}
slog(x)

[OrvilleChomer]

I agree with others in their comments: you've made spread operators and their uses more understandable.
Before watch this video, I honestly wondered what was the point of this new language feature.

[somesbhowmick]

Nice utility piece of new java script, Thanks

[mocococo]

Thank you for the great tutorial. and for the time you spent to make it.
So seems those 3 dots do a toggle, if array they toggle it to individual items and vice versa, if individual items they make it an array ??
Thank you.

[VinothKumar]

awesome tutorial as usual sir!..keep do your great job 😃

[iangeorgesmall]

I like to use spread operator like this
[…Array(20)].map((x, i, a, b, c, d)==>{
// Do stuff
});
It’s sort of like a shortcut way of for or while loop with pre defined variables
Yep nasty
But it works well

Powerful one liners

[shasankpandey]

sir please make a series of react interview coding tests!

[tirumalraot]

For

let x = [1, 2, 3];

let func = function (...arg) {
console.log(arg);
}

func(x)

I'm getting following output:

[ [ 1, 2, 3 ] ]

[MrFliperocha]

Hey bro! You said "when we change x value, y also changes", but when I do that:

let x = [1, 2, 3, 4]
let y = x

x = [5, 7, 9]

console.log(x)
console.log(y)

I had the output:

> (3) [5, 7, 9] // for x
> (4) [1, 2, 3, 4] // for y

I'm confused hahahaha

[laxmisingh]

I feel your picture is quite distracting in the bottom, also i feel you try to fake your accent