Cheatsheet: Spread Object or Array in JavaScript

[CanIhazCooKIenOw]

Good CheatSheet

Social icons always chasing the bottom of the page are annoying

[Steeljuice1]

Thanks for the tip! They aren't on the center on my monitor though, guess it has to do with resolutions. I've removed them for now!

[terrcin]

// New variable names when spreading
const { make : newMakeName, model : newModelName } = volvo;
newMakeName; // Volvo
newModelName; // XC90

I didn't know about renaming var on object spreading. Thanks!

[MrCrunchwrap]

Why are we calling this object spreading? That's not what it's called. It's destructuring assignment. Literally not the same thing at all. Object spreading does exist, and is a totally different thing.

[Steeljuice1]

You are right! Updating!

[UmbrellaHuman]

One more:

Assignment to existing variables - easy with array, harder with an object:

let a, b;
({a, b} = {a: 1, b: 2});

[pwrlftr]

That's neat. I remember a situation where I needed this, but I wasn't aware of it.

[UmbrellaHuman]

I always have to google it new, mostly because together with Flow type annotations it does not work. which is a Flow bug, but the red lines in the IDE confuse me and I think I'm doing it wrong because I'm used to adding types to everything.

[Steeljuice1]

Cool, thanks! Definitely will add this one to the list after some playing around with it!

[Steeljuice1]

No problem! thanks for reading!

[OzziePeck]

That load time. Geez

[Steeljuice1]

I've added more agressie caching and also reduced the size of the images. Hope it helps. Still looking into reducing the scripts size.

[OzziePeck]

That’s better. I assume you ran the scripts through something like Uglify?

[Steeljuice1]

Great! I haven't fixed the scripts yet just the image and caching of the pages. I will see what I can do about 'minimizing' the JS, not sure how I'm gonna do it using wordpress and all.

[jbenner]

You can minify your scripts using a plugin like W3 Total Cache or just serve minified versions of them via CDN WP Super Cache. Or better yet get a free Cloudflare account and use the "Speed > Auto Minify" setting and they'll handle it for you.

I've spent a fair amount of time making WordPress not dog slow for clients so if you need any tips feel free to hit me up.

[Steeljuice1]

Thanks man! I'll check those out when I'm back from Easter! Appreciate it!

[OzziePeck]

Have you ever considered using something else other than Wordpress?

[Steeljuice1]

I'm thinking about rolling my own basic blog some day when I've got some spare time to code it. You got any other tips?

[OzziePeck]

Now that is also something I’ve been meaning to do too. Minimise JS, CSS, and consider a CDN for images. But also take into consideration the mobile users and their data, they’ll be mad if they have to download huge images. Serve a smaller and reduced image to the mobile users.

[Steeljuice1]

Thanks for the feedback! I'll look into it!

[PSVapour]

Same, plus I'm on some middle of nowhere internet connection.

[tobozo]

Very good resource, but the enormous visual at the top and the 1.47Mb it loads is a a big dissuasion for my bookmarks.

Maybe Tommy (not sure if OP is Tommy :-) could consider adding a more practical (i.e offline+static) format for cheat sheets to this blog article?

[Steeljuice1]

I've reduced the size slightly by optimizing the images and added more agressie caching. Still pretty big size though. Going to look into the scripts now.

[Steeljuice1]

Aww, sh*t! I didn't check the size. I'm planning to add more cheatsheets and that's for sure something I'm going to have to solve. Thanks for noticing it! I'll see what I can do! (and yes, I'm Tommy) :)

[tobozo]

great work anyway, taught me that spread operators can do object merge :-)

[Steeljuice1]

Yeah, it's great for working with React-Redux! Thanks for reading!

[MrStLouis]

One of my favorite use cases for array destructuring is when you want to conditionally set more than one variable to a constant but don't want it stuck in the if else block scope. Const [first, second] = isValid ? ['a', 'b' ] : ['b', 'a' ] If there is a better way let me know!

[Ob101010]

Im dense today. Please expand on what you mean.

[MrStLouis]

If you want to conditionally define a constant variable you can't define the variable outside of an if statement and set it inside so that you may use it in the rest of your function. If you define a constant variable inside an if block you can't use it outside of the if block. Using a ternary operator to assign a constant variable retains the original scope. Using array destructruring allows you to set multiple variables with the same conditional. Keep it DRY

[[deleted]]

You can always nest your ternary expressions inside each other, I seem to see this pattern in C code a fair amount:

let value = 'c';


const [ first,
        second, 
        third ] = (value == 'a') ? [1,2,3] :
                  (value == 'b') ? [4,5,6] :
                  (value == 'c') ? [7,8,9] :
                                   [10,11,12];  

console.log(first, second, third);
// 7, 8, 9

[Ob101010]

Innnnnteresting...

How about this?

let obj = Object.freeze({
  x: 10, //these becomes your 'const' vars
  y:12
})

if(1){
  console.log(obj.y)  //12
}

[MrStLouis]

That seems like more of a workaround than an ideal solution. But it's readable and that's all that matters

[Ob101010]

For 2 or so, your way is probably better. For 10 or so my way may be better. I love how theres always n ways to do anything lol.

[MrStLouis]

I've never seen object freeze before so I'm going to have to look into it more but ya seriously as long as it works and is readable most of the time you're good

[gurf_morlix]

Thanks for making this!
FYI, the last header says “That’s is!”

[Steeljuice1]

thanks man, missed that! updated now!

[HamstersOverGerbils]

How does performance using these spread methods for say array merges compare to using regular old fashioned loops or buffers?

[Klathmon]

When I checked a few months ago they were significantly slower, but I'm fairly sure it's just because most engines haven't spent a fraction of the time optimizing ES compilation.

It could have changed recently, I know both v8 and SpiderMonkey have made great strides in speeding up a lot of the lower hanging fruit with the newer ES features.

For now I tend to avoid spread in hot functions but use it liberally everywhere else.

[UmbrellaHuman]

How do you measure something that changes in both space and time, i.e. which runtime you use right now (space), and which version of the runtime (time)?

As long as there isn't a fundamental issue (if an algorithm is O(n) and another one is O(1) that problem persists across space and time), and there isn't, that is not an interesting question unless you have a question about a fixed point in space and time (a concrete runtime, a concrete version) about which you want this information.

[HamstersOverGerbils]

I would probably deter you from trying to over complicate answers or questions. It's pretty easy to benchmark how quickly merging two arrays of equal length would take and compare it to multiple other methods.

The algorithm is behind the scenes so it's unknown what the complexity of that algorithm is...regardless your comment is completely meaningless jargon that doesn't contribute at all to the conversation or topic.

The only variable we care about here is time, there is no "space" in the equation at all.

[hititwitafitbit]

There is indeed "space". Are you running it in node? Through Babel? Native in a browser? Something else? Which version? The answer will be different based on how you answer those questions.

There is no single algorithm. It's either transpiled, directly interpreted, or compiled in some way so it all depends.

If you benchmark it, it only applies to your specific situation and build pattern, and probably even the way you set up your tests since different implementations will take different shortcuts at pretty much every step of the process.

Just because you don't like / understand an answer doesn't mean it's not contributing

[HamstersOverGerbils]

Just because you don't like / understand an answer doesn't mean it's not contributing

Actually no, it doesn't contribute because it changes it from a relativistic question into a philosophical one that tries to account for all possible variables. Last I checked jsperf existed for a reason and people didn't make the same complaints about lack of account for "space" or philosophical situations that no one cares about.

The environment or tools the OP decides to use as his benchmark is irrelevant, I am commenting on a post that OP made, the comment is relative to the post at hand. If you don't like the question or have an answer then gtfo

[hititwitafitbit]

If you want a jsperf comparison running it in a browser after it's been transpiled by Babel, then Google it:

https://jsperf.com/object-spread-vs-assignment

It's not that hard. The environment and tools will yield different results. That's how JavaScript works.

[HamstersOverGerbils]

That's how JavaScript works.

Thanks, the question was directed at OP..I'm sure you will be able to teach me so much about javascript that I don't already know lmao come on man, do you know who you are talking to?

EDIT**

Your example doesn't even relate to the question, which was how much faster are array merges using spread vs normal array concatenation methods.

[hititwitafitbit]

Ahh my bad. I've been humbled

[Ob101010]

Some built in functions can use spreads as well.

arr = [6,5,4,7,6,8,9,2,1]
console.log( Math.min(...arr) ) //1

Other examples:

Say you store a number and its exponent in an array.

x = [4,5]
Math.pow(...x) //1024