DEV Community

Cover image for Javascript Essentials πŸ§‘β€πŸ’»
Gautam Anand
Gautam Anand

Posted on • Updated on

Javascript Essentials πŸ§‘β€πŸ’»

Introduction

  • Well, we all start somewhere to start learning JavaScript, I wish this kind of beginner's guide would be available for me to get the very basics of JS.

  • If you are not new to javascript, this will be a perfect read to brush up your skills or building a stronger foundation.

Enjoy Reading

What is Javascript

JS is synchronous single-threaded language

Synchronous - It executes its code line by line.
Single-Threaded - Executes one line at a time.

How does JS Works?

  • Javascript works inside an execution context,
    they have 2 components namely Memory and Code

  • Memory is also called as Variable Environment

  • Code is also called Thread of Execution

Hoisting

  • JS Code Hoisting is when a javascript code executes then even before the execution of the first line of the code it scans the entire code for declarations of functions & variables
  • Allocates memory for it in the Global Execution Context as variables/identifiers as undefined and creates a reference in case of functions.


var x = 10; // x will be undefined before execution

function getName() {
  console.log("Hello World");
} // gets copied entirely


Enter fullscreen mode Exit fullscreen mode

Undefined vs Not Defined

  • Well as javascript creates a global execution context,
  • It allocates memory to all the declared variables & functions
  • By default, it allocates undefined to it. and when the variable assignment line is executed it assigns the respective value to it.

Eg undefined



var a;
console.log(a === undefined); //true


Enter fullscreen mode Exit fullscreen mode

Not Defined

When JS tries to find a variable that was not found in the initial scan it gives the. implies that there was not memory allocated to the variable.

Eg Not Defined



var a = 10;
console.log(x); //here x is not defined in the scope


Enter fullscreen mode Exit fullscreen mode

ReferenceError: x is not defined

Temporal Dead Zone -

let us look at this example



console.log(a); // Error
console.log(b); // undefined
let a = 10;
var b = 10;


Enter fullscreen mode Exit fullscreen mode

ReferenceError: cannot access 'a' before initialization

let and const are not on the global object
instead they are stored in a different memory space than global called SCRIPT and since the console.log points to the global object, it does not find let a = 10; in it.

Example for Temporal Dead Zone



1. let c;
2. const a = 10;
3. if (a === 10) {
4.   c = "Temporal Dead Zone Ended";
5. }


Enter fullscreen mode Exit fullscreen mode

Here, the above example shows that until the variable c or a is assigned any value, it will stay in a special zone called as Temporal Dead Zone πŸ’€

let v/s const v/s var

  1. In case of let and const there are no re declarations allowed.
  2. Not even the console will work πŸ˜…


console.log("This will not print");
let a = 10;
var a = 10; // Redeclaration of identifier 'a'


Enter fullscreen mode Exit fullscreen mode

Resulting in
SyntaxError: Identifier 'a' has already been declared.



var a = 10;
var a = "Please like this article";


Enter fullscreen mode Exit fullscreen mode

No Error is there, re declarations are allowed in var

How to avoid temporal dead zone?

- Always put your declrations on the top of the file so that as soon as it starts executing it will get all the variables declared.
- By doing this we can shrinking the Dead Zone Window close to zero by moving all the declarations at the top.

Block in Javascript

Block is a set of lines covered by {} to provide it as a single statement.

Example



if (true) console.log("Single Statement");


Enter fullscreen mode Exit fullscreen mode

That's the reason we dont need Curly Braces {} in if condition because it's a Single Statement
We use {} to provide a block, to have multiple statements

Example



if(condition){
  line1;
  line2;
  ...
} else {...}

function hello(){
 line1;
 line2;
 ...
}


Enter fullscreen mode Exit fullscreen mode

Scopes in Block v/s Global

let & const are block scoped and var is global scoped.

How?

Example again! Let's say we execute this code



{
  var a = 10; //global
  let b = 20; //block
  const c = 30; //block
}


Enter fullscreen mode Exit fullscreen mode

Proof

Browser Console Proof

Shadowing

It is a concept of js where a variable declared using var hides the global scoped variable



var a = 10;
{
  var a = 100; // this 'a' shadows the global scoped 'a'
}
console.log(a); // results 100


Enter fullscreen mode Exit fullscreen mode

But let and const works differently because they do not exist outside the current scope



let b = 10;
{
  let b = 100;
}
console.log(b); // results 10

let c = 1;
{
  let c = 10;
}
console.log(c); // results 1


Enter fullscreen mode Exit fullscreen mode

Illegal Shadowing πŸ˜΅β€πŸ’«

It is when we try to scope a let declared variable using a var.



let a = 100;
{
  var a = 10; // Error! Illegal Shadowing
  let a = 2; // works just fine!
}


Enter fullscreen mode Exit fullscreen mode

SyntaxError: Identifier 'a' has already been declared

Closures πŸ˜Άβ€πŸŒ«οΈ

A function bundling with its lexical scope is closure.

It's easy with an example



function first() {
  var a = 10;
  function second() {
    console.log(a);
  }

  return second;
}
...
let getFunction = first();

/* after this line, instance of 
first() function is popped out of 
the call stack */
...
getFunction(); // outputs: 10;


Enter fullscreen mode Exit fullscreen mode

Theoretically it should not work as the identifier a needs to be outside the scope BUT when the second() function is returned it comes with its lexical scope as well. That's what exactly closure is.

Tricky Interview Question on setTimeout and Closures

Problem Statement - Print numbers from 1 to 5 with an interval of 1 second each.

You might get the confidence that this is a simple question and will come up with a code looking like this πŸ‘‡



for (var i = 0; i <= 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, i * 1000);
}


Enter fullscreen mode Exit fullscreen mode

Above code would go wrong (why?) by printing 6 in each line. and can be fixed by just using a let instead of a var

What if?

The interviewer asked you to do it with var only?

Relax don't sweat out. I'll tell you what to code and explain it how it works.

Here's the code that you're interested in πŸ˜†
with the explaination



for (var i = 0; i <= 5; i++) {
  // used var
  function closure(i) {
    setTimeout(() => {
      console.log(i);
    }, i * 1000);
    closure(i);
  }
}


Enter fullscreen mode Exit fullscreen mode

Identifying the problem

  • Well the problem with the previous code using var was js maintains an execution context and the way the setTimeout() works is it stores the callback function and attaches a timer to it and goes to the next line.

  • as the variable i does not exists in the callback function it points to the outside reference of i from the for loop.

  • Now it creates 5 copies of functions with the timer and now by the timer expires js does not wait, for loop ends. it is just too late. the value of i becomes 6 at last.

Fixing the problem

Fix 1: using let declaration

We have discussed above that let is block scoped, the answer lies within that line.

When we use the let it creates separate blocks for its memory allocation. whereas in case of var all 5 functions were pointing to the same memory space available in the global execution context

Fix 2: using closures or functions

This will actually provide them a new copy of i in it everytime the setTimeout() was called

Types of Writing Functions

Function Declaration



function hello() {
  console.log("Like This Blog and star the repo");
}


Enter fullscreen mode Exit fullscreen mode

Function Expression



const callAPI = async function () {
  const data = fetch("https://somesite.io/get/data/1232");
  return data;
};


Enter fullscreen mode Exit fullscreen mode

Parameters v/s Arguments



function greet(name) {
  // identifier name is a parameter
  console.log(`Hello ${name}`);
}

greet("Gautam"); // "Gautam" is an Argument


Enter fullscreen mode Exit fullscreen mode

First Class Functions

  • functions having functions in their arguments.

  • The ability of functions to be used as values and be able to return and pass as arguments to another function.



function first(doesSomething) {
  doesSomething();
}

first(() => {
  console.log("hello World");
});


Enter fullscreen mode Exit fullscreen mode

Callback Functions in JS

These functions are sent in the arguments of another functions and are used respectively whenever needed,



setTimeout(function () {
  console.log("Timer");
}, 5000);
function x(y) {
  console.log("x");
}

x(function y() {
  console.log("y");
});


Enter fullscreen mode Exit fullscreen mode

Arrow Functions

  • These functions are introduced in ES6 or EcmaScript 6 (2015)
  • They just allow us to write shorter syntaxes

Before



function addOne(addNumber) {
  return 1 + addNumber;
}


Enter fullscreen mode Exit fullscreen mode

After



const addOne = (addNumber) => 1 + addNumber;


Enter fullscreen mode Exit fullscreen mode

Above method allows us to write functions without using the function keyword.


If you liked reading till here. please like this blog and go to github for the codes and please star the repository.

Top comments (12)

Collapse
 
damian_cyrus profile image
Damian Cyrus

This was a nice wrap up reminder.

And I am always surprised how arrow functions get longer (like on your first line) than the normal one πŸ˜ƒ

It can be shorter in case of no need for writing β€˜returnβ€˜ like:

function addOne(addNumber) {
  return 1 + addNumber;
}

const addOne = (addNumber) => 1 + addNumber;
Enter fullscreen mode Exit fullscreen mode

Thanks for the joyful read.

Collapse
 
localhostd3veloper profile image
Gautam Anand

Thank you sir for the suggestions.
I’ll edit it right away ❀️

Collapse
 
masudalimran profile image
Masud Al Imran

There are new things to learn about JavaScript every day. The "print numbers from 1-5" interview question had me wondering how & why is it a thing.

Collapse
 
localhostd3veloper profile image
Gautam Anand

Indeed there's always something new to learn, everyone out there has their own way of explaining things.
Also, I love that knowledge is free <3

Collapse
 
alchemylab profile image
Luigi Pesce

Nice recap, thanks for sharing πŸ‘πŸ»

Collapse
 
zeeshanahmadkhalil profile image
Zeeshan Ahmad Khalil

Why you didn't used setInterval instead of setTimeout?

Collapse
 
localhostd3veloper profile image
Gautam Anand

They both have different functionalities, and to show asynchronus code I used setTimeout( ),

setInterval repeats the code for the specific number of times till its stopped.

Collapse
 
kwakyebrilliant profile image
a_moah__

Nice

Collapse
 
dandediu profile image
Dan Dediu

This is an excellent article! Thank you. Suitable for recapitulation and beginners.

Collapse
 
uabhisheknair profile image
uabhisheknair2001

Well written for beginner friendly.

Collapse
 
technologymoment profile image
TechnologyMoment

It's a valuable resource for beginners and a helpful refresher for experienced developers. Well-structured and practical. πŸ‘πŸ‘πŸ‘

Collapse
 
jeffch19 profile image
Jeffrey Cummings

Great article to help a beginner like myself!!