Brain Brash Recap With The JS — Part 001

Photo by Greg Rakozy on Unsplash

Hello everyone, today we will be discussing the different items in JavaScript. The points may significantly change. Please, have patience and read this article carefully. Normally, I am going to cover the most important items. They are the JavaScript comments, different syntaxes, coding styles, cross-browser testing, and much more. So without looking for anything. Let’s jump right in.

The “try…catch” syntax

If you want to build a complex web application, you should be familiar with the try…catch syntax. It will give a superpower to your web application. You can easily handle errors with this. Do you want to learn more about this? Let’s get started.

The “try” statement

Before we jumped into the actual code, let’s know a bit about the Try statement. What it’s actually done in the browser? Well, the answer is, the try statement will let you test a block of code before it is executed in the browser window.

try {
 noSuchVariable; // try…catch handles the error!
}

The “catch” statement

Well, we learned about the try statement. Now have a look at the catch statement. What does it do? The answer is, the catch statement will let you help to catch the error that has happened in the try statement.

catch (err) {
 console.log(err.name); // ReferenceError
 console.log(err.message); // noSuchVariable is not defined
 console.log(err.stack); // ReferenceError: noSuchVariable is not defined at (…call stack)
}

Now, What will happen if the code has no error? Well, the answer is, the code will be executed successfully! Hurry!

Let's see an example in CodePen.

Coding Style

This is an important part of a programmer, no matter which language you use to code. Our code must be clean to read. This will helps you and your colleague to understand your code. Knowing coding style is an art of programming. Every programmer must have these pieces of knowledge. Here are some topics about the coding style.

Syntax

A perfect example to start a function:

1. You shouldn’t add any space between a function name and parenthesis. (i.e. “function name()”)
2. You shouldn’t add any space between parenthesis and parameters. (i.e. “(parameter-one)”)
3. You should add a space between parameters. (i.e. “(parameter-one, parameter-two)”)
4. You should add a space followed by Curly braces on the same line. (i.e. “) {}”)

function name(parameterOne, parameterTwo) {}

Line length

You shouldn't long your code horizontally. Because no one is interested in reading a code horizontally. You should insert line brakes in your code. It will raise your code's readability. Usually, 80 or 120 characters is the best practice to write a code. Look at the code below.

if (
  id === 123 &&
  name === ‘Asif Estiak’ &&
  isUser === true
) {
  yourScore();
}

Comments

Commenting on a code is the most important part. Commenting makes a code easier to read and understand. Every programming language has this feature. You should learn about how to comment on a code. At this time, I am only cover this point that how to comment on a JavaScript code. So let's dive right in.

There are always two types of comments in general. One of them is good and one is bad. let's talk about them.

Bad Comment

Look at the code example below.

// This code will do this thing (...) and that thing (...)
// ...and who knows what else...
let very;
let complex;
let code;

There are too many “explanatory” comments that make a code messier. Your code should have easy-to-understand comments with clear descriptions.

Good comments

Look at the code example below.

/**
  * Returns x raised to the n-th power.
  *
  * @param {number} x The number to raise.
  * @param {number} n The power, must be a natural number.
  * @return {number} x raised to the n-th power.
  */
function pow(x, n) {
  ...
}

There no “explanatory” comments here. It makes this code easier to read. This code has easy-to-understand comments with clear descriptions.

Cross-browser testing

Every time you write your code, you should test it on different browsers. Because every browser has a different executable engine. Otherwise, your code will not be working and the user will get confused. So every time you update your code, you should test it on different browsers. For example, you may check your output in Chrome, Firefox, Opera, and Microsoft EDGE.

What is the reason for a cross-browser issue?

• Sometimes the browser application has bugs.
• Different browsers support different technologies.
• Different devices have different compatibilities.

Default parameter value

Sometimes, it’s necessary to insert a default value into a function parameter. Because by default, it is undefined. If you insert a function parameter without set the default value, and if nothing has passed by the time of calling a function. It will be undefined. See the example below.

const a = (b) => console.log(b)
/*
 * If you call this function without passing
 * any value, it will return 'undefined'!
 */
a(); // undefined

You may fix this problem by set up a default value of the b parameter. To do that, at the time of declaring a function, insert the function parameter’s name followed by the equal sign followed by the default value into the parenthesis. Follow the example below.

const a = (b='theDefaultValue') => console.log(b)
/*
 * If you call this function now without
 * passing any value, it will return 'theDefaultValue'!
 */
a(); // theDefaultValue

Note: If you want to insert any number, you may remove the quotation mark.

Some use case of the spread syntax

Nowadays, the spread operator is a useful tool in JavaScript. It is mostly used with arrays and objects. Today we will see some use cases of the spread operator.

Copying an array

Using the spread operator is a convenient way to copy an array. See the example below.

const arrayOne = [1, 2, 3];
/*
 * If you want to copy the arrayOne variable,
 * you need to follow the below code.
 */
const arrayOneCopy = [...arrayOne];
console.log(arrayOneCopy); // [1, 2, 3]

Concatenating arrays

Not only copy, but also you can combine two or more arrays using this spread syntax. It’s called array concatenation. See the example below.

const arrayOne = [1, 2, 3];
const arrayTwo = [4, 5, 6];
/*
 * If you want to combine them,
 * you need to follow the below code.
 */
const combinedArray = [...arrayOne, ...arrayTwo];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

Spread operator with objects

By using the spread operator, you can do the same thing with objects. Let’s see it.

// Coping Object //
const objectOne = {a:'a', b:'b', c:'c'};
/*
 * If you want to copy the objectOne variable,
 * you need to follow the below code.
 */
const objectOneCopy = {...objectOne};
console.log(objectOneCopy); // {a: "a", b: "b", c: "c"}
// Concatenating Objects
const objectOne = {a:'a', b:'b', c:'c'};
const objectTwo = {d:'d', e:'e', f:'f'};
/*
 * If you want to combine them,
 * you need to follow the below code.
 */
const combinedObject = {...objectOne, ...objectTwo};
console.log(combinedObject);
// {a: "a", b: "b", c: "c", d: "d", e: "e", f: "f"}