5 JavaScript Tips You Probably Don't Know

We do a lot of TypeScript on this channel, but JavaScript is still a growing language, and you can do some pretty cool stuff with JS these days! If it's been a while since you looked at what's new in JavaScript, you might find something new in this video!
shaky.sh
/ andrew8088
#javascript #ecmascript

[@fagnersales532]

Wouldn't it be possible to create a 2d Array using `Array.from({ length: 5 }, () => [])`?

[@andrew-burgess]

oh, love this! really great way to create a 2D array!

[@AppleGameification]

That's so amazingly grotesque

[@vanzed7539]

Array.from( Array(3), (v,i)=>Array.from( Array(3), (k, n)=>({x: i, y: n}) ) );
3 * 3 array of point objects.

[@diegodoumecq5144]

Damn, came here to comment this exact same thing

[@tantalus_complex]

It's actually more performant than the new Array/fill()/map() approach, as well.
That approach loops over the allocated array both with the fill() and the map() separately.
The Array.from() approach, however, fills the array as it runs the provided map function - looping once. Not bad.
If you want to do more than a one-liner in that callback function, though, I'd recommend naming it and passing it in by name for readability.

[@dimitro.cardellini]

2d arrays:
const a = Array.from({ length: 5 }, () => []);
range:
const rangle = (start: number, end: number) => {
const [length, step] = end > start ? [end - start + 1, 1] : [start - end + 1, -1];
return Array.from({ length }, (_, index) => start + index * step);
}

[@mluevanos]

I like creating array like this: Array.from({length: 10}, (_, i) => i)

[@dechobarca]

Oh damn, #4 is really tricky that it behaves the way it does to be honest. I mean maybe not according to the language specification, but I can see a lot of people accidentally slipping before/unless they test their code, myself included.
Thanks for the video, really cool one.

[@Ma1ne2]

I am really loving these JavaScript videos. Today everything is about TypeScript and while I love using and learning about it, it sometimes doesn't help you with solving a problem. You need to understand the underlying language (JavaScript) and these videos are helping to learn about some of the more modern features and APIs that JavaScript offers. Then in conjunction with TypeScript, you get superpowers.

[@Jambajakumba]

Wow really cool video. I didn't know about a bunch of these additions Andrew. Thanks!

[@mateuszgroth7480]

The array fill caught me off guard once during an interview for a job. I had to do some kind of algorithm, which I actually coded the right way, but I initialized the array like you showed and it screw me over. I learned it the 'hard' way unfortunately ;D

[@JaimeOlmo]

Map and Set, I would love a video about this topic.

[@SomewhatLazy]

5 JavaScript tips... in TypeScript. Great job.

[@MrREALball]

Didnt know you could do this type of thing with bind. Would use it in my code now, probably.

[@parlor3115]

Better to just use higher order functions

[@MrREALball]

@@parlor3115 im not sure, but I think garbage collector would disagree

[@parlor3115]

@@MrREALball What do you think bind does? It creates a new function as well.

[@joostschuur]

Completely unrelated, but what is going on with that 'fi' font ligature? Curious that that isn't monospaced but everything else is?

[@andrew-burgess]

I know, right? That’s just the TS playground online. I’ve noticed the same thing on multiple machines, so I don’t think it’s anything weird on my side. But yeah, it’s always the “fi”.

[@todd_matheson]

It's much more performant and better to use `Array.from({ length: 5 }), () => [])`. It's more concise and it only iterates once over the array which is much better for larger arrays. Also, the second argument to Array.from, the initializer function takes 2 arguments, the seconds being the index, so that comes in super handy sometimes too.

[@Luxcium]

I am sorry I do not understand the *declare* keyword purpose on line 2 when you explain the _NCO_ @ 2:00 ... or in any other cases where you have been using it in the examples...

[@andrew-burgess]

It's a TS thing, a way to declare the TYPE of a variable or function without initializing it or giving it a value. Not really useful in production, but great for testing how types interact with each other.

[@DanelonNicolas]

nice!!

[@fagnersales532]

Can you talk about error handling?

[@andrew-burgess]

yeah, that'd be a good topic! Anything specific you're interested in hearing about?

[@AppleGameification]

One thing I struggle with is handling complex error handling logic. The lazy thing to do is to catch the error and just return a null or a generic error, no matter what went wrong. But sometimes it's useful for the consumer of your function to know some detail of what went wrong. I've heard some OTHER people say that they don't like to use exceptions or errors as a messaging system between application layers or between services. What's your take on all of this?

[@FunctionGermany]

@@andrew-burgess creating/throwing/catching different or custom error types, or how to do error handling in a functional codebase (since error handling in JS seems very OOP)

[@mmmike3426]

@@andrew-burgess I think "cause" is not spoken about enough. I've seen some gnarly error handling when communicating with external services and dBs in the same service.

[@PickledHam]

just wondering when you were a teen if you are from winchester, tn . you look familiar

[@andrew-burgess]

🇨🇦 🙂

[@DontFollowZim]

Only the 2d array tip was new for me, but also probably the least useful since I can't remember a time where I ever created a set size 2d array without looping over data that needs to get injected into that array anyway...

[@majorhumbert676]

If you work with immutable data, it won't be a problem to instantiate arrays like this.

[@ContortionistIX]

good

[@thematrix185]

Rather than doing new Array(x).fill().map(), I think [...new Array(x)].map() is nicer to read. Don't know the exact performance implications of spread vs fill but I only ever use it for small arrays so I'm sure it's negligible

[@FunctionGermany]

i see. by spreading, the "empty" places are converted to undefined, making them map-able. i prefer .fill() because it's more expressive, less guess-work.

[@lukem121]

More 🎉

[@andrew-burgess]

For sure! Anything specifically?

[@lukem121]

@@andrew-burgess More tips like this. Underused JS/TS features. Computation time savers. Best JS/TS/React practices

[@montebont]

The title is misleading, The video is about Typescript and not about Javascript.

[@user-tb4ig7qh9b]

Just stop doing functional and mutate your state

[@aidemalo]

>5 JavaScript Tips
Proceeds with TS, dislike

[@lucasa8710]

5 javascript tips for productivity
1. Don't use JavaScript
2. Don't use JavaScript
3. Don't use JavaScript
4. Don't use JavaScript
5. Don't use JavaScript
By following these tips you'll be able to enjoy more your life as a programmer