# Let's get down to the nitty-gritty of  JavaScript! (Part 1)

# 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.

```javascript
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: 
```javascript
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 

```javascript
// 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: 
```javascript
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 

```javascript
// 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: 
```javascript
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 

```javascript
// On Chrome Console
Inside 10
Outside 10
Global 10
```

## 2. Functions

A normal function will look like this in JavaScript.

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

square_root(10);
```
 And a hoisted Function will look like this.

```javascript

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. 

```javascript

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.

```javascript

First SQRT
Uncaught TypeError: sqrt_n is not a function

```

Some Differences in function declaration and function hoisting.

|Function Declaration | Function Expression|
|-----|--------|
|1.	A function declaration must have a function name.|A function Expression is similar to a function declaration without the function name.      |
|2.	Function declaration does not require a variable assignment.  |Function expressions can be stored in a variable assignment.     |
|3.	These are executed before any other code.| Function expressions load and execute only when the program interpreter reaches the line of code. |
|4.	The function in function declaration can be accessed before and after the function definition.| The function in function declaration can be accessed only after the function definition.|
| 5.	Function declarations are hoisted | Function expressions are not hoisted. |



## 3. Arrays

Let's start with a simple array.


```JavaScript
let arr = ["Apple", "Banana", "Kiwi"]
console.log(arr)
```
It will look like this on the Chrome console

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

Some more functionalities of an array in JS. 

```JavaScript
// 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
```