10 Hecks of JavaScript

Error Handling, “try..catch”:

We can be so good at programming, but still, we will make a lot of mistakes in our code. After causing the error, the application would be stuck at that point and sometimes terminate.

But we do not want this, so JavaScript brings a system of catching the error to make it useful and understandable for the user using a try…catch method.

Syntax:

The try..catch construct has two main blocks: try, and then catch:

try {
  // code...
} catch (err) {
  // error handling
}

If we want to see the flow chart of try…catch method, it is as below,

It works like this:

1. First, the code in try {...} is executed.
2. If there were no errors, then catch(err) is ignored: the execution reaches the end of try and goes on, skipping catch.
3. If an error occurs, then the try execution is stopped, and control flows to the beginning of catch(err). The err variable (we can use any name for it) will contain an error object with details about what happened.

Comments:

Comments can be single-line: starting with // and multiline: /* ... */.

We use comments to describe why and how the code works. But a bad practice of commenting is using it to elaborately explaining “What is going on in the code”

Good Comments are used to “Describe the Architecture” and “Document function parameters and usage”

Cross Browser Testing:

Cross-browser testing is the practice of making sure that the web sites and web apps you create work across an acceptable number of web browsers. As a web developer, it is everyone’s responsibility to make sure that not only do our projects work, but they work for all of our users, no matter what browser, device, or additional assistive tools they are using.

Block Bindings:

Traditionally, the way variable declarations work has been one tricky part of programming in JavaScript. In most C-based languages, variables (or bindings) are created at the spot where the declaration occurs. In JavaScript, however, this is not the case. Where your variables are actually created depends on how you declare them, and ECMAScript 6 offers options to make controlling scope easier.

Var Declarations & Hoisting:

Variable declarations using var are treated as if they are at the top of the function (or global scope, if declared outside of a function) regardless of where the actual declaration occurs; this is called hoisting.

Block-Level Declarations:

Block-level declarations are those that declare variables that are inaccessible outside of given block scope. Block scopes are created:

1. Inside of a function
2. Inside of a block (indicated by the { and } characters)

Block Binding in Loops:

Perhaps one area where developers most want block-level scoping of variables is within for loops, where the throwaway counter variable is meant to be used only inside the loop.

Emerging Best Practices for Block Bindings:

While ECMAScript 6 was in development, there was the widespread belief we should use let by default instead of var for variable declarations. For many JavaScript developers, let behaves exactly the way they thought var should have behaved, and so the direct replacement makes logical sense. In this case, we would use const for variables that needed modification protection.

However, as more developers migrated to ECMAScript 6, an alternate approach gained popularity: use const by default and only use let when we know a variable's value needs to change. The rationale is that most variables should not change their value after initialization because unexpected value changes are a source of bugs. This idea has a significant amount of traction and is worth exploring in your code as you adopt ECMAScript 6.