DEV Community

Cover image for 10 ADVANCED JAVASCRIPT TRICKS YOU SHOULD KNOW !!

10 ADVANCED JAVASCRIPT TRICKS YOU SHOULD KNOW !!

Sahil Upadhyay on November 27, 2023

Welcome to the wonderful world of JavaScript, where coding meets enchantment! If you’ve ever felt the thrill of creating content on the web but won...
Collapse
 
sreno77 profile image
Scott Reno

This is very informative but please post text instead of images for the code next time!

Collapse
 
big_smoke profile image
Sahil Upadhyay

Sure, from next time would write code in simple code text format. Sorry for the inconvenience.

Collapse
 
oculus42 profile image
Samuel Rouse

The code examples are images directly ripped from @frontendcharm on Instagram.

Collapse
 
benherbst profile image
Ben Herbst

Or just use DEVSFORDEVS it has code blocks automatically with syntax highlight

Collapse
 
moopet profile image
Ben Sinclair

The markdown here supports syntax highlighting out the box.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Closures are functions that remember the environment in which they were created...

Unfortunately, this is not correct. For two reasons:

  • Closures are not functions
  • ALL functions remember the environment in which they are created
Collapse
 
big_smoke profile image
Sahil Upadhyay

Appreciate the correction..

Collapse
 
manchicken profile image
Mike Stemle

I don’t mean to be a downer, but lists just like this one—most with significant overlap over this one—have been written on this platform so many times.

What would you like me to take away from yours which wasn’t in the others?

Collapse
 
big_smoke profile image
Sahil Upadhyay

Didn't knew these were there. Eventhough you would have taken away these concepts from others but for some it's relatively new. This post was for them.

Collapse
 
manchicken profile image
Mike Stemle

But it’s not, not really. Some of your points are incorrect, and the way you presented them lacks the context of when to use them, when not to use them, or why.

I love that you want to help newbies, but a list of code screenshots with limited context doesn’t help anybody.

Thread Thread
 
big_smoke profile image
Sahil Upadhyay

Yes would surely provide more code snippets for help in my future post and work on it. Well the truth is never thought while writing this post that i would gain such audience attention so , whatever i can remember while memorizing these topics just wrote that in simple english for better understanding.But It doesn't seems to me that the post here is not helping anybody. There are many positive reaction too. NeverMind Would Improve on my presentation skills and the context weightage . I accept my fault! Apologies.!

Thread Thread
 
manchicken profile image
Mike Stemle • Edited

No friend, I’m not saying you aren’t helpful. I’m saying that I believe you can do better, and I want to read more of what your skills and experience are.

I am, also, saying that there are far too many vague lists on DEV.to. I see them every day, and they’re always so flashy, and they have so many likes but there’s little-to-no substance.

When we start writing, we always have pieces that we wrote which can do better. It is because of the feedback we get that we can more quickly identify weaknesses and improve.

Write something you know, know really well, and go into depth. Add yourself and your experience to the piece you write.

This is the intent behind my comments: not to tear down but to share feedback so we can all grow.

Thread Thread
 
big_smoke profile image
Sahil Upadhyay

Appreciate your feedback. Would definitely keep these point in mind. The flashy thing its true have myself seen this here , looks like people want to learn in crisp and flashy way without spending much time well that makes some sense as these material are already there on web with lot of deeper context, so they want to understand the key definition of that particular topic.
But different people have different taste when it comes to learning. Some like crisp fancy some like detailed context. Respect to both. Would make sure in my further post to balance this ratio so everyone learns happily.

Collapse
 
madalitsonyemba profile image
Madalitso Nyemba

I came across memoization about a month ago doing my 30 Days of JS and used it to optimize my function calls and it really does make a huge difference. Thank you @big_smoke for sharing.

Collapse
 
ernanej profile image
Ernane Ferreira

This is very informative. Thanks for sharing!

Collapse
 
big_smoke profile image
Sahil Upadhyay

Thanks for the Appreciation.

Collapse
 
lnahrf profile image
Lev N. • Edited

Great! Super useful write up. Mastering all of these will get you through most webdev technical interviews.
Next time post code blocks instead of images ;) some of them are hard to read!

Collapse
 
big_smoke profile image
Sahil Upadhyay

Sure, from next time would write code in simple code text format. Sorry for the inconvenience

Collapse
 
fininhors profile image
Francisco Junior

Very useful, good job.

Collapse
 
k1nf profile image
Nikita

Thank you bro! Very useful and important information

Collapse
 
seena profile image
seenA

Fantastic

Collapse
 
gpt-prompt-coder profile image
Josh the Coder

Excellent post, Sahil!

Collapse
 
big_smoke profile image
Sahil Upadhyay

Thanks Gpt Prompt Coder.

Collapse
 
tamirazrab profile image
Tamir

I didn't get proxy is there any other example? Or explanation.

Collapse
 
big_smoke profile image
Sahil Upadhyay

Sure.. Don't know if this would be enough but Will try my best...

A proxy is like a middleman or a guardian for an object in programming. Its main job is to keep an eye on what you're doing with an object and decide whether to allow or modify those actions.

Imagine you have an object, which is like a thing with properties (characteristics) and methods (things it can do). The proxy steps in between you and that object, and it can modify or control how you interact with it.

Here are a few things a proxy can do:

Access Properties: If you want to see or change a property of the object, the proxy can decide whether to allow it or modify the value before letting you see or change it.

Assign Values: If you're trying to change a value in the object, the proxy can decide if that change is okay or if it should modify the new value.

Method Calls: When you're asking the object to do something (calling a method), the proxy can decide whether to let the object do its thing, modify the method, or even prevent it from happening.

In summary, a proxy gives you the power to control and customize how you interact with an object. It's like having a watchful guardian for your objects, making sure everything happens just the way you want it to.

Collapse
 
efpage profile image
Eckehard

It´s not your fault, Proxies are kind of strange. They allow to add getters and setters to data objects after they where defined. The setter can control the input value, cause some action (e.g. update the UI) or prevent any change of a variable.

Collapse
 
bop profile image
bop

Awesome! Do you allow me to do a ClojureScript version of the article? I’ll not forget to give you credits.

Collapse
 
madhubankhatri profile image
Madhuban Khatri

Did you forget HOISTING? I think it is important topic in JS

Collapse
 
big_smoke profile image
Sahil Upadhyay

Well I have covered hoisting in my previous post so if you want to check it you can see there

Collapse
 
framemuse profile image
Valery Zinchenko

He also forgot to mention the very new feature in ECMAScript - let and const.

Collapse
 
big_smoke profile image
Sahil Upadhyay

I have covered this in my previous post so you can refer there for better understanding.

Collapse
 
viksok profile image
Viktor Sokyrko

Shouldn't it be memoization instead? haven't heard about memonization.

Collapse
 
big_smoke profile image
Sahil Upadhyay

Thanks for correcting. Auto Input Text got me here.

Collapse
 
brainquest profile image
BrainQuest

I am a big fan of the destructuring assignment :) Well written post, thanks!