JavaScript myths you probably did not know

Table of Contents

• JavaScript Types
• Try-Catch
• ES6+: Var vs Let vs Const

JavaScript Types

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

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.

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

ES6+: Var vs Let vs Const

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

Now let's run this code and find out what's the result.

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.

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.

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.

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

person.age= 24

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