JAVASCRIPT : Hard to understand Concepts

Rajatt — Fri, 08 Apr 2022 07:05:53 +0000

We web developers either hate or love JAVASCRIPT.
I am here to make you fall in love with it again.
GOAL: To make you understand few concepts in an easy way.
TOPICS COVERED -

HOISTING
SCOPE-CHAIN
CLOSURE
EVENT LOOP

SO LET'S START:
HOISTING

AS PER MDN DOCS-
JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

In Simple words -
you just need to remember two GOLDEN rules here-

Variable declarations are scanned and made undefined.
Function declarations are scanned and are made available.

Elaboration -
Every time a JS code is executed a Global execution context is created.
This Global execution context scans our code and assigns variables(i.e var) as undefined and when it comes across a function it stores the whole function definition before even the function is executed. And for each function a separate execution context is created.

var hey = "Hey!"; 
function sayHey(){
console.log("Hey!")
}
console.log(hey);
console.log(sayHey());

Here, the output will be as we imagine it to be.

But what confuses a lot of people is -

console.log(hey);
console.log(sayHey());
var hey = "Hey!"; 
function sayHey(){
console.log("Hey!")
var hello;
}

here, the first will after executing of code will say "undefined";
Javascript is executed line by line and surprisingly the function sayHey() works perfectly.

one more point to note here is that as the last line of code is initializing a variable without declaring it.

yes its completely possible in variable initialization but not recommended as good practices.

Conclusion-
Remember the two Golden rules from above and you are good to go.

Before ES6 there was no other way to declare variables other than var.
ES6 brought us let and const.
Now lets talk about let and const.

Every developer says let and const is Blocked scoped.
But few get it.
so lets clear the confusion.
The scope in javascript is defined as -

{
//BLOCK_SCOPE
}

And now the second important point here is let and const are not stored in global execution context and are stored separately(i.e in Temporal Dead Zone)

console.log(a)
let a = 2;

Here, you will get an error "Uncaught ReferenceError: a is not defined"

And trust me its better than "undefined".

Another side note here-
const cannot be initialized without assigned to a value.

SCOPE-CHAIN

To understand this concept lemme tell you a short story and you will never forget the concept.

var a = 1;
function x(){
var b = 2;
console.log(a)
function(y){
console.log(b);
}
y();
}
console.log(a);
x();

So now lets begin - considering a ice-cream is being eaten by a kid now as per society norms we don't ask it from a kid rather if a grand father is eating it can be asked by his child or grand child as they will pass it but a grand father or father won't ask it from his child for ice-cream.
So, in scope-chain runs in a similar way you can ask for the value of var/let/const from a bigger child to pass it to you but not from a smaller child.
Here in our case Global Execution Context is a Grand Father and everything precedes in a similar fashion.

CLOSURE
Definition(MDN) - A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

After placing a debugger in line 2 & 3 we see in scope a closure is formed.
Closure in simple terms is the lexical environment of its parent function.

EVENT LOOP
To understand event loop lets take a piece a code.

console.log("START")
setTimeout(() => {function cb(){
    console.log("when will i execute")
}
cb();

}, 0);
console.log("END")

here, if i ask what will be the output majority will say - as the setTimeout() has a delay of 0 ms.
the supposed output would be-
START
when will i execute
END

but that's not the case this is not how the callback works.
as js code is executed line by line.
as the js v8 engine see setTimout() it automatically goes to the next line and will execute it at the end.
now after every executing the whole code now as the setTimeout func is a web API and the func inside it will go to callback queue and the event loop will now pass this func to the execution context only when the execution context gets empty.

If you learned anything even a little bit.
Drop a like and for any queries related to the post do drop a comment i will answer it.
Thank you. :)

React JS How/where to Start ? : Best Way to learn React

Rajatt — Wed, 02 Jun 2021 03:47:52 +0000

I want to share my experience as I coded my way from being a noob to an intermediate developer.
when we learn programming its all about docs(documentation) and practice.
Its like building our muscle memory to retain most of the syntax and understand the concepts pretty well by practicing and finding divergent use case scenarios where the concept can fit.
I personally love the environment where we can understand the concepts of programming paradigm and practice it there itself i.e. in an interactive environment.
Although React in itself is a small library. Its weight is more over carried by npm packages.
Now, moving over to the resources-

First of all to simplify how react works i would suggest a small course which will make you think how amazing a library can be.
This two-and-half hour course would clear your concepts how react works on the foreground.

https://egghead.io/courses/the-beginner-s-guide-to-react

It's a beginner friendly guide.

Next to make our learning process more interactive this platform offers us an amazing interaction where you can just pause the video and start writing code.

This four-hour free react course lets you play around while understanding concepts and makes you practice on the go.
MOST RECOMMENDED.

https://scrimba.com/learn/learnreact

It offers various other free/paid courses you can check-out.

Now moving on to one of the most insanely recommended course you can find on the internet on react is Epic-react by Kent C. Dodds.
It clears your fundamentals from basic level.
Moreover, the course is designed as a gameplay where different emoji's are used to communicate while practicing and the interface of the course is amazing.

https://epicreact.dev/

Being an Indian how can i not recommend you the course offered by one of my all time favorite mentor - "Hitesh Choudhary"
I would like to say his course is worth every penny spent and if you are getting a course for as low as $3 with more than 7 projects deployment and also ISO certification what else you need. Here you can post your doubts and get it solved quickly. Moreover Hitesh sir provides a free JavaScript course where he has covered more of the ES6 concepts and in a much simplified way. You should check out his courses once.

https://courses.learncodeonline.in/learn/Complete-ReactJS-developer-Bootcamp

Here is one last resource that i would like to share and is absolutely free and interactive.

https://www.freecodecamp.org/learn/front-end-libraries/#react

freecodecamp.org offers free courses and gives you an assignment where you have to code five projects by following the instructions provided in order to get yourself certified for free.

And on the side note i ain't providing any affiliate links just sharing my journey and how i was able to learn React efficiently.

All these resources helped me become a better React JS developer.

Hope you like it.

Do comment if you find it helpful.

Some quick Points to keep in mind while learning -

1.)Focus more on understanding the concept.
2.)Practice Practice Practice.
3.)Code on the go.
4.)Documentation is the key.
5.)Patience is the most essential mantra.
6.)Debugging is a part of learning.

Finally, i would like to conclude by saying most of the aspiring learners fall in a trap of courses as there are plethora of resources available on internet these days.
To be precise it is called "TUTORIAL HELL".
To avoid this focus on the concept and find more use-case scenarios where the concepts can be applied and work around your way by writing more and more code.
THANKYOU.

Forem: Rajatt

JAVASCRIPT : Hard to understand Concepts

React JS How/where to Start ? : Best Way to learn React

Some quick Points to keep in mind while learning -