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, we will use destructuring to assign the object config to assign values to individual properties on the left-hand side of the assignment statement:

    let config = { 
      server: 'localhost', 
      port: '8080', 
      timeout: 900, 
    } 
    let {server,port} = config  
    console.log(server, port) //"localhost" "8080" 

As you can see server and port are local variables that got assigned properties from the config object because the name of the properties were the same as that of the local variables. You can also pick particular properties while you assign them to local variables. Here is an example:

    let {timeout : t} =config 
    console.log(t) //900 

Here, we are only picking timeout from the config object and assign it to a local variable t.

You can also use the destructuring syntax to assign values to already declared variables. In this case, you have to put parentheses around the assignment:

    let config = { 
      server: 'localhost', 
      port: '8080', 
      timeout: 900, 
    } 
    let server = '127.0.0.1'; 
    let port = '80'; 
    ({server,port} = config) //assignment surrounded by () 
    console.log(server, port) //"localhost" "8080" 

As the destructuring expression evaluates to the right-hand side of the expression, it's possible to use it anywhere you would expect a value. For example, in a function call, as shown here:

    let config = { 
      server: 'localhost', 
      port: '8080', 
      timeout: 900, 
    } 
    let server='127.0.0.1'; 
    let port ='80'; 
    let timeout ='100'; 
 
    function startServer(configValue){ 
      console.log(configValue) 
    } 
    startServer({server,port,timeout} = config) 

If you specify a local variable with a property name that does not exist in the object, the local variable gets an undefined value. However, while using variables in the destructuring assignment, you can optionally specify default values:

    let config = { 
      server: 'localhost', 
      port: '8080' 
    } 
    let {server,port,timeout=0} = config 
    console.log(timeout) 

In this example, for a non-existent property timeout, we provided a default value to prevent getting undefined values assigned to local variables.

Destructuring works on arrays as well, and the syntax is also very similar to that of the objects. We just need to replace object literal syntax with array:literals:

    const arr = ['a','b'] 
    const [x,y] = arr 
    console.log (x,y) /"a" "b" 

As you can see, this is the exact same syntax we saw earlier. We defined an array arr and later used the destructuring syntax to assign elements of that array to two local variables, x and y. Here, the assignment happens based on the order of elements in the array. As you only care about the position of elements, you can skip some of them if you want to. Here is an example:

    const days = ['Thursday','Friday','Saturday','Sunday'] 
    const [,,sat,sun] = days 
    console.log (sat,sun) //"Saturday" "Sunday" 

Here, we know that we need elements from positions 2 and 3 (an array's index starts from 0), and hence, we ignore elements at positions 0 and 1. Array destructuring can eliminate the use of a temp variable while swapping values of two variables. Consider the following:

    let a=1, b=2; 
    [b,a] = [a,b] 
    console.log(a,b) //2 1 

You can use the rest operator (...) to extract remaining elements and assign them to an array. The rest operator can only be used as the last operator during destructuring:

    const [x, ...y] = ['a', 'b', 'c']; // x='a'; y=['b', 'c']