Destructuring JavaScript objects is very useful. I can use it for a deep object structure as well.

In this example, I wanted to assign properties returned from an object to each individual variables.

var getPersonProfile = function() {
    return {
        firstName: "Karthik",
        lastName: "K",
        twitter: "KarthikTechBlog"
    }
}

var objectAssignmentExample = function() {
    let {
        firstName: firstName, 
        twitter: twitter
    } = getPersonProfile();

    console.log(firstName); // this produce "Karthik"
    console.log(twitter); // this produce "KarthikTechBlog"
}

This looks like I’m building an object but that is not the case. However, I’m building an object literal as the return value from the calling function is an object. Note that I have used curly brace “{“, “}” as it is an object.

In other words, I’m telling JavaScript to assign firstName from the object returned from the getPersonProfile function. his way, firstName property in the objects are assigned to variable name firstName and similarly for twitter variable.

The right-hand side of the colon that is defining my variable. Properties that match the variable name will have the value assigned to it.

var getPersonProfileWithShortName = function() {
    return {
        first: "Karthik",
        lastName: "K",
        twit: "KarthikTechBlog"
    }
}

var objectAssignmentExample1 = function() {
    let {
        first: firstName, 
        twit: twitter
    } = getPersonProfileWithShortName();

    console.log(firstName); // this produce "Karthik"
    console.log(twitter); // this produce "KarthikTechBlog"
}

In this example, property name first matches and assigned value to firstName variable.

Deep Object Assignment

In this example, twitter property is inside social property. To access twitter property, you need to navigate to the social to get its value.

var getPersonProfile = function() {
    return {
        firstName: "Karthik",
        lastName: "K",
        social: {
            twitter: "KarthikTechBlog"
        }
    }
}

var objectAssignmentExample = function() {
    let {
        firstName: firstName, 
        social: {
            twitter : twitter 
        }
    } = getPersonProfile();

    console.log(firstName); // this produce "Karthik"
    console.log(twitter); // this produce "KarthikTechBlog"
}

Conclusion

In this post, I showed how destructuring JavaScript objects and deep object assignment works. If you have any questions or just want to chat with me, feel free to leave a comment below.

The post Destructuring JavaScript objects and deep object assignment appeared first on Learn Smart Coding.

Destructuring operation allows us to assign value to a set of variables by destructing it and doing pattern matching.

A complex data structure like an array or an object full of properties is a good example.

Let’s take an example. Two variables X and Y initialized with 2 and 3 values. In the third line we use destructing assignment to say give the value X and Y to Y and X. This will change the value of X to be 3 and Y to be 2 without using any other variable to swap its value.

Destructuring JavaScript Array

var destructingVariables = function () {
    let x = 2;
    let y = 3;
    [x, y] = [y, x];    
}

It is important to understand that what we see in the right hand side of this assignment is the array built with the values in Y and X.

To the left-hand side, it is not an array. It looks like I’m building an array literal. However, I’m working with individual variables X and Y and I’m surrounding them with square brackets. This is because I’m destructuring an array.

In simple form, I’m telling JavaScript to take the first item in the array and put it into X and the second one into Y.

var example1 = function () {
    let [x, y] = [2, 3];    
}

I can simplify this by mentioning let there be two variables X and Y.

var example2 = function () {
    let [x, y] = returnTwoNumbers();
}

var returnTwoNumbers = function() {
    return [2, 3];
}

I can even call an function and assign the values returned from it.

What if the function returns more than expected values? I can still use it by this way.

var returnThreeNumbers = function() {
    return [4, 2, 3];
}

var example3 = function () {
    let [, x, y] = returnThreeNumbers(); 
}

Output for all these examples are still same.

var returnThreeNumbers = function() {
    return [4, 2, 3];
}

var example3 = function () {
    let [, x, y, z] = returnThreeNumbers(); 
if(z===undefined) {
alert('z is undefined');
}
}

If I am trying to assign value to variable Z then Z will be undefined as there is no fourth value from the calling function.

Reference Post

• Difference between var, let and const in JavaScript (ES6)

Conclusion

In this post, I explained the destructuring javascript array and its different usages. I also showed how typescript shows the error upfront in visual studio code IDE. If you have any questions or just want to chat with me, feel free to leave a comment below.

The post Destructuring javascript array and its different usages appeared first on Learn Smart Coding.

I will be using a visual studio code for the demo purpose. This module is part of variables and parameters which is part of JavaScript Fundamentals for ES6.

These features are designed to make JavaScript code easier to read, write, and also to make this code safer. This will help avoid some dangerous behavior in javascript.

There are two new keywords that are used in declaring variables such as let, const, and also I will explain the difference with the var keyword.

var and let Keyword

let keyword allow us to define variable in JavaScript. var keyword can also be used to define variable. However, var keyword has some limitation when it comes to scope.

what is scope then? The scope of the variable is the area of the program where it is legal to use. var has only two scopes such as Global Scope and Function Scope. There is no block scope for var keyword.

// var Keyword scope example
var doSomeWork = function (raining) {
    if (raining) {
        var weather = '65F';
    }
    return weather;
};

let keyword solve this problem.

// var Keyword scope example
var doSomeWork = function (raining) {
    if (raining) {
        var weather = '65F';
    }
    return weather;
};

// let Keyword scope example
var doSomeWork = function (raining) {
    if (raining) {
        let weather = '65F';
        return weather;
    }

    return '85F';
};

since variable “x” is available throughout the function there is no error. let the keyword makes the variable scoped to the condition and hence we got an error. Using such code through javascript runtime error stating no such variable exist.

All these confusion with the var keyword is because of the Hoisting. Hoisting is JavaScript’s default behavior of moving declarations to the top. You can read more here.

Another example is to use let keyword in for loops.

const Keyword

The const keyword is another addition in ECMA Script 6 (ES6). The idea of using this is to create and initialize a read only variable. A variable that hold a constant value something that you never change.

ES6 for const will have block scoping.

var constFuntion = function () {
    const max_size = 20;
    max_size = 20 + 20; // syntax error as you cannot assign value again;
}

Another difference with const and var keyword is you can define an variable more than once with var keyword. However, you cannot do the same with const keyword.

Conclusion

In this post, I showed the difference between var, let, and const in Javascript. I also showed how typescript shows the error upfront in visual studio code IDE. If you have any questions or just want to chat with me, feel free to leave a comment below.

The post Difference between var, let and const in JavaScript (ES6) appeared first on Learn Smart Coding.