Default Parameters – ECMAScript 6

In JavaScript, parameters of functions default to undefined. However, in some situations, it might be useful to set a different default value.

In the past, the default value for a parameter is defined in the function body based on the value of the parameter as below:

function multiply(a, b) {
    b = (typeof b !== 'undefined') ? b : 1;
    return a * b;
}

console.log(multiply(5, 2)); // 10
console.log(multiply(5, 1)); // 5
console.log(multiply(5)); // 5

In the above code snippet the typeof parameter b is being checked, if the value is undefined then the value is set to 1.
Sometimes people will be using || operator to set default value as below

function multiply(a, b) {
    a = a;
    b = b || 1;
    return a * b;
}

console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
                      // initialization using || operator

This pattern is most used but is dangerous when we pass values like

console.log(multiply(5, 0));

Because the 0 is falsy, and so the b || 1 results in 1, not the directly passed in 0. To handle this, coders started initializing value in function bodies.

In ECMAScript 6, the checks in the function body are no longer needed, we can define the default value in function head itself as follows:

function multiply(a, b = 1) {
    return a * b;
}

console.log(multiply(5, 2)); // 10 -- value of b is 2
console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
                  // default parameter initialization

console.log(multiply(5, undefined)); // 5 -- value of b is 1,
                 // even if we pass  undefined as value to parameter b

The default value for parameter b is initialized from function head if it didn’t have any valid input.

If we convert the above ES6 code into native javascript code using Babel transpiler, we will get the following equivalent code

"use strict";

function multiply(a) {
    var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

    return a * b;
}

console.log(multiply(5, 2)); // 10 -- value of b is 2
console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
// default parameter initialization

console.log(multiply(5, undefined)); // 5 -- value of b is 1,
// even if we pass  undefined as value to parameter b

ECMAScript 6 is a syntactic sugar for the existing components 🙂

Happy Coding 🙂

Browser Link option in Visual Studio

What is browser link?

Browser Link is a feature in Visual Studio which is used to create a communication channel between the development environment and one or more browsers.

Using Browser Link, we can refresh our application in multiple browsers at a same.

We can browse our application in multiple browsers with custom/default screen size using Browser Link.

It mainly used to ensure the application correctness in the cross-browser.

How I came to know about Browser Link?

When I was debugging my web application in Visual Studio, I have noticed frequent API calls has been made with following URL pattern

http://localhost:portnumber/..../arterySignalR/poll?transport=longPolling&connectionToken=...
SignalR

When I have searched on the Internet about this, I have found details that it’s a new feature in the Visual Studio development tool.

How do Browser Link works?

Browser Link uses SignalR to create a communication channel between Visual Studio and the browser.

When Browser Link is enabled, Visual Studio acts as a SignalR server that multiple clients (browsers) can connect to.

More details about Browser Link is available here, https://docs.microsoft.com/en-us/aspnet/core/client-side/using-browserlink

Can we disable this feature?

Short Answer: Yes

I personally won’t prefer this feature to be enabled by default.

We can enable this feature whenever needed.

Steps to disable Browser Link

  1. In the Browser Link drop-down menu, uncheck Enable Browser Link.browserlink
  2. In the Web.config file, add a key named “vs:EnableBrowserLink” with the value “false” in the appSettings section.
<appSettings>
<add key="vs:EnableBrowserLink" value="false"/>
</appSettings>

3. In the Web.config file, set debug to false.


<system.web>
<compilation debug="false" targetFramework="4.5" />
</system.web>

Have a distraction-less coding session.

Happy debugging 🙂

Related article