You need to Know About JavaScript- Part Two

I have written about basic javascript in my previous article in “You need to Know About JavaScript”, I will explain some more beginner javascript issues in this article. If you are a beginner javascript programmer or curious about javascript then you should read this article. We will discuss some basics about Hoisting and Es6 Bloc Lever variable, Primitive values, Objects, Functions, Js Error Handling, Json Error Handling, and more.
Here I explain the core concepts of them, I will do a more elaborate discussion in another article.

Js Hoisting

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

Block-Level Declarations

Bloc level variable declaration writes into the {} and this variable can be accessed from these braces and not outside the braces.

Understanding of JS Primitive

Primitives values are numbers and strings among others things. There are 7 primitive types and an Object type.
number

1.bigint
2.string
3.boolean
4.null
5.undefined
6.symbol

Js Objects

In JavaScript, an object is a standalone entity, with properties and type. Compare it with a car, for example. A car is an object, with properties. It has a color, a design, weight, a material, it is made of, wheels etc.

Example
var myCar = {
make: 'Ford',
model: 'Mustang',
year: 1969
};

Js Functions

In JavaScript, a function allows you to define a block of code, give it a name and then execute it as many times as you want.
A JavaScript function can be defined using function keyword. I will discuss functions in detail and it’s parameters in a different article sometime.
Note: If you are writing several “helper” functions and the code that uses them, there are three ways to organize the functions.

Example
function functionName(param) {
return param+ param;
}

JS Coding Style

Your code should be human readable, clean, well commented, meaningful naming for variables and functions and here I am giving some tips.

Curly Braces

In most JavaScript projects curly braces are written in “Egyptian” style with the opening brace on the same line as the corresponding keyword — not on a new line. There should also be a space before the opening bracket, like this:

Example:
if (condition) {
// do this
// …and that
// …and that
}
Other Practice you should try
(Good) if (n < 0) alert(`Power ${n} is not supported`); //No braces needed before alert
(Bad) if (n < 0)
alert(`Power ${n} is not supported`); //Bad practice, use braces before alert

Line Length:
Nobody likes to read a long horizontal line of code. It’s best practice to split them into small lines.

Indents:
A horizontal indentation is made using either 2 or 4 spaces or the horizontal tab symbol, but it's an old tradition of coding.
For instance, we can align the parameters with the opening bracket, like this

try(parameters,      
aligned, // 5 spaces padding at the left
one,
two,
three
) { // ... }

You can use js beautifier in your code editor extension.

JS Comment

In general, we use comments in our code to describe how and why the code is written and what should be the output, or many more.
comments can be single-line: starting with // and multiline: /* ... */.

Bad Practice of Comment!
Beginner programmers describe in comments to explain “what is going on in the code”. Like this:

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

Good Practice of Comment
The amount of such “explanatory” comments should be minimal. Seriously, the code should be easy to understand without them.

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

Js Error Handling using try…catch

If you are an experienced programmer or a beginner you have to face error no matter how much experience you are,

Usually, the script dies immediately if the code has an error. But there’s a syntax construct try...catch that allows us to “catch” errors so the script can be interpreted, instead of dying

When an error occurs, JavaScript generates an object containing the details about it. The object is then passed as an argument to catch:

Syntax:
try {
// code…} catch (err) {// error handling}

Note: The code will be inside the try{ } section if error found in any single line in the try section then the interpreter will jump to the catch{} section.

Try…catch error property

The Error object has three properties:

  • message: a string with the error message.
  • name: the error's type.
  • stack: a stack trace of functions execution.
Example:
try {
lalala; // error, variable is not defined!} catch (err) {alert(err.name); // ReferenceErroralert(err.message); // lalala is not definedalert(err.stack); // ReferenceError: lalala is not defined at (...call stack)// Can also show an error as a whole// The error is converted to string as "name: message"alert(err); // ReferenceError: lalala is not defined}

JSON Error handling using try…catch

This way, if something’s wrong with the data, the visitor will never know that (unless they open the developer console). And people really don’t like when something “just dies” without any error message.

Example:
let json = "{ bad json }";
try {let user = JSON.parse(json); // <-- when an error occurs...alert( user.name ); // doesn't work} catch (err) {// ...the execution jumps herealert( "Our apologies, the data has errors, we'll try to request it one more time." );alert( err.name );alert( err.message );}

When try…catch does not work

Try is not work for syntax error.
Its not work for setTimeout function
If you declare a function in try{} then it will not work, you should place try…catch into the function

--

--

MD. Rajibul Hasan | MERN Stack Developer

The Founder of Apps Maker BD and Frontend Developer at Penta Global Ltd.