JavaScript myths you probably did not know
Tags: javascript, beginners, webdev
Published: 2021-05-06 17:58:13

## Table of Contents
  * [JavaScript Types](#chapter-1)
  * [Try-Catch](#chapter-2)
  * [ES6+: Var vs Let vs Const](#chapter-3)
  

### JavaScript Types <a name="chapter-1"></a>

You probably heard about primitive values a lot. You probably asked yourself a lot *What the heck is a primitive value?* Primitive values are like the sun, which is miles away from us, but it will always be there for us. It will always rise in the east and set at the west, and you can not do anything to change its direction. Primitive values are a constant like the Sun that *cannot* be changed. If you look at the below examples,

```
console.log(typeof(3)); // expected output number
console.log(typeof('Shahriar')); // expected output string
console.log(typeof(undefined)); // expected output undefined
```

*Numbers* and *Strings* are the most common primitive values. Both of them are infinite. Just think it like this if you start counting a number and start writing a string, will there be an end? There are three more types of primitive values. Those are *Boolean*, *Null* and *Undefined*, but they are limited number. Why are they called limited? *Boolean* has only two values, `True` and `False`. There can never be a third *Boolean* type just as much there can never be a second *Null* and *Undefined*.


### Try-Catch <a name="chapter-2"></a>

As a programmer, we all encountered numerous errors. The error may occur for a different reason, and you may not even find out where it even came from. In the case of JavaScript, the script **dies** if it encounters an error. There is a syntax called `try-catch`, which helps programmers catch errors more efficiently. The script will not die if your code is inside a `try-catch` block. 

# Try-Catch syntax

The `try-catch` syntax has 2 main blocks.

```
try {

  // code...

} catch (err) {

  // error handling

}

```
## How does it work?

1. First, the `try` block will be executed.
2. If there are no `errors`, then the `catch` block is ignored.
3. IF there are `errors`, then `try` block execution is halted and 
  `catch` block is executed to catch the error.
4. The `err` variable contains an `Error` object with the error details. You can give the `err` variable any name you name want. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44i226fiohdmdak2qa4a.png)

The `try-catch` block only works if your code is runnable. If your code has syntax errors, the `try-catch` won't even be executed. It is because JavaScripts first read the code and run it. If an error occurred while reading the code, it is called a `parse-time` error. These `parse-time` errors can't be recovered. This is because the JS engine can't understand the code properly. The `try-catch` only catches errors that occur in valid code. Such errors are called `run-time` errors. 

# `try-catch` example

```
try {

  alert('Start of try runs');  // (1) <--

  lalala; // error, variable is not defined!

  alert('End of try (never reached)');  // (2)

} catch (err) {

  alert(`Error has occurred!`); // (3) <--

}

```

# `try-catch` only works at runtime

```
try {
  {{{{{{{{{{{{
} catch (err) {
  alert("The engine can't understand this code, it's invalid");
}
```
For more in-depth information about `try-catch` please visit this [link](https://javascript.info/try-catch)

### ES6+: Var vs Let vs Const<a name="chapter-3"></a>

ES stands for ECMAScript. ECMAScript is simply a standard for coding. JavaScript implements ECMAScript. Think it like that ECMAScript is simply a layer over JavaScript, and JavaScript implements the standards of ECMAScript. JavaScript was added to the ECMA standard back in 1997, and that was called ES1. ES6 was released in 2015. From the release of ES6, there came many big changes in JavaScript. One of those changes was `let` and `const` keywords. This section will describe more about the differences `var`, `let` and `const` and their scopes.

| Var         | Let         | Const         |
| :---        |    :----:   |          ---: |
| Global & function scope      | Block Scope       | Block Scope   |
| Value can change   | Value can change        | Value can't change      |

So the first question is What is a Scope? Scope in JavaScript is very different from other programming languages. Specially people coming from typed language like C,C++ or Java will find it pretty weird. Well think of Scope like a relation between parent world and child world. Child can get access to Parent world but Parent can not access to child world. If you remember this simple information you have understood the fundamentals of Scope in JavaScript. Parent world refers to a variable which is declared openly or in root of the program. It means the variable is not inside a function or a statement.

`Var` was heavily used before ES6 introduced `let` and `const`. `Var`is used withing *Global* and *function*/*local* scope. Now, what is a global scope? *Global Scope* is the whole application scope. If you define any variable in the global scope, it can be accessed anywhere in the application. *Function*/*Local Scope* is defined within a specific function. All the variables declared inside the specific function you can use it.  Think of it like this, *Global Scope* is the parent and *Function*/*Local Scope* is the child. *Block Scope* is defined inside brackets. The following picture will help you understand the scoping concept more clearly.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umevp5dwsexhqkuk5arr.png)

Now let's run this code and find out what's the result.
```javascript
function es6Example(){
   if(true){
var firstName = "Shahriar"; // exists in function scope
let lastName = "Saleh"; // exists in block scope
  }
console.log ("Var Access: " ,firstName); // expected output Shahriar
console.log ("Let Access: " ,lastName); // expected output: lastName is not defined.
}
```
You can see that we can get the output of `firstName` as it is *Function Scope*, it can be accessed within the `es6Example` function. On the other hand, `lastName` variable is undefined because it can not be accessed outside its *Block Scope*. 

Many people seems to have misconception regarding usage of `Var` & `Let` because both can be used to reassign the value of a variable. Both are very different from each other. `Var` works in *Global/Function Scope* whereas `Let` works in *Block Scope*. `Var` can be use to redefined a `variable` which is very risky. You can redefine a `variable` 10000 times and JS will count the last `variable`'s value. So ES6 introduced `Let` to stop this confusion. You can't redefine a value using `Let` but can only reassign it inside it's scope.

```javascript 
var myName = 'I am Shahriar';

console.log(myName) // expected output: I am Shahriar

if(true){
  var myName= 'I am Fahim'
}
console.log(myName) // expected output: I am Fahim

if(true){
 let myName= 'I am Fahim'
 let myName= 'I am Shahriar'
 console.log(myName) // SyntaxError: Identifier 'myName' has already been declared. 
}
```

`Let` & `Const` both were added for block scoping. The major difference between `Let` & `Const` is you can reassign a new value to a variable that is declared using the `let` keyword but you can not reassign a new value to a variable that is declared using the `const` keyword.

```javascript
let a = 5;
a=6 ;
console.log(a); // expected output : 6

const b= 5;
b=6;
console.log(b); // expected output Uncaught TypeError: Assignment to constant variable.
```
You can though update a variable using `Const`.

```javascript
const person={
  name: 'Shahriar',
  age: 23
}

person.age= 24

console.log(person)// expected output : { name: 'Shahriar', age: 24 }
```