9 JavaScript Features You’ve Never Used

Have you used any of these JavaScript features?
Prepping for your frontend interviews? Use code "conner" for a discount on my product FrontendExpert:
www.frontendexpert.io/conner
🎬 TikTok: / connerardman
💼 LinkedIn: / connerardman
💻 Video/Coding Gear (affiliate): www.amazon.com/shop/connerardman
Business/brands 👉 [e-mail]

[@JavierSegarraMartinez]

An excelent video. One thing to improve it: please split timeline for each tip,whith this avoid memorize timeStart and timeEnd

[@yt-sh]

Timestamps 0:00 Proxy Objects 2:43 Private Fields in Classes 5:00 WeakMap and WeakSet 8:23 Nullish Coalescing Operator and Optional Chaining 10:19 Object.freeze 12:12 BigInt 13:52 Generator Functions 15:27 Symbols 17:45 Tagged Template Literals

[@kiikoh]

Respect for starting right away and not using an overflashy intro

[@uadev]

So, here's my list. Proxy - I know, and don't use it, for now. Private - I use it in almost every class. WeakMap/Set - used. Optional chaining - of course, you should have it. Object freezing - I use it quite often. It can speed up read operations on very large amounts of data. Bigint - how can you live without them? Generators - I used them a couple of times for custom iterators. Symbol - I know, I don't use it I've seen that way to work with literals, but I don't use it, it's easier to call fn on the val itself, imho. 7/9 Bonus that I use: void statement (No one was using it, so he was very upset, and I decided to fight this injustice. It also gives a little more information to the compiler) Nullish coalescing and assignment (??=), for example, to make sure that the nested object in my cache exists before I get into it without if (obj[obj] !== undefined)

[@SamuelKarani]

The best video I have seen for advanced javascript concepts

[@DiogoLScarmagnani]

Finally understand WeakMap. Thank you.

[@dominikrodler8010]

Good reminder to use tagged template literals next time! I've used it thousands of times when using styled components, but never bothered to use it for some string formatting, although it's really neat. Thanks!

[@eugeneponomarov7429]

Nullish coalescing or optional chaining would be unknown 2-3 years ago, now it's commonly used. But how about "??="? (Nullish coalescing and assignment)

[@david.thomas.108]

That private field syntax with # is pretty weird. Why not just use a private keyword when defining the property?

[@maelstrom57]

It's just the syntax they decided to go with. It was probably too much work to modify the parser to recognize access modifiers.

[@Sam-mn4vl]

Great video. Thank you

[@blue_genes]

Good vid. Thanks.

[@johnnysc9507]

Gret video. I also commend you for having the thumbnail match what you went over first. As others have mentioned bookmarks/clickable timestamps would be really great.

[@mikeonthebox]

I have used Proxy in the past but forgot what the use case scenario was, I believe it was for some kind of router or something, but not sure.

[@JawaCodePro]

Thank you

[@hawkeye904]

The Proxy is giving off Immer vibes

[@renseyy]

I used at least once each of this features, but anyway great video as always

[@soniablanche5672]

The first use case for proxy that comes to my mind is to make a case insensitive object properties

[@SanDukey]

Mine was accessing a user property in a user object that may contain sensitive data as well (can reach in and retrieve email address, but not linked payment info, for example)

[@marcelo-ramos]

It's essy to implement the observer pattern with proxies. All interested psrties csn be notified whenever an object or a specific property is set.

[@cb73]

In wonder if you could use Symbols as React keys when iterating over arrays to guarantee the keys are always unique

[@coder_one]

Of course not. Using Symbol as a key in React is suboptimal and leads to performance issues. You should use stable, unique identifiers that remain consistent between renders, so React can efficiently manage DOM updates.

[@diadetediotedio6918]

@@coder_one And why exactly symbols don't fit into the "stable, unique identifiers" area?

[@coder_one]

​@@diadetediotedio6918 Your homework: Google it on your own.

[@crowrvoblackfeather4851]

@@diadetediotedio6918 because symbols are complete unique, you can't create another symbol in any moment, even if you put the same string, because new Symbol("A") !== new Symbol ("A") so or you store the symbol in anothe place and use as a parser like mySymbol = new Symbol("A") and so array[mySymbol] = "value" to later on be able to do array[mySymbol] to retrive the value. (a thing that react is not ready to handler) or you will never reach that index again without a loop, so instead of change only the index that really changed, he will render again every index in the array, if for some reason the render needs to reindex the array again, all the current symbols will be lost, but the keys no

[@RealRatchet]

​​@@diadetediotedio6918If it's created by component it's always a new symbol but it doesn't matter if it's symbol it would be akin to using any object. Keys should be primitives. It's not stable.

[@cblbopotka3915]

well, I saw how the Proxy works, it's time to make my own framework

[@fmitsinc9146]

Why did you have while(true) inside the generator? Is it needed? Thanks

[@ConnerArdman]

Yes, it is necessary. When we call the next method, it resumes where we left off. Without the while true, the function would end and we would have no next value.

[@RealRatchet]

>9 features never used >used every single one at some point Okay

[@abeetbored]

didn't know template literals could be used like that. would've confused the hell out of me if I saw it the first time in the wild lol. i've never seen anyone mentioning it when teaching string interpolation

[@ConnerArdman]

Oh yeah I was _very_ confused the first time I saw it lol 😂

[@Voidstroyer]

As a backend developer I have seen it before especially when working with certain sql packages. For example writing sql`SELECT * FROM users WHERE id = ${'123'}`;

[@davidblancoferrandez4647]

Ok subscribed.

[@WebWordsWave]

Theme and font in vscode??

[@ConnerArdman]

Monokai I think

[@SanDukey]

​@@ConnerArdman yeah looks like Monokai. There's a free version called Monokai Midnight, I believe

[@vinkap]

const person = { name: ‘John’, age: 30, obj: { prop: “value” } } as const; …will also make the object read only and you wouldn’t have to do object.freeze for deeply nested objects

[@ConnerArdman]

Yes, but this is only valid in TypeScript, not vanilla JavaScript.

[@vinkap]

That’s true….my bad! Having said that, I don’t see very many people using plain vanilla JavaScript anymore.

[@NikitaSkryabin]

it won’t freeze in runtime

[@recursiv]

Even in javascript you can still mutate it by just casting to any.

[@weroro]

const Readonly = (inputObject: object): void => { if (!!inputObject) { let childObject: object | Function, objectPropertyKey: PropertyKey, ObjectConstructor: ObjectConstructor = Object; for (objectPropertyKey in inputObject) if (!!(childObject = inputObject[objectPropertyKey]) && (typeof childObject === 'object' || typeof childObject === 'function') && !ObjectConstructor.isFrozen(childObject) ) Readonly(childObject); ObjectConstructor.freeze(inputObject); } } After transpile and minification (147 Bytes): const Readonly=e=>{if(e){let o,n,t=Object;for(n in e)!(o=e[n])||"object"!=typeof o&&"function"!=typeof o||t.isFrozen(o)||Readonly(o);t.freeze(e)}}; usage: Readonly(person); // locked Or JSON shorthand : const Readonly = inputObject => JSON.parse(JSON.stringify(inputObject), (_, childObject) => Object.freeze(childObject)); But it is super slow

[@Disorrder]

Everyone is using Proxy with Vue under the hood 😅 I’ve been using js for 12 years, I used everything listed here😢

[@strategistaow3520]

This is mind blowing! Without practicing in some projects i will forget about them right after i end the video So you need to create longer video with practice and CHALLENGES and repetition of those things i will watch it 1-2 hour video tutorial using those Without any challenges learning anything is useless

[@steftrando]

If you’re in the middle of a project then you’ll immediately think of a use case for these

[@buddy.abc123]

Great video. But, JavaScript does not belong on the server

[@xxh55]

Ok

[@David15]

Nonsense

[@travman162]

Thanks for this video - I love the way you explain things!

[@urssaf343]

they took owr (php) jawbs

[@jotaroisdarius1918]

if it works i will use it

[@Pareshbpatel]

{2024-06-13}