JavaScript: Error handling, Code Formation, Cross browser testing and ES6

6 min readMay 6, 2021

How many developer in the world are now using JavaScript ! The answer should amaze us. We use this language for plenty of use. Yet, some of the topic of JavaScript are still vague. Again we do not know how to write our code properly, not only inside our editor, but for browser too. Today I will cover some of the important topic that are included in almost every programming language. Caption says everything, I hope!

Error handling in JavaScript

JavaScript is a loosely-typed language. Generally, it does not give compile-time errors. JavaScript provides error-handling mechanism to catch runtime errors using try-catch-finally block, similar to other languages like

Java or C#. The syntax of try-catch-finally block is:

try {
  alert("Welcome to my blog!");  // code
} 
catch(err) {
  alert(err);  // error handling
} 
finally {
  // executes always
}

How it works? Code inside the try block executes first. If there are any error(s), JavaScript stops compiling, it then capture the error(s), and passes it to catch block. If catch block may have any parameter like “err” or not. And after executing code of catch block when we can understand where and what error happens, the script goes to finally block. It executes every time whether there are error(s) or not.

To read more about try…catch…finally, click here. I have found this useful.

Runtime Error/ Exceptions

The JavaScript engine first reads the code, and then runs it. The errors that occur on the reading phase are called “parse-time” errors and are unrecoverable (from inside that code). That’s because the engine can’t understand the code.

So, try...catch can only handle errors that occur in valid code. Such errors are called “runtime errors” or, sometimes, “exceptions”.

Error Object

When an error occurs in the try block, JavaScript creates an object named and passes it to the catch block. This object contains some properties. These are:

name: name of the error, e.g., Reference Error, Syntax Error etc.
message: How a user should be informed to this error.
stack: Detail of the error.

Throw and Rethrow in Error handling

When there is no error in the code, but we want to create an error, we use throw operator. Shocked? Why we will create our own error? Look at the code below:

function getAName(name) {
  if (name.length < 10) {
    throw 'very short name!';
  }
}try {
  getAName("Misbah");
} catch (e) {
  console.error(e);
  // expected output: "very short name!"
}

Here, within try block, there is no error shown by machine, but we want to make our name longer than 10 characters, so if a user type a name with a length less than 10, it will give an error.

Rethrow in JavaScript: In JavaScript, catch only process errors that it knows and “rethrow” all others.

What is Cache?

When a user often request the same data, then it works fine not to load whole url he/she searched for, but to show the data he/she often want to see. This process is called caching. By providing commonly requested data to users who often request that data when calling the same functions, you can avoid a lot of extra data generation, optimize the request workflow, reduce time to delivery.

There are three types of caching,

Client caching
Server caching
Hybrid caching

To improve user experience, cache technology is arrived. But for this, data cost, storage capacity … etc. are needed. User always wants less data cost and less memory capacity for cache but higher performance, whether server always wants highest control, security. To fill up both side, Hybrid Caching is arrived. It works like, ‘best for all’.

Cross Browser Testing

A non-functional testing to check whether a website works as intended when accessed through different browsers like Firefox, Chrome, Edge, Safari, operating systems like Windows, macOS, iOS and Android.

When one site is used in different browsers, then it is recommended to check if that website works on every browsers. Cause each browser may have some different working style. So, to test our website works fine in all the target browsers, Cross browser testing is important.

Workflows for Cross Browser Testing

The four steps of workflow of cross browser testing:

Make an initial planning with client.
Make the code development
Do testing/ discover bugs
Fix the errors and bugs

…

Well, now let’s talk about ES6. We know it. But I am going to cover some of its topics.

Block Bindings in ES6

The way a variable should work - within a block or not, is simply we can call block bindings. Variable hoisting triggers let, const and var. When we define a variable as var, it is accessible from anywhere — even from outside of any block. but when declaring a variable with let and const makes us to access the variable within the block only.

if(condition) {
  var name = 'Misbah';
  let name2 = 'Uddin';  return ;
}
console.log(name) // output will be 'Misbah'
console.log(name2)  // output will be undefined

const is used when the value of the variable is fixed.

Block Binding in Loops

One more thing that differs from other programming language is block binding in loops. Notice the example below:

for (var i=0; i < 10; i++) {
    process(elements[i]);
}

// i is still accessible here
console.log(i);                     // 10

Now, if we run the same loop declaring the variable i with let,

for (let i=0; i < 10; i++) {
    process(elements[i]);
}

// i is not still accessible here
console.log(i);                     // throws an error

But in C, Java, or other programming language, block binding in loops doesn’t work. So, what do you think?? JavaScript is extra smart? Well, sort of.

Functions in ES6

There are several types of features in the new ES6 functions. We can set default parameter value in a function.

function add(firstNumber = 50, secondNumber = 30) {

    // the rest of the function

}

This function will still be working even if we do not provide firstNumber and secondNumber. Cause we set their default values.

Working with unnamed parameters in function of ES6: Rest parameters

A rest parameter is indicated by three dots (...) preceding a named parameter. That named parameter becomes an Array containing the rest of the parameters passed to the function, which is where the name "rest" parameters originates. For example, look below code:

function add(firstNumber, ...restNumbers) {
    

    for (let i = 0, len = restNumbers.length; i < len; i++) {
        // some code
    }

    return <something>;
}

The rest parameters(restNumbers) allows to specify that multiple independent arguments should be combined into an array.

The spread operator

If we want to simply copy all elements of an array to another array, we can now use this,

const array1 = [4, 5, 6, 6, 7, 9];const newArray1 = [...array1];console.log(array1);  // [4, 5, 6, 6, 7, 9]
console.log(newArray1);  // [4, 5, 6, 6, 7, 9]

Thus we can copy using spread operator, though the field of spread operator is not limited within just copying an array or object.

…

Now, Let’s talk about code formation — one of the things that developer forgets.

Code Formation

Code we write, actually for developing. But to be understandable to anyone, writings should have a formation. I have collected a picture from a site, it shows many things.