Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Destructuring Assignment

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Destructuring Assignment

      Destructuring Assignment

      In JavaScript, the destructuring assignment is an expression that allows us to unpack the values from the arrays or objects and store them in individual variables. It is a technique to assign array values or object properties to the variables.
      The destructuring assignment syntax is introduced in ECMAScript 6 (ES6). Before ES6, developers were unpacking the object properties manually as shown in the example below.

      Array unpacking before ES6

      In the example below, the 'arr' array contains the fruit names. After that, we created different variables and assigned array elements to the variables.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            const arr = ["Apple", "Banana", "Watermelon"];
      
            const fruit1 = arr[0];
            const fruit2 = arr[1];
            const fruit3 = arr[2];
      
            document.getElementById("output").innerHTML = 
            "fruit1: " + fruit1 + "<br>" +
            "fruit2: " + fruit2 + "<br>" +
            "fruit3: " + fruit3;
         </script>
      </body>
      </html>

      Output

      fruit1: Apple
      fruit2: Banana
      fruit3: Watermelon
      The above code will work if the array doesn't contain the dynamic number of elements. What if the array contains 20+ elements? Will you write 20 lines of the code?
      Here the concept of the destructuring assignment comes into the picture.

      Array Destructuring Assignment

      You can follow the syntax below to use destructuring assignment to unpack array elements.
      const [var1, var2, var3] = arr;
      In the above syntax, 'arr' is an array. The var1, var2, and var3 are variables to store array elements. You can also similarly unpack the objects.

      Example

      The below example implements the same logic as the above example. Here, we have used the destructuring assignment to unpack the array elements. The code gives the same output as the previous example.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            const arr = ["Apple", "Banana", "Watermelon"];
      
            const [fruit1, fruit2, fruit3] = arr;
      
            document.getElementById("output").innerHTML = 
            "fruit1: " + fruit1 + "<br>" +
            "fruit2: " + fruit2 + "<br>" +
            "fruit3: " + fruit3;
         </script>
      </body>
      </html>

      Output

      fruit1: Apple
      fruit2: Banana
      fruit3: Watermelon

      Example: Nested Array Destructuring

      In the example below, we created a nested array. To access these elements, we used nested array destructuring assignment. Try the following example
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            const arr = ["Apple", ["Banana", "Watermelon"]];
            const [x, [y, z]] = arr;
            document.getElementById("output").innerHTML = 
            x + "<br>" +
            y + "<br>" +
            z ;
         </script>
      </body>
      </html>

      Output

      Apple
      Banana
      Watermelon

      Object Destructuring Assignment

      You can follow the syntax below to use destructuring assignment to unpack object elements.
      const {prop1, prop2, prop3} = obj;
      In the above syntax, 'obj' is an object. The prop1, prop2, and prop3 are variables to store object properties.

      Example

      The below example implements the same logic as in the example of array destructuring assignment. Here, we have used the destructuring assignment to unpack the object elements.
      <html>
      <body>
         <div id = "output1"> </div>
         <div id = "output2"> </div>
         <script>
            const fruit = {
               name: "Apple",
               price: 100,
            }
      
            const {name, price} = fruit;
            document.getElementById("output1").innerHTML = "fruit name: " + name;
            document.getElementById("output2").innerHTML = "fruit price: " + price;
      
         </script>
      </body>
      </html>

      Output

      fruit name: Apple
      fruit price: 100

      Example: Nested Object Destructuring

      In the example below, we defined a nested object called person with two properties age and name. The name property contains two properties called fName and lName. We access these properties using nested destructuring.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            const person = {
               age: 26,
               name: {
                  fName: "John",
                  lName: "Doe"
               }
            }
            // nested destructuring 
            const {age, name: {fName, lName}} = person;
            document.getElementById("output").innerHTML = 
            "Person name: " + fName + " " + lName + "<br>"+
            "Person age: " + age;
         </script>
      </body>
      </html>

      Output

      Person name: John Doe
      Person age: 26

      What's Next?

      In the next chapters, we will learn the below concepts in detainls.
      • Array destructuring: Unpacking the array elements.
      • Object destructuring: Unpacking the object properties.
      • Nested destructuring: Unpacking the nested array elements and nested objects.