Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

What is Destructuring Assignment in javascript ES6 ?

Posted on June 2, 2021December 2, 2021 By christo No Comments on What is Destructuring Assignment in javascript ES6 ?

The destructuring assignment in ES6 allows us to locally scope fields within an object and
to declare which values will be used.

Example:

var sandwich = {
 bread: "dutch crunch",
 meat: "tuna",
 cheese: "swiss",
 toppings: ["lettuce", "tomato", "mustard"]
}
var {bread, meat} = sandwich;
console.log(bread, meat) ; // output will be dutch crunch tuna

in the above example the code pulls bread and meat out of the object and creates local variables for them.

Destructuring Assignment does not alter the value of Object

Example

var {bread, meat} = sandwich
bread = "garlic"
meat = "turkey"
console.log(bread)  ; // output will be  garlic
console.log(meat) // output will be turkey
console.log(sandwich.bread, sandwich.meat) ; // output will be  dutch crunch tuna

destructure for incoming function arguments ?

In ES6 without destructuring incoming function arguments

var lordify = regularPerson => {
 console.log(`${regularPerson.firstname} of Canterbury`);
}
var regularPerson = {
 firstname: "Bill",
 lastname: "Wilson"
}
lordify(regularPerson) ;

in destructuring Instead of using dot notation syntax to dig into objects, we can destructure the values that we need out of regularPerson

Example

var lordify = ({firstname}) => {
 console.log(`${firstname} of Canterbury`);
}
lordify(regularPerson) ; // output will be Bill of Canterbury

destructured from arrays in ES6

var [firstResort] = ["Kirkwood", "Squaw", "Alpine"];
console.log(firstResort) ; output will be Kirkwood

Object Literal Enhancement

in ES6 Object literal enhancement is the opposite of destructuring. It is the process of restructuring or putting back together. With object literal enhancement,

we can grab variables from the global scope and turn them into an object with Object Literal Enhancement

Example:

var name = "Tallac"
var elevation = 9738
var funHike = {name,elevation}
console.log(funHike) ; //output will be  {name: "Tallac", elevation: 9738}

in ES6 it’s no longer necessary to use the function keyword

Example

old Syntax Example

var skier = {
 name: name,
 sound: sound,
 powderYell: function() {
 var yell = this.sound.toUpperCase()
 console.log(`${yell} ${yell} ${yell}!!!`)
 },
 speed: function(mph) {
 this.speed = mph
 console.log('speed:', mph)
 }
}



In ES6 Syntax

const skier = {
 name,
 sound,
 powderYell() {
 let yell = this.sound.toUpperCase()
 console.log(`${yell} ${yell} ${yell}!!!`)
 },
 speed(mph) {
 this.speed = mph
 console.log('speed:', mph)
 }


javascript Tags:Assignment, Destructuring, ES6, javascript

Post navigation

Previous Post: What is Template Strings in javascript ES6 ?
Next Post: What is The Spread Operator in javascript ES6 ?

Related Posts

What is Template Strings in javascript ES6 ? coding
What is Module in javascript ES6 ? coding
What is The Spread Operator in javascript ES6 ? javascript
What is Higher-Order Functions in functional programming of javascript ? javascript
What is Pure function in javascript ES6 ? javascript
How Data Transformations works in Javascript ? javascript

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech