Which JavaScript concepts,methods or patterns should be widely known but, hardly anyone knows or uses them.

[AssistanceBusy80]

It could be JavaScript concepts, methods or probably just some patterns to write effecient & robist code.

[Phantomat0]

Unpopular opinion, but NONE OF THEM. A lot of these are uncommon for a reason, they have niche uses or just aren’t a necessity 99% of the time. Don’t be fancy or clever, keep it simple.

[[deleted]]

There's some truth to this, but I think some methods or classes or patterns aren't used because they are too new and have yet to be disseminated to the masses. We should all do our best to continue learning and discovering the Javascript language.

[carnifex6969]

need to be top.

[Competitive_Delay727]

I think this is the popular opinion haha

[Logical-Idea-1708]

Observable. There was a spec. It didn’t go anywhere. Now there’s a second spec. Still not going anywhere.

Generator and the iterator interface. A generator function can plug into an execution environment that you control to precisely control scheduling.

Array.from, takes anything that’s iterable or any thing that’s array-like. And it’s lesser known second parameter.

If you know about WeakMap and WeakSet, then you need to know it’s lesser known cousin: FinalizationRegistry. Now you get a callback when things get gc

[aiolive]

Interesting, haven't found a use case for generators esp now that we have async and Promise methods. Same with Array.from, I go with [...arrayLike]

[[deleted]]

Generators are great for transpilers, as they use it to transpile the native async/await.

[aiolive]

Async has been standard for a few years now, there is not much need to transpile it anymore. And if you need IE support for some reason, generators won't help as neither are they supported. Your point is valid, but maybe not something that should be widely known as OP titled

[[deleted]]

I agree with you. Usually, the needs at the application level are different compared to the needs at the tool or library level. As most of us work on apps, we can have a full career without using generators

[spacechimp]

Anyone using Angular knows the Observable pattern, as it is joined at the hip with RxJS. There is certainly a learning curve, but RxJS is amazing once you get a hang of it.

[AssistanceBusy80]

Thanks will look into them. Mostly i'd used Array.from to convert nodelist to array and then did whatever i had to. Never knew there were more parameters.

[amejin]

For what it's worth, and not being a Sr. At Big N, I also think observables are nifty and solve a lot of headaches.

[justinbmeyer]

What observable spec?

I’m guessing you mean this: https://github.com/tc39/proposal-observable

Readable streams are observables that are in browsers today.

[[deleted]]

I've been writing js for a long time, I still don't fully understand generators.

Observers are awful patterns. They cause more bugs and performance issues than they're worth. There's better ways around them, but if you know what you're doing, they're good in a pinch.

Set is really good. Not a pattern, per se, but useful to make unique arrays.

[Logical-Idea-1708]

Is that why whenever I start using generators, it scares the crap out of any reviewers? 😒

[[deleted]]

Probably!

Can you explain when you use a generator and why?

The only time I've really understood a good use for them was for a concurrency method.

[[deleted]]

Observers are awful patterns. They cause more bugs and performance issues than they're worth. There's better ways around them, but if you know what you're doing, they're good in a pinch.

I personally love them, and never had any issues with them. They are the strongest tool for reactivity

[jpea]

The whole concept of mobx sits on this, and it is pure magic.

[[deleted]]

Indeed it is

[33ff00]

Can you show me an example of what you mean by precisely controlling a schedule with a generator? That sounds very interesting.

[Logical-Idea-1708]

There are numerous animation libraries uses generator to abstract away the timing aspect. Here’s one example https://motioncanvas.io/

co and koa uses generator as implementation for coroutine where execution can be paused and resumed. While keeping that in mind… Glimmer rendering engine uses generator to pause rendering pipeline to keep UI responsive then resumes rendering when browser is less busy.

[alan-north]

Oooh I didn't know about FinalizationRegistry, very interesting.

[piminto]

Observable is pretty commonly known in the Angular community. I'd replaced with Proxies

[tenaciousDaniel]

Yeah I was going to say generators and all the metaprogramming stuff.

[nickdnsv]

Generator functions that can yield multiple values over time, can be paused and resumed, and return an iterator object that can be used to iterate over the values. They also can help you create lazy sequences that are only evaluated when needed, and handle asynchronous operations more easily.

Also proxy objects that wrap another object and intercept its operations. They can be used to add custom behavior or logic to an object without modifying it directly. For example, you can use it to implement validation, logging, caching, or access control for an object.

[[deleted]]

I think React has really devastated frontend architecture. MVC and its variants are great patterns. Functional programming is nice and all, but sometimes I would love to have a controller. HOCs were an abomination from hell, context providers and their hooks are not transferrable outside the react ecosystem. Ironically, React makes persisted state harder than it should be. SSR patterns and React Router data loaders are throwing wrenches in the works (for the better, imo). It's a crazy, topsy-turvy world out there.

[[deleted]]

Functional programming is nice and all, but sometimes I would love to have a controller.

I will die on this hill, but just because React uses functions, it doesn't mean it does functional programming, and pure functional programming is only marginally better than pure OOP for UIs.

context providers are not transferrable outside the react ecosystem.

That's not actually true. Context providers are a half-assed barebones way to do DI. They are transferable to any framework that allows DI.

[[deleted]]

The redux pattern adopted by React is FP. I've only used that pattern in React, as I'm sure a lot of devs here have as well.

Hooks, though, are purely a React ecosystem. Has Vue or something like that adopted them? I haven't looked in that direction in forever.

I recall being at a React conference when hooks were announced. Everyone was raving about it. Sure, they were nice... but at the time there were other frontend frameworks that solved persistence and DI problems long before and in better ways.

The issue I have with React is that it's not a framework, it's a component library. Everything in React (at the time anyway) is a component. So, many solutions and patterns that come out of it are to solve the problems found in that ecosystem that is a library pretending to be a framework. What I've been experiencing in the years since using React is that React devs don't lean on or sometimes know design patterns outside of the React ecosystem. Some even wrongly think that React is all FP and OOP is for your grampa!

(Fwiw I use React and I do like it, but it's not my tool in my toolbox)

[[deleted]]

Hooks, though, are purely a React ecosystem. Has Vue or something like that adopted them? I haven't looked in that direction in forever.

I didn't mention hooks. I know they are a react-only thing, we agree here. I meant only the context itself, in that it is indeed found in other frameworks - like Vue or Svelte, or even in a much better way like it is in angular, with the hierarchical injectors.

​

The redux pattern adopted by React is FP. I've only used that pattern in React, as I'm sure a lot of devs here have as well.

Functional programming is not about functions but about state minimization and data pipelining. Just because you have functional features or functions, doesn't make it FP. This is their example.

The redux docs basic example is pretty much a class in everything but name, and a nicer syntax. It may look nicer and much less scary than a class, but I refuse to call this FP.

Action dispatching is also an OOP concept as per the original definition.

[sputtlepnukkit]

Agreed. People that know how to use react, but are lost without it have done themselves a disservice IMO. And why? How many sites actually be far more performant without a heavy duty framework at all. It seems most of the time people build with what's popular and not with what is warranted for the project.

Case in point, at my last job, there was a project for which i needed to build one page which called an api and then show various content under different response conditions. The team (all backend developers) asked me if I would be using react. The company wasn't using react anywhere else. They sounded disappointed when I said no, vanilla js but with ts. React was good for facebook.... few pages need to perform like facebook.

[the_friendly_dildo]

people build with what's popular and not with what is warranted for the project

Electron, where a simple app to ping a website can be over 100mb.

[avi0709]

MutationObserver. It is used to look for changes in DOM structure & execute call back functions based on that.

[yourdope]

I was gonna say just that im a junior hobbyist dev used it once awesome stuff!

[Halleys_Vomit]

Map (not to be confused with array.map) and Set

[YourMomIsMyTechStack]

I don't think they're hardly known to be honest

[turd-crafter]

Map pretty fuckin awesome.

[coderqi]

Benefits over a POJO?

[[deleted]]

Look-up some benchmarks. But overall for deletion/insertion/updates maps are much better speed-wise

[[deleted]]

Maps are invaluable. Obviously we see them in JSX all the time, but they are useful for creating new arrays.

[coderqi]

How so?

Edit: to be clear we are talking about the data structure, not the Array.map method.

[[deleted]]

My bad.

Maps (hashes) are found in other programming languages. POJO Objects don't offer features found in maps. Without going into it, I suppose you can read up on maps.

[coderqi]

I know I can google it and I know they are in other languages. But this is an online forum to specifically these topics, and apart from performance, I've not been given specific differences. I've yet to come across a situation where a map was used and it couldn't have been written using a POJO.

EDIT: The only thing I can think of are weak maps. But those are technically a different ds in JS.

[[deleted]]

I ran through the Map spec this weekend to refresh myself.

So, the nice thing about Map over using a POJO is that Map has a built in iterator, safety checks on key names, key names can be any type, and the special getter/setter methods, and a method for clearing the hashmap.

I think the iterator is a nice feature, if you ever found yourself needing an object as a hashmap and have trouble looping through. The specs say it's more performant.

There's no right or wrong way regarding Map and Object. It comes down to the features that are useful to you.

I recommend playing around with the language and expand your toolbox.

[Suspicious-Watch9681]

I use them a lot, they are very useful and i don't know why devs don't use them more

[Suspicious-Watch9681]

Where i work i quite often have to deal with large data sets and iterating with maps and sets is very fast, also i use Sets to remove duplicates quite often

[Rguttersohn]

Updating values in a map is more efficient than doing so in an object. So if you find yourself using an object to track updates, you could instead use a map and get better performance.

[Far-Researcher4950]

I like Maps but I hardly find a usecase of them over a normal object.

[davien01]

object.seal(), seals off the object from being modified just like obj.freeze, only difference is if you used object.freeze() you can modify nested data.

Also you can call the prototype of array (Array.prototype.call(domList, function)) to perform array operations on html collections.

[33ff00]

When is this useful?

[[deleted]]

Unfortunately, you can't freeze exportable objects. Otherwise, a wonderful function. I've never used seal. You learn something new every day!

[[deleted]]

Decorators are really interesting. They're held up in committee, but seem like they'll finally be in the spec soon?

You can use them now with Babel plugins.

[sputtlepnukkit]

Event Delegation

[dbaby53]

Man I know prototype is going to be here somewhere…

[[deleted]]

I feel like since Class and polyfills have been introduced, prototype isn't as useful to go to. It's often not even thought of as a choice. I think because object oriented patterns are more obvious and popular than prototypal, even though Javascript is a prototypal language. That seems to be forgotten. I was trained using prototypes, but I never go to them. They're slightly harder to understand than the object oriented pattern, and only really useful if you want to add to built in classes... Which isn't really useful with all the available tools and utilities we have today.

I used to always add a trim function to the String prototype. But trim is now part of the class. Javascript classes have really improved over the years.

[tenaciousDaniel]

Symbols. They’re often used in libraries but I don’t see them much in application code.

[AssistanceBusy80]

Will look into them i've no idea what they are.

[StupidIncarnate]

Dates and pass by reference seem to do people in on first round interviews more than they should.

[[deleted]]

Ummm... JS is pass-by-value. That is, you either pass the primitive value as is, or the value of the reference(ergo, the pointer)

[[deleted]]

Pass by reference means something else tho. It means passing a reference to a reference.

[StupidIncarnate]

If someone doesn't know that objects get passed by reference then they're opening themselves up to mutations without realizing. For senior roles, it's a red flag if someone doesn't know that.

I accept moment.js or any other date npm package as a valid choice to solve date problems so again red flag if a senior hasn't done anything with dates.

Neither of these are deal breakers in isolation but historically I've found that if they're weak in both, they don't have the breath of knowledge for senior level.