Destructuring

You will be working with objects and arrays all the time when you code. JavaScript object and array notations resemble the JSON format. You will define objects and arrays, and then retrieve elements from them. ES6 gives a convenient syntax that significantly improves the way we access properties/members from objects and arrays. Let's consider a typical code you would often write:

    var config = { 
      server: 'localhost', 
      port: '8080' 
    } 
    var server = config.server; 
    var port = config.port; 

Here, we extracted values of server and port from the config object and assigned them to local variables. Pretty straightforward! However, when this object has a bunch of properties, some of them nested, this simple operation can get very tedious to write.

ES6 destructuring syntax allows an object literal on the left-hand side of an assignment statement. In the following example, we will define an object config with a few properties. Later...