JS - Destructuring

String,Number,Array,Objects Destructuring

by Lavakumar T

HTML

<div id="root"> 
  <h2>Arrays & Objects: </h2>
    <ul> 
    <li>1.Direct </li>  
    <li>2.Empty values </li>  
    <li>3.Default values </li>  
    <li> 4.Deafult values with propmt</li>  
    <li> 5. ...rest</li>  
    <li> 6.Empty commas ","</li>  
    <li> 7.Arry.split</li>  
    <li> 8.Arry key value loop</li>
    <li> 9.Mapp key value loop</li>
    <li> 10.Named variable with ": collon"</li> 
    <li>11.Need to use (...) for Existing variables to destructuring:</li> 
    <li> 12.Nested Destructuring :</li>
    <li>13.Smart function params </li>
    <li>  14.Default object structue value</li>
    </ul>
       
 </div>

CSS

ul li{
 list-style: circle;
}

JavaScript

// 1.Direct in Arrays
const normalArray = [1,2,3];
[a,b,c] = normalArray;
console.log(`1. Normal array : a:${a} b:${b} c:${c}`);

//2.Empty values
[a1,,b1] = [1,2,3];
console.log(` -> Normal array : a1:${a1} b1:${b1}`);

// 3 and 4.Default values & with Prompt
const defaltArray = [];
//[x=prompt("x value : "),y=prompt("y value:"),z=50] = defaltArray;
[x=44,y=22,z=50] = defaltArray;
console.log(`3.defaltArray : x:${x} y:${y} z:${z}`);

// 5. ...rest with destructuring
const normalObject ={name:"Lava",age:30}
const {name,age} = normalObject;
console.log(`2. Normal Object : name:${name} age:${age}`);

const defaultObj = {x1:1,y1:4,z1:5};
const {x1,y1,z1} = defaultObj;
console.log(` > defaltObj : x:${x1} y:${y1} z:${z1}`);