JavaScript: 10 Things Should Understand

Image is taken from Pexels

JavaScript is one of the most popular programming languages at this time. So, if you are a JavaScript fan then those things you have to learn. Let’s go then.

Comments

It's not only for javascript, for all types of language. Comments are mainly used for understanding the code that what's going on in this line or else. That's good but you have to remember that the fewer comments are more efficient easy to understand the code. Most newcomers are doing explanatory comments for more details that make the code scribble and hard to read. So you have to concentrate on it. a good variable name or function name can also help to understand the code.

Try…..Catch

try….catch are combined with two blocks one is try{} and another is catch{}. So what will actually happen? Let's see

try{
  //codes
}
catch(err){
  //handle error
}

So, in the process, three things will happen.

1. try will run the code.
2. if there is no error catch will be skipped and the code will execute.
3. if the code has some issue or faces any error then try will stopped and catch will be started.

//case 1
try {
  alert('Hello');
// code is ok and has no error 
//catch skipped
} catch (err) {
  alert('Erorr found');
}
//case 2
try {
  Hello; // error
  alert('How are you '); 
//catch will start
} catch (err) {
  alert(`Error has occurred!`);
}

Just remember the code must be runable and should be valid JavaScript code. because javascript first read the code then run the code. if Javascript can’t even read the code how should it run or find the error? so watch that out.

Error

When an error occurred, JavaScript generates an object that contains detailed information about it and sent it through the catch{}. Basically, an error has two properties.

1. Name: It represents the name of the type of error found in the code.
2. Message: It has a description of the type of error that humans can understand.

Global Catch

Suppose there is an error that occurred outside the try….catch. What will happen then? When a resource failed to load or something else an error event using interface ErrorEvent is fired at window and window.onerror()is invoked.

window.onerror = function(message, source, lineno, colno, error) {      
  //code 
};

1. message: error message
2. source: where the error raised
3. lineno: line number where the error raised
4. colno: column number where the error raised
5. error: error object.

ES6: Block-Binding

It is very tricky to declare variables or binding in JavaScript. In C-based language, variables are created where the declaration happened. In javascript, the variable created depends on how to declare them. For this, the classic var declaration is a little confusing. For this ES6 introduces block-level binding (let, const)for best use.

var a = 10;
const b = 20;
let c = 30;

ES6: Var Declaration & Hoisting

Variable declaration is treated as they are declared at the top of function inside a function or globally at the outside of a function, it doesn't matter that where it is actually called. This meant that variables within smaller code blocks, such as if-else statements or for loops, were not actually local to those blocks. That is called hoisting.

function getColor(condition) {
  if (condition) {
     var color = "red";
     // other code
     return color;
  } else {
     //color exist here with the value undefined
     return null;
  }
     //color exist here with the value undefined
}

ES6: Block Level Declaration: Let

Its working procedure is almost the same as var but has the limitation of the variable’s scope to its current blocks.

function getColor(condition) {
  if (condition) {
    let color = "red";
    // other code
    return color;
  } else {
    //color doesn't exist here
    return null;
  }
    //color doesn't exist here
}

ES6: Block Level Declaration: Const

Const declaration is more restricted to variable treated and modified. If once the const declared you can not modify the variable. If it does it throws an error. It is very for the static value.

const color = "red";
color = "blue"; 
//It throw an error

ES6: Object & Const

In an object when it declared by const we can change or modify the object properties. But we can not change the object itself.

//valid
const car = {
  make: "Honda"
};
car.make = "Toyota"
//invalid
const car = {
  make: 'Honda'
};
car = {
  make: 'Toyota'
};

ES6: Block Binding Loop

In loop var caused so much confusion. Let’s have a look

for (var i=0; i < 10; i++) {
  console.log(i); //1,2,3,4,5,6,7,8,9
}
// i is still accessible here
console.log(i); //10

In other languages, only for loop only accessed i variables, but in JavaScript, after the loop, i still can be accessible because of variable hoisting and it would cause more issue if we have multiple loops inside the function. That’s why let prevent the problem.

for (let i=0; i < 10; i++) {
  console.log(i); //1,2,3,4,5,6,7,8,9
}
// i is not access here
console.log(i);

But if we use const in here it can only access once inside the loop and block the loop.

for (const i=0; i < 10; i++) {
console.log(i); //1
}
// i is not access here
console.log(i);