DEV Community

Cover image for How JavaScript Works🔥 🤖 [Visually Explained]

How JavaScript Works🔥 🤖 [Visually Explained]

Narottam04 on September 09, 2021

JavaScript is one of the most loved and hated languages in the world. It is loved because it is potent. You can make a full-stack application by ju...
Collapse
 
pappudutta profile image
Pappu Dutta

"As it encounters var a = 2, it assigns 2 to 'n' in memory."
here a should be n, I think. It makes me confused for a minute

Image description

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
dylzeee profile image
dylzeee • Edited

ummmm no, namaste js is not the first guy to visually explain javascript like this. Nor is the poster of this.

Collapse
 
balapriya profile image
Bala Priya C • Edited

This post is indeed heavily inspired by Akshay Saini's Namaste JS series - examples, flow of concepts etc. It would have been great if the author had included a line in the post instead of sharing link to the playlist in the comments section.

Thread Thread
 
dylzeee profile image
dylzeee • Edited

Still, can't call him the 'content owner' as the first commenter did though. This poster has taken common knowledge about javascript and taken the time to visually express it in a unique way. He also linked to his source of knowledge in the comments as you say, which he didn't need to do.

Does that mean every time I create a website and put my name/logo in the footer, I also need to mention the 300+ resources that have taught me something or inspired me....no.

Namaste js, most likely learnt it from somewhere too, maybe one of the many books he has on his desk in the bg, does he give them credit? He often is reading something in his video, probably words of others, does he give credit?

Thread Thread
 
balapriya profile image
Bala Priya C • Edited

Yes, I agree that Namaste JS is not the content owner - and the first commenter is not right to phrase it that way. And I totally agree on the great efforts in creating engaging visuals.

However, when almost the whole content of your post is this particular video in the playlist - it doesn't really hurt to mention it in the Reference section in the post.

There's clearly a difference between writing tech tutorials inspired by a lecture series, and developing a website.

When writing tech tutorials, it's often a good practice to mention the references.

It's totally fine if you don't quite feel the need to acknowledge. I only wanted to get across my message.

Thread Thread
 
narottam04 profile image
Narottam04

Noted and rectified my mistake😄! I thought adding references on the comments section will be sufficient.

Thread Thread
 
balapriya profile image
Bala Priya C

Thank you for accepting the suggestion positively. ☺️ You're doing an amazing work. Have you considered submitting your posts to javascriptkicks.com?

Thread Thread
 
narottam04 profile image
Narottam04

I didn't knew about this website, I will consider looking into it, Thanks😄

Thread Thread
 
balapriya profile image
Bala Priya C

You can submit posts here for a wider reach to the JS devs. And there's a Medium publication JS in Plain English - that'd be a great place to share as well. And then, include the canonical url in the dev.to posts so that we can read it here too.

Collapse
 
hamiecod profile image
Hargunbeer Singh

Is it somebody else's content?

Collapse
 
deddyprianto profile image
Deddy Prianto Sihombing

Genius

Collapse
 
narottam04 profile image
Narottam04

Awesome YouTube playlist to learn more about JavaScript:

I hope y'all will like this!

Collapse
 
najmul009 profile image
Najmul Hossain

Infective👍

Collapse
 
ankush21 profile image
Ankush Agrawal

Thank you for detailed explanation about Java script. I have just start reading javascript from w3schools but I learned very little. Just going through your blog, I understand the basics of javascript very easily. I have gone through various blog of javascript as I started learning. I also find this blog interesting about javascript - theonetechnologies.com/blog/post/a... -

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it Ankush!❤️

Collapse
 
bobbyiliev profile image
Bobby Iliev

This is amazing! Well done!

What tool did you use to create those amazing animations?

Collapse
 
narottam04 profile image
Narottam04

PowerPoint 2019

Collapse
 
efraimla profile image
Efraim

Old school, like it. Great work

Thread Thread
 
narottam04 profile image
Narottam04

😂yes, couldn't find better tool for it. If there is a better tool than PowerPoint lemme know

Collapse
 
domagojvidovic profile image
Domagoj Vidovic

This is a unicorn for sure. Amazing!

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
k3nnet profile image
k3nnet

this is golden . thanks so much for this .

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it!

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
lannex profile image
Shin, SJ

This is a good post.

Can I translate this into Korean?

Collapse
 
narottam04 profile image
Narottam04

Sure! you can do it. Just add my twitter profile or link back to this blog.

Collapse
 
lannex profile image
Shin, SJ

You bet!

Collapse
 
levilee profile image
drdung1999 • Edited

This is the best easy explain on the internet. can you tell me where i can learn these things like this.

Collapse
 
narottam04 profile image
Narottam04

There is a yt playlist called "Namaste JavaScript", also if you want some premium content you can check out frontend masters JavaScript courses.

Collapse
 
levilee profile image
drdung1999

thank you so much

Collapse
 
kubernatesdashboard profile image
kubernetesdashboard

How JavaScript Works🔥 🤖 [Visually Explained]" dives into the inner workings of JavaScript in a fun and visually engaging way. It breaks down how JavaScript operates in a browser, focusing on concepts like the event loop, the call stack, and how the execution context works. By explaining these technical aspects with visuals, it makes complex topics more accessible for beginners and experienced developers alike. The post also touches on how JavaScript handles asynchronous code and the role of promises, helping readers grasp how JavaScript manages concurrency. This type of visual explanation is a great way to demystify the language's behavior and give developers a deeper understanding of the execution flow.

Collapse
 
sobanarshad85 profile image
Sarcasm

Are you ready to become an expert in Javascript? Learn all you need to know about Execution Context with this comprehensive course! Watch the video to understand the fundamentals and unlock advanced concepts in no time. Master the concept and become an expert today: youtu.be/F5pxy8v6W00 #Javascript #ExecutionContext #LearnNow

Collapse
 
seankimdev profile image
Sean Kim

Amazing! It’s so easy to follow and understand. It solidified the concept for me. Thank you so much!

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it! ❤️

Collapse
 
mpagels profile image
Martin Pagels

You can use this tool to visualize the execution of Javascript (and other programming language:
pythontutor.com/live.html#mode=edit

Collapse
 
narottam04 profile image
Narottam04

This is awesome! Thanks for sharing it.

Collapse
 
dimsane profile image
Dwaipayan Sen

Sir Saini will be so pleased! Thanks for such a wonderful presentation @narottam04 .

Collapse
 
ameerrah9 profile image
Ghameerah McCullers

This was really helpful!

Collapse
 
narottam04 profile image
Narottam04

Thank You!

Collapse
 
mhgbtc profile image
Mahougnon Samuel

Awesome contents.🕸

Collapse
 
bobbycrooz profile image
bobbycrooz

This is really great, good post

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it!

Collapse
 
shrushtiasutkar profile image
ShrushtiAsutkar

Well explained

Collapse
 
rajissctrl profile image
Raji Sarafadeen Sanjo

Very helpful!

Collapse
 
korwalskiy profile image
AbdRozaq

I totally agree with you that understanding the execution context if critical to getting a hang of javascript

I also like how you explained the hoisting concept with the memory context analogy

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it! ❤️

Collapse
 
malvinjay profile image
George Arthur

Nicely done. Thanks a lot.

Collapse
 
narottam04 profile image
Narottam04

You're welcome!

Collapse
 
scapester profile image
Scapester

As a new JS developer, this was extremely helpful.

Collapse
 
narottam04 profile image
Narottam04

Thank you! glad you found it helpful.

Collapse
 
smaranh profile image
Smaran Harihar

Brilliantly written. HATS OFF!!

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
iamsujit profile image
Sujit M

Nice one man.

Collapse
 
narottam04 profile image
Narottam04

Thank you!❤️

Collapse
 
aman0210 profile image
aman0210

GGs naruto

Collapse
 
narottam04 profile image
Narottam04

💪

Collapse
 
dikecode profile image
Dike-Code

Thanks a lot for this compelling content... Was really valuable and it's worth bookmarking.

Collapse
 
narottam04 profile image
Narottam04

Thank you! Glad you liked it!❤️

Collapse
 
hamiecod profile image
Hargunbeer Singh

Great Post! Keep it Up

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
lakshyachopra profile image
Lakshya Chopra

This was amazing, thanks a lot!

Collapse
 
narottam04 profile image
Narottam04

Welcome!

Collapse
 
anitaparmar26 profile image
anitaparmar26

Nice

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
shubhamshejaval profile image
shubham shejaval

Loved it

Collapse
 
narottam04 profile image
Narottam04

🙌

Collapse
 
kurapikachu profile image
kurapikachu

This post is super straightforward for a newbie as me. Thanks a lot!

Collapse
 
narottam04 profile image
Narottam04

Glad you loved it! ❤️🥳

Collapse
 
christimamarys profile image
Christima Mary S

Very well explained! Thank you.

Collapse
 
narottam04 profile image
Narottam04

Welcome!

Collapse
 
yjsmr profile image
Yonas

Thank you for explaining it like this! Awesome :)

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it!

Collapse
 
mastermind profile image
MasterMind • Edited

Wish I could like this multiple times

Collapse
 
narottam04 profile image
Narottam04

That means a lot! 🥺 Thank you!

Collapse
 
dwvicy profile image
Vaishnavi Dwivedi

Wow, this is such a well explained article! Loved it ❤️🙌

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it!

Collapse
 
kkphpdeveloper profile image
KK

Awesome👍👏 explaination

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
giddey profile image
Ayodele Ayodeji

This is detailed. Thanks 👍

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
avi1112 profile image
Avi1112

Nicely explained, good work 👍🏻

Collapse
 
narottam04 profile image
Narottam04

Thank you!

Collapse
 
vdat profile image
V-Dat

Excellent Post! But I wonder when the web page loads successfully. Will the execution context be empty? So where will my event handlers be stored and how can I see them?

Collapse
 
josejustino profile image
José • Edited

Great post! Helped me to understand more about this language. I work with React but I never studied javascript in depth.

Collapse
 
mcgowanc profile image
Master Builder

This seems suspiciously close to Will Sessions explanation in his course on Frontend Masters.

Collapse
 
babafemijk profile image
babafemij-k

Great piece.
But I don’t get why the execution context is always destroyed at the end since the variables created in the code still exists.

Collapse
 
narottam04 profile image
Narottam04

when an execution context is destroyed, it destroys the variable and functions defined inside them. Unless you take into account the concept of closure, but generally it will be destoryed. If the variables is not destroyed it will clog our memory in the browser.

Collapse
 
devparkk profile image
Dev Prakash

One day I'll get a job and I'll buy you a coffee . Thanks for this great article.

Collapse
 
narottam04 profile image
Narottam04

Thank you! you will get your dream job🙌

Collapse
 
mahmoud595 profile image
mahmoud595

I have read many articles about JavaScript behind the scenes but this one is amazing

Collapse
 
ktscript profile image
ktscript

A loud headline and very weak article.

Collapse
 
shivashankar_741 profile image
Shiva shankar

All credits to akshay saini

Collapse
 
kspshnik profile image
Evgeny Karpel

Nice :)
Now waiting for next series of event-loop, callbacks and promises?
:)

Collapse
 
narottam04 profile image
Narottam04

Next post will be on "Hoisting" but event loop, callbacks and promises is on my list will be releasing it soon.

Collapse
 
devangnpatil profile image
Devang patil

youtube.com/playlist?list=PLlasXeu...
This is the great tutorial to understand JS and how it's work underthehood.

Collapse
 
narottam04 profile image
Narottam04

Akshay Saini is ❤️ Wrote this article after watching the course.