Introduction

JavaScript is one of the more popular programming languages, especially in web development. I started learning JavaScript because it fascinates me and what's the best way to learn any language?

Yes, by making some cool projects. Duh!

In this article, we first get down to the basics and slowly move towards some cool concept that is available in JavaScript.

The first thing we start with is variables.

1. Variables

Let's define some variables.

a= 20 // Global Variable
var b = 30 // Function Scope
let c = 50 // Block Scope

Now, we have 3 variables a,b, and c. Let's test them and see how they work in JavaScript.

Case 1:

function fun() {
let a = 5;
if( a===5){
  let f  = 10; // let has a block scope
console.log("Inside",f);
}
console.log("Outside",f); // Error
}

If we try to put this on the chrome console: It will show an Error

// On Chrome Console
Inside 10
**Uncaught referenceError: f is not defined**

This error came because let has block scope. It only works within the body braces {...}.

Now, what if we change let to var? Our code will look like this.

Case 2:

function fun() {
var a = 5;
if( a===5){
  var f  = 10; // var has a function scope
console.log("Inside", f);
}
console.log("Outside",f); // NO ERROR THIS TIME
}

fun()

console.log("Global", f); // ERROR

If we try to put this on the chrome console: It will

// On Chrome Console
Inside 10
Outside 10
Uncaught RefrenceError: f is not defined

This error came because var has a function scope. It only works within the function braces {...}.

Finally, we change 'var' to nothing. Now see the magic.

Case 3:

function fun() {
var a = 5;
if( a===5){
   f  = 10; // now this has global scope
console.log("Inside", f);
}
console.log("Outside",f); 
}

fun()

console.log(" Global", f); //NO ERROR

If we try to put this on the chrome console: It will

// On Chrome Console
Inside 10
Outside 10
Global 10

2. Functions

A normal function will look like this in JavaScript.

function square_root(n){
  console.log("First SQRT");
  return;
}

square_root(10);

And a hoisted Function will look like this.

var sqrt_n = function(){
  console.log("Second Sqrt");
  return;
}

sqrt_n();

The simple difference is if we put compile our source code the "First SQRT" function will be hoisted and saved in the function table but our " Second Sqrt" function will not be saved in the function table and will execute when its turn arises in that order.

So the conclusion is if we call the first function from anywhere it will work but the second function will only work when we call it after its execution is done by its order.

Let me demonstrate.

square_root();
sqrt_n();

// FIRST FUNCTION
function square_root(n){
  console.log("First SQRT");
  return;
}

// SECOND FUNCTION

var sqrt_n = function(){
  console.log("Second Sqrt");
  return;
}

On the chrome console, it will look something like this.

First SQRT
Uncaught TypeError: sqrt_n is not a function

Some Differences in function declaration and function hoisting.

3. Arrays

Let's start with a simple array.

let arr = ["Apple", "Banana", "Kiwi"]
console.log(arr)

It will look like this on the Chrome console

(3)["Apple", "Banana", "Kiwi"]

Some more functionalities of an array in JS.

// On Console
arr; // return -> (3)["Apple", "Banana", "Kiwi"]
arr["length"] // return -> 3 : FIND YOU THE LENGTH
arr.length      // return -> 3 : FIND YOU THE LENGTH
arr.pop()       // return -> "Kiwi"   : REMOVE FROM BACK
arr.indexOf("Banana") // return -> 1 : FINDS YOU THE INDEX
arr.shift(); // return -> "Apple"   : REMOVE FROM FRONT
arr.unshift("Mango"); // INSERT AT FRONT
arr.push("Papaya"); // INSERT AT BACK