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 = 0
as 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, num1
values 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 tocatch(err)
block. theerr
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:
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 browservar name = "Hossain";
console.log(window.name); // Hossainvar 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 browserlet name = "Hossain";
console.log(name); // Hossain
console.log(window.name === name); // falseconst 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
.