5 JavaScript Concepts I've NEVER Used

You don't need to know everything about JavaScript. Here are 5 JavaScript concepts that I have never used!

00:00 - Intro
01:10 - Object Assign
04:00 - Apply, Call, and Bind
06:00 - Hoisting
07:45 - Prototype
09:30 - Generators

STAY IN TOUCH 👋

QUESTIONS...?

[slimzztv]

People need to understand how powerful this concept is when it comes too understanding that you don’t need to know EVERYTHING. The intro of this video is so vital to understand. That is the beginning of how imposter syndrome sets in and takes a hold of you. Being a developer is being able to use code to create something. Just because you had to google the exact syntax for a map function DOESNT MAKE YOU A BAD DEVELOPER. It makes you resourceful because you know how to find the answer which is the real important part. No senior developer or team lead will ask you “hey did you have to google this api call?” They will ask “how does this api call work and does it function?” Remember on a need to nerd basis.

Love your content James! Keep it going

[JoeEnos]

I believe hoisting is why you can declare not just var, but also functions, below where they’re used. I have never put var under its use, but I definitely have called a function above where it’s assigned. Tutorials seem to focus on the var aspect, which seems more like a side effect than anything useful.

[lukementon]

Generators allow you to "pause" or "suspend" the execution context of a function and allow you to dynamically pass variables back into that functions execution context via the .next() method. I believe async await uses generators under the hood along with promises.

[TomDoesTech]

I used to use Object.assign all the time with react before we had the spread operator. I never liked it and am so glad we now have the spread operator.

[ste-fa-no]

Another note about "hoisting" is that it works differently with how functions are declared:
> const add = function() { ... }
won't be available to be used before their declaration (not using "var" either), while:
> function add() { ... }
can be used before in the code instead

[Dan_ny]

Object.assign() mutates target, so ideally if you're going to use the returned value you should do it like so: returnedTarget = Object.assign({}, target, source)

But that also means you can do something like this:

const styles = {
height: '100px',
width: '100px',
backgroundColor: 'red',
};

Object.assign(div.style, styles);

as div.style = styles won't work : P

or

Object.assign(div.style, {
height: '100px',
width: '100px',
backgroundColor: 'red',
})

instead of
div.style.height = '100px'
div.style.width = '100px'
div.style.backgroundColor ='red'

:)

[favouritejome]

In a way, kind of, we use hoisting. You see, when you declare a function with the function key word. And then invoke(call) the function before it's declaration, that's hoisting

[RokoCB]

Object.assign() daily. Not only to extend Element.style, class properties (when passing an "options" argument to your class which extends the class defaults), etc etc, but also when in the need to have some nice DOM utils under your belt:

const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const EL = (sel, par) => (par || document).querySelector(sel);

The beauty is that you can use the above like:

const EL_button = ELNew("button", { type: "button", textContent: "Click me", onclick() { console.log("Hello, World!"); }, });
EL("body").append(EL_button);

the onclick handler being finally used properly, and that's when creating brand new Elements from in-memory (Element.addEventListener() should be always used otherwise).

As always, keep up the good content James! I always enjoy your uploads. Greets!

PS: w3schools?

[codenamegrant]

Instead of Object.assign(), you can use the spread operator for shallow copies.

[piokunr]

I luckily found your videos and I sometimes watch them.
I wrote my opinion about the topic this video features.

[apply]
I often use apply method when I pass an array to Math.max/min method like this:
Math.max.apply(null, [10, 20, -10, 0, 125]);

[bind]
What "this" of JS sometimes refers to stuff unintended, such as event handlers.
So, I often use "bind(this)" to inner function.

[Generator]
I have not used this function either. But this is really a interesting one.
It can be used when the value is not fixed yet at a certain time, or can also be used this instead of making a huge array that may be too large to make.

[ForsakenPrayers]

Hey James, I'm curious what color theme you were using in your video "Asynchronous JavaScript in ~10 Minutes - Callbacks, Promises, and Async/Await
". Loved it!

[Pavel-wjgy]

Hey James, thanks for the video. Can you tell us what extension you are using to show the output dynamically for each line of code? Or is it the breakpoints + node or sth?

[jakubiszon]

Isn't hoisting also the mechanism which allows us to reference a function which is declared further in the code? This way we can do *module.exports = { funcA, funcB }* at the start or the file and have function definitions placed below.

[kiyoshitanaka]

Please do a Video that compares SSR Mehotds, Tools like Streaming SSR (React Suspense), Server Components, Frameworks like Remix and Buzzwords like Hydration

[PsYcOtik]

Generators are Iterators? if so they are used when you don't know the size of the thing you are iterating over. a good use case for this would be database rows.

[Ali-scdh]

I'm surprised you never use the bind method. I find my self using it very often in classes, so the `this` keyword keep referencing my class instance. This is especially usefull for me with event listeners inside my classes.

Is it because you don't use classes very often that you never had to use `bind`, or do you have another way to accomplish the same thing ?

[stullesblog]

Thanx for the video. A lot of this stuff was frequently used before ES6 and are still used by people, that are just still used to this practice. I do JavaScript since 1996 and I still use a lot of that stuff.

[scoalaweb]

Some of these are asked about in job interviews.

Personally, I used Object.assign before I learned about and could use spread. When I looked at the code compiled by Babel, it was using "assign" where I had spread.
I've also used `.apply()` and `.call()` a few times. Less so lately, but useful to know.
Hoisting is mu "favorite" question I get in job interviews. I has no use knowing it if you are going to use `let` and `const`.
As for prototypes, my brain (trained with C++ and Java) could not be wrapped around them. As soon as I could use classes, I started liking front-end web development.

[FelonyKNviction]

Only one of these I have used is hoisting. Though the hoisting I use is not with vars but rather with functions declared with the keyword function. One of my main use cases for this is if you are creating an api or full stack app with controllers and/or services I will have functions underneath the main controller/service function or class that is being exported as pseudo private methods

[ltserge]

Hey what extension is that that gives you the red error codes inline as you type? Also what extension is that green / red squares? What about the console log blue thing that appears next to console log statement what extension is that?? Also what are those extension buttons (besides the default ones) on the left side bar? Ty amazing channel sorry if common question