Most useful things for JavaScript

6 min readNov 3, 2020

01. JavaScript function with default parameter values

The default function parameter allows a function passed a parameter to be initialized with default values if you no pass value then you will see an undefined error message.

Syntax

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

For instance,

If we not passed parameter value when call function, it returns undefined. So we can solve this problem when we make the function set a default value so that the return can’t undefined.

const testDefaultParam = ( param1, param2 = 1 ) => {   return param1 * param2;}console.log(testDefaultParam( 5, 9 )); // expected output: 45console.log(testDefaultParam( 5 ));    // expected output: 5

We can function call with the passed parameter or no pass parameter
If we passed function work with the parameter or not passed function work with default parameter.
Then we solve our problem this default named parameter

02. Spread operator

The spread operator came to javascript and work so much easier for developers. Many codes organized if I use a spread operator.

Traditionally we are coding this way

const age1 = [ 10, 15, 25, 29, 39, 45 ];const age2 = [ 13, 14, 28, 27, 36, 46, 58 ];const allAges = age1.concat( age2 );console.log(allAges);// Expected output// [//   10, 15, 25, 29, 39, 45,//   13, 14, 28, 27, 36, 46,//   58// ]

But if we use spread operator code are many organized

const age1 = [ 10, 15, 25, 29, 39, 45 ];const age2 = [ 13, 14, 28, 27, 36, 46, 58 ];const allAges = [ ...age1, ...age2 ]console.log(allAges);// Expected output// [//   10, 15, 25, 29, 39, 45,//   13, 14, 28, 27, 36, 46,//   58// ]

So we can spread operator use easily and is our code so organized.
The spread operator gets all elements and return makes an array.

03. Arrow Functions

We do not imagine without function. The function can work easily and many organized. Since we ate using javascript function but javascript es6 came to a new function called arrow function.

Traditionally function declare system:

function nameOfFunction() {    //do that}nameOfFunction(); // Return our expected output

If we use the arrow function then we can declare this way:

const testFunc = () => console.log("Here we can do that");  // Return our expected output

Single line code & without parameter so we can use arrow function this way.

const testFunc2 = param => console.log("Here we can do that");  // Return our expected output

Single line code & with one parameter so we can use arrow function this way.

const testFunc3 = ( param1, param2 ) => console.log("do that");  // Return our expected output

Single line code & more parameter so we can use arrow function this way.
if we declare more parameter then must use the first bracket.
Parameter values are comma separate.

const testFunc4 = ( param1, param2 ) => {   // multiline code do that}

Multiline line code & more parameters so we can use this way.
Multiline code is doing work in the curly bracket.

04. Function Working with Unnamed Parameters

We always function declare and when we function call then we function passed parameter but if don’t know how many parameters come from when call function then we will face a problem.

const namedParam = ( param1, param2 ) => {   return param1 + param2;}console.log(namedParam(5, 6));  // expected result 11

Here we know how parameter passed in function and we handle this parameter, but we don’t know then we will do this work

//View all Arguments in Functionfunction argumentsFunc(num1, num2){    let sum = 0;    for ( let i = 0; i < arguments.length; i++ ) {      const element = arguments[i];      sum = sum + element;    }     return sum;}var resultArguments = argumentsFunc(5, 8, 6, 20);console.log(resultArguments);  // expected result 39

If we don’t know the parameter name then we can get all parameters in arguments.
Arguments get only in function. if we console.log(arguments) in the function we will show all parameters in arguments.
If we get all parameters then we will do our work.
If we console.log(arguments) in outside function then we will show undefined.

05. Var Declaration and Hoisting

function scope(){
   var declaration = "I am Web Develper";   if( true ){
      var declarationAgain = "I am Node Programmer";
      console.log(declaration);
      console.log(declarationAgain);
    }
}
scope();

We can declare a function. Inside this function, we declare two variables.
first, var declares a string in function. But the second var is declared in if condition.
If we call first var in if condition then we will see the result.
And the second var is called in place then we will see the same behavior on the first var.

function scopeFunc(){
   var declaration = "I am Web Developer";
   console.log(declarationAgain);if( true ){
      var declarationAgain = "I am Node Programmer";
      console.log(declaration);
      console.log(declarationAgain);
    }
}
scopeFunc();

But if we second var is called on top of if condition then we will see undefined.
Cause, JavaScript read code first to bottom.
When javaScript read var in the top but not value then show undefined
Again javascript read the second var where declare after if we check console the same var show result.
This is called Hoisting.

06. Try … Catch

try {
   // do that}catch( error ) {
    console.log( error );}

We always try our code will work perfectly.
Sometimes happened an occurred. Occurred happened by the user or our system panel.
If we face any error on our code that we can use the try…catch method.
If the code has no error then the code goes to the try method and an error occurred in the code then it goes catch method.
So that at least we understand our system not work or something happened by the user.
And or a system running always.

07.Block-Level Declarations

function blockFunc(){
 var declaration = "I am Web Developer";   if( true ){
      let declarationAgain = "I am Node Programmer";
      console.log(declaration);
      console.log(declarationAgain);
    }     console.log(declarationAgain);
}
blockFunc();

We create a function & call the function.
If we one var variable declare in function & call variable then we will see the result.
Now we declare a let variable in if condition and call in the same place then we will same behavior on var variable.
But if we check a let variable is outside of the if condition then we will see an error.
Cause, var variable scope in global but let variable scope in local.
Let variable work only in his area/scope.
This is called block-level declarations.

08. Data types

Primitive Values: Number and strings among other things are called Primitive values.

console.log(120);
console.log("Kawsar Ahmed");
console.log(undefined)

Primitive values have no difference.
All primitive values have something in common.
That’s the first kind of value.

Objects and Functions: Object & function also other values but they are not primitive values, they are other types of values.

console.log({});
console.log([]);
console.log( value => value * 2 );

If we noticed that we can see console values is different from the primitive value.
Object and function are special values, cause we can manipulate them and & get different results.

09. Coding Guides

Learning purpose we are learn huge of development things. but we are always laziness show in our coding styles.why?. When we are write code thinking about my mind ,but this code send in your team they are never your thinking mind. So we can follow some rules so that we can read your code and understood. World class popular teams are set some coding guides rules we are follow their rules at least my code can read other person.

10. Best Practice Declare a Function

let addition = calculateAdd();function( x, y ) {
  return x + y;
}

We always function declare at the top then we will call function but nowadays we know have javascript coding best practice.
The best practice of the function declaration system is shown in these examples.
At first, called a function then we write the function details.
After writing a function parameter give space before the second brackets.
It is a good practice.
Airbnb & google team share some javaScript coding best practice.