JavaScript Express Basics Parameters, Query Strings, and Modularizing Routes Card Template

Amandeep Pasricha
Amandeep Pasricha
14,928 Points

Can someone explain the code syntax and what the code means here?

https://ibb.co/TYt1nGT

I'm kind of lost here. I don't understand what it means to have it say this {example} in an object literal and assign it to something. Can someone explain the code he's writing here?

Thanks

2 Answers

Alex Labins
Alex Labins
12,771 Points

For the first example:

const { foo } = bar;

This is just shorthand for

const foo = bar.foo;

It's extremely handy for multiple assignments all at once, too.

const yourModule = require('your-module');
const { app, router, parser, message } = yourModule;

The above code is is exactly the same as typing all this

const yourModule = require('your-module');
const app = yourModule.app;
const router = yourModule.router;
const parser = yourModule.parser;
const message = yourModule.message;

Here is the second example, where the assignment is basically just the other way around. I deliberately assigned them in a random order to demonstrate that it doesn't matter.

const bar = 0;
const so = 1;
const re = 2;
const mi = 3;

const foo = { so, bar, mi, re };

console.log(foo.bar); // 0
console.log(foo.mi);  // 3

It's the exact same as typing this; just much more concise and less repetitive

foo.bar = bar;
foo.so = so;
foo.re = re;
foo.mi = mi;

As a fun fact, I initially had "bar do re mi" but do is actually a reserved keyword!

Samuel Piedra
Samuel Piedra
Full Stack JavaScript Techdegree Student 9,871 Points

The syntax Chalkers is using in the video for assigning variables using the curly braces ( { variable } ) wrapped around the variable is called "Destructuring Assignment." As mentioned in the other post it is just a shorthand way of assigning an object's property value to a variable (this could be an object literal or array). When you use this syntax you are destructuring the object and grabbing value(s) from the object's properties.

For example in our "cards.js" file in our routes folder we import the json data from our "flashcardData.json" using:

const { data } = require("../data/flashcardData.json");

We can do this because the returned json gets treated like a regular JavaScript object with a single property named data. The data property is an object itself with two properties, the first being title and the second being cards. So instead of writing something like this:

// assign "flashcardJSON" to the returned json object.  "flashcardJSON" now holds our json data.
const flashcardJSON = require("../data/flashcardData.json");

// now assign our data variable to the value of the data property in our "flashcardJSON" object
const data = jsonData.data

Because the json data from our "flashcardData.json" file has a property named data we can use the ES6 destructuring assignment syntax to assign the value of the json data's data property to a variable we want to name data, like so:

const { data } = require("../data/flashcardData.json");

We could just as easily call our variable something else, but we would need to make sure we identify which property's value we want to "destructure" and assign:

// assign the value of the "data" property from our json object to the variable "myFlashCardData"
const { data : myFlashCardData } = require("../data/flashcardData.json");

// now if I want to access the "title" and "cards" properties I can use:
console.log(myFlashCardData.title);  // log the title
console.log(myFlashCardData.cards);  // log the cards array

I really hope this helps. "Destructuring Assignment" is an simpler way to assign property values from object's to another variable or variables. I found this MDN link very helpful!