Understand JavaScript Modern Syntax and Some Functionality

1. Default parameters

In general, the default value of the function parameter in JavaScript is undefined. Notice the following example: If you do not give any value of num2 while making a sum call here, num2 = undefined in the sum function, And num1 + num2 will give sum = NaN

function sum(num1, num2){
  return num1 + num2;
}
console.log(sum(25)) // NaN
console.log(sum(25, 5)) // 30

But the parameters of the function can be set by default in ES6. The following example is shown by setting num2 = 0as the default value:

function sum(num1, num2 = 0){
  return num1 + num2;
}
console.log(sum(25)) // 25
console.log(sum(25, 5)) // 30
console.log(sum(5, undefined)) // 5

2. Spread Operator (…)

When we see … in javaScript code, either it rests parameters or Spreed operator.

Spread operators can pass many arguments to call a function in a list of arrays.

function sum(num1, num2, num3){
  return num1 + num2 + num3;
}
const number = [10, 20, 30];
console.log(sum(...number)); // 60

When we went copy alike array or object in an array or object. Flowing the example below, num1values copy in num2 from num1 array, it’s not changed num1 array. it’s just copied from num1.

const num1 = [10, 20, 30];
const num2 = [...num1, 25, 36]
console.log(num2) // [ 10, 20, 30, 25, 36 ]

3. Arrow functions

The arrow function is very simple to create a function. it handles one-line syntax to create a function. and when it uses single-line syntax, it not use curly braces and not use to return. when it pass no arguments, it looks like this:

const name = () => 'Hossain Rabbi';
console.log(name()) // Hossain Rabbi

If it passes only one argument, it cannot use parentheses.

const multiply = x => x * x;
console.log(multiply(5)) // 25

If it passes one more argument, it uses parentheses, and when it uses multiple lines. it has given curly braces and returns statements.

const sum = (a, b) => {
  return a + b
};
console.log(sum(20, 5)) // 25

4. Comments

Comment can be a single line and multiple lines, Single line start: // and multiple lines: /*...*/

Single line:

// this is single line comment

Multiple lines:

/*
  const a = 20;
  const b = 25;
  
  console.log(a + b);
*/

5. Error handling, “try…catch”

No matter how great we are programming. sometimes our code in error, unexpected input in user, and wrong server response. but try...catch syntax easily handles errors from JavaScript code.

• First, the code is try{...} executed.
• If code is no error, then catch is ignored,
• If code in error, then try execution is stoped and it goes to catch(err) block. the err object details in error.

If no error.

const a = 66;
const b = 4;
try{
  console.log(a + b); // 70
}catch(err){
  console.log(err); 
}

If error.

const a = 66;
try{
  console.log(a + b);
}catch(err){
  console.log(err) // Error: b is not defined
}

6. Coding Style

Our code must be easy and clean as possible.

Curly Braces: Curly Braces most use in the javaScript project. it’s opening braces then some line code and closing braces. in this case: use opening braces before one space.

if (condition) {
  // something...
}

If one line if block, not need to use curly braces. and in this case not use the second line to console.

const a = 10;
if (a) console.log(a);

The best variant is:

const a = 10;
if (a) {
  console.log(a);
}

Here give you to some javaScript style guideline, you can choose anyone:

• Google Style Guide
• Airbnb Style Guide
• Idiomatic.JS
• StandardJS

7. Block-Level Declarations

Block Level Declarations is declaring a variable inside a function or inside a block {}.

function myName() {
  /* 
  This name is block level variable. 
  inside of a block {} 
  */
  const name = 'Hossain';
  return name;
}
console.log(myName()); // Hossain

8. Block Binding in Loops

When we declare a for loop with var variable, the variable use outside in the loop.

for(var i = 0; i < 5; i++){
  console.log(i);
}
console.log(i); // 5

But the other programming language, for loop block-level scoping in the default. in this case, if we use let variable in the for loop. it being a block-level scope.

for(let i = 0; i < 5; i++){
  console.log(i);
}
console.log(i); //  i is not defined

9. Global Block Bindings

let and const are different form var is in their global scope behavior. when var is used in the global scope, it creates a new global variable. which is a property in the global window objects. This means we can accidentally overwrite exciting global using var

// in a browser
var name = "Hossain";
console.log(window.name); // Hossain
var name = "Rakib";
console.log(window.name); // Rakib

It does not save the form being overwrite using var variable declaration. but if you use let or const in the global scope, a new binding is created in the global scope, but it not adding a property in the global window object. this means we can not overwrite exiting global using let and const

// in a browser
let name = "Hossain";
console.log(name); // Hossain
console.log(window.name === name); // false
const name2 = "Rakib";
console.log(name2); // Rakib
console.log(window.name2 === name2); // false

10. Emerging Best Practices for Block Bindings

More developers use ECMAScript 6. If not need to change the variable value we can use const and if not need to change a variable value, we can use let .