Coder Social home page Coder Social logo

fewpjs_destructuring_assignment-london-whitehat-staff's Introduction

Destructuring Assignment

Learning Goals

  • Use destructuring to assign data to variables

Introduction

As developers, sometimes we receive information in a collection like an Object and we want to "pick and choose" elements out of the collection. It's a major pain to extract each property / value pair out of an Object. Here destructuring can be a real help! Not only does destructuring help when working with data in your application, it's essential for understanding how to get JavaScript to include third-party code (like you find on npm).

Use Destructuring to Assign Data to Variables

In JavaScript, when we want to assign data to single variables from a top level object such as this, we normally do it individually like so:

const doggie = {
  first: 'Buzz',
  breed: 'Great Pyrenees',
  fur_color: 'black and white',
  activity_level: 'sloth-like',
  favorite_food: 'hot_dogs'
};
const first = doggie.first;  // Buzz
const breed = doggie.breed; // Great Pyrenees

This is pretty repetitive code, and it feels like there should be an easier way to do this. With destructuring, there is! JavaScript gives us the ability to assign multiple single variables at one time using a simple syntax.

const doggie = {
  first: 'Buzz',
  breed: 'Great Pyrenees',
  fur_color: 'black and white',
  activity_level: 'sloth-like',
  favorite_food: 'hot_dogs'
};

const { first, breed } = doggie;
console.log(first); 
console.log(breed); 

We can also use it to destructure a nested syntax:

const doggie = {
  first: 'Buzz',
  breed: 'Great Pyrenees',
  fur_color: 'black and white',
  activity_level: 'sloth-like',
  favorite_foods: {
    meats:{
      ham: 'smoked',
      hot_dog: 'oscar_meyer',
    },
    cheeses:{
      american: 'kraft'
    }
  }
};

const { ham, hot_dog } = doggie.favorite_foods.meats;
console.log(ham); 
console.log(hot_dog); 

Destructuring Assignment with Arrays

Destructuring does not just work on objects - we can also use the same syntax with Arrays as well.

const dogs = ['Great Pyrenees', 'Pug', 'Bull Mastiff']
const [medium, small, giant] = dogs
console.log(medium, small, giant) // Great Pyrenees, Pug, Bull Mastiff

The cool part is we can pick the parts of the Array that we want to assign!

const dogs = ['Great Pyrenees', 'Pug', 'Bull Mastiff']
const [, small, giant] = dogs
console.log(small , giant) //  Pug, Bull Mastiff

Destructuring Assignment with Strings

We can also destructure with strings, as a whole:

const dogsName = 'Sir Woody BarksALot'
const [title, firstName, lastName] = 'Sir Woody BarksALot'.split(' ')
console.log(title, firstName, lastName) // Sir Woody BarksALot

And we can also destructure it in parts, just as we did with Arrays above:

const dogsName = 'Sir Woody BarksALot'
const [title, ,lastName] = 'Sir Woody BarksALot'.split(' ')
console.log(title, lastName) // Sir BarksALot

Instructions

We are going to give you several Strings, Arrays, and Objects and you're going to write several destructuring assignments for each. Write your code in the index.js file. Let the instructions in the README and the tests guide you through the process.

Conclusion

"Destructuring assignment" is a fast, and efficient way to assign data to variables from objects, Arrays, and strings. It allows us to pick and choose the pieces of data that we want to assign, and gives us lots of freedom to manipulate the data as it is coming in. With practice, you'll be proficient at it in no time.

Resources

fewpjs_destructuring_assignment-london-whitehat-staff's People

Contributors

maxwellbenton avatar sgharms avatar

Watchers

James Cloos avatar Kevin McAlear avatar  avatar Mohawk Greene avatar Victoria Thevenot avatar Belinda Black avatar Bernard Mordan avatar raza jafri avatar  avatar Joe Cardarelli avatar The Learn Team avatar Sophie DeBenedetto avatar  avatar Antoin avatar Alex Griffith avatar  avatar Amanda D'Avria avatar  avatar Nicole Kroese  avatar Kaeland Chatman avatar Lisa Jiang avatar Vicki Aubin avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.