ES6 Default Parameters examples | ecmascript5 examples

ES6 Default Parameters examples | ecmascript5 examples

    Learn the es6 features -Default arguments to the function tutorials with examples.

    Before the Es6 Java version, The following is the way to handle default parameter values.

    ES5 Default Parameters and previous javascript versions

    Declared a convertEmployObjectToJsonString function to convert the Employee arguments to JSON string, has two arguments - name and salary

    The name is a required argument

    Salary is optional parameters

    salary argument is an optional parameter. When the salary argument is not passed, the default value is assigned with 5000.

    function convertEmployObjectToJsonString(name, salary) {
      salary = typeof salary !== "undefined" ? salary : 5000;
      return JSON.stringify({ name: name, salary: salary });
    console.log(convertEmployObjectToJsonString("Frank", 6000));
    console.log(convertEmployObjectToJsonString(null, null));

    Output is


    When convertEmployObjectToJsonString is called, the salary argument is not passed means undefined, the default value is 5000. We have added the check for salary arguments for the undefined case and if it is undefined, then the default value is initialized.

    ECMAScript 2016 Default parameters

    Default parameters are syntax changes to the function parameters Es6 is a new javascript version change Default parameters are declared in functional parameters initialized with a default value when the parameter to the function is undefined or not passed. Syntax:

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

    The same above example is rewritten using es6 default parameters.

    function convertEmployObjectToJsonString(name, salary = 5000) {
      return JSON.stringify({ name: name, salary: salary });
    console.log(convertEmployObjectToJsonString("Frank", 6000));
    console.log(convertEmployObjectToJsonString("Ram", ""));
    console.log(convertEmployObjectToJsonString(null, null));
    console.log(convertEmployObjectToJsonString("asdfads", null));
    console.log(convertEmployObjectToJsonString("Ram", "undefined"));

    output is


    Points to Remember

    In javascript, Arguments to functions default to undefined, This allows changing the different values. When valid values are passed as arguments, Default parameters have not initialized any value, empty and null are considered valid values, Undefined, the value is not passed, the argument to the function is not passed, the undefined value is considered, the default value is initialized with default value Default arguments are evaluated at called time.

    Please map the above results with these points to have a good understanding.

    Function as default parameter example

    Here Function next is declared inside the body of the getValues function. getValues has default parameters as a Function. The order of the execution is as follows.

    Default parameters always run first. Nested Functions declared in the function body are executed next. When getValues() method is called with a function parameter, the function declaration is not available so the below code throws an error - Uncaught ReferenceError: next is not defined So the takeaway point is, Functions declared inside other function bodies are not passed as default arguments.

    function getValues(value = next()) {
      function next() {
        return "next function method";

    Fix/ Solution for ReferenceError is to move the inside function to global or outside scope.

    function next() {
      return "next function method";
    function getValues(value = next()) {}

    Default parameters Destructuring Assignment example

    Default parameters can also be used with the Destruction assignment. Destruction assignment is a new kind of syntax introduced in ES6 and expression to retrieve values from arrays and objects and assign them to variables.

    Destruction assignment example

    var value1, value2;
    [value1, value2] = [30, 50]; // outputs value1=30 and value2=50
    [value1 = 4, value2 = value1] = []; // value1=4;value2=4
    [value1 = 5, value2 = value1] = [6]; // value1=6; value2=6
    [value1 = 3, value2 = value1] = [3, 5]; // value1=3; value2=5

    here is an example of destruction assignment as a default parameter in a function declaration

    function func([a, b] = [5, 6], { c: c } = { c: 2 }) {
      return a + b + c;
    console.log(func()); // outputs 13

    Destructured Object assignment example

    Default parameters declared with Object destructuring assignment. The following is an example of the usage of Object destruction.

    function funcObject({ name = "Frank", salary = 5000 } = {}) {
      return `${name}, ${salary}`;
        name: "kiran",

    The output of the above code

    kiran, 5000;
    Frank, 5000;