DEV Community

Jacob Stern
Jacob Stern

Posted on • Edited on

Destructured Assignment

#webdev #javascript #beginners

Mon, Sep 2, 2024

(Originally published as part of a 100 Days of Code series. Revised for clarity and purpose.)

One key thing about most programming languages is that they’re backward compatible. This means old code usually keeps working years—even decades—after it was written. That’s important because we want proven, reliable code running critical systems like Air Traffic Safety Control. But just because languages protect legacy code doesn’t mean they stop evolving.

JavaScript is based on the ECMAScript standard, which gets updated every year or two. The biggest update so far was ES6 in 2016, and since 2017 all major browsers support it. JavaScript used to be just for browsers, but in 2009 Node.js brought it to app developers everywhere.

I’ve talked before about arrow functions and for..in / for..of loops, which changed how JavaScript handles data compared to traditional programming. But that’s just the beginning—JavaScript has some really powerful features under the hood. Remember, an object is a collection of properties and functions. Here’s an example featuring the Millennium Falcon (see footnote):

// Example: The Millennium Falcon, see Footnote

const millenniumFalcon = {
  modelNumber: "YT-1300F",
  yearOfProduction: "56 BBY", // Before the Battle of Yavin
  engineCapacity: "2 Girodyne SRB42 sublight engines",
  rateOfTravel: {
    atmosphericSpeed: "1,200 km/h",
    spaceSpeed: "3,000 G",
    hyperdrive: "0.5 HCR (Hyperdrive Class Rating)"
  },
  currentSpeed: "800 km/h", // Example current speed
  logCurrentSpeed() {
    console.log(`Current Millennium Falcon speed: ${this.currentSpeed}.`);
  }
};

millenniumFalcon.logCurrentSpeed();
// Output: Current Millennium Falcon speed: 800 km/h.
Enter fullscreen mode Exit fullscreen mode

The this keyword lets a method access data from the specific object it belongs to. Without this, the method wouldn’t find currentSpeed and would return undefined. So this provides the right context.

Just like the Rebel Alliance needs a fleet of starships to fight the Galactic Empire, JavaScript helps us create lots of objects with Factory Functions. Here’s how you can make Starships in bulk. Note: Property Value Shorthand reduces how much you have to type.

// Factory function for creating Starships
function createStarship(type, model, name, speed) {
  return {
    type,
    model,
    name,
    speed,
  };
}
Enter fullscreen mode Exit fullscreen mode

Lastly, JavaScript has Destructured Assignment, which makes pulling properties out of objects far easier. Compare:

const engineCapacity = millenniumFalcon.engineCapacity;
const { engineCapacity } = millenniumFalcon;
Enter fullscreen mode Exit fullscreen mode

You can even grab nested properties like this:

const { hyperdrive } = millenniumFalcon.rateOfTravel;
Enter fullscreen mode Exit fullscreen mode

These object features give JavaScript developers powerful tools to write cleaner, more efficient, and easier-to-maintain code. Keep exploring them as you code and see how they can help your projects.

Footnotes
The Millennium Falcon is an extensively modified Corellian YT-1300 light freighter. Known for its speed and agility, it was mainly used for smuggling before becoming a key asset for the Rebel Alliance.

Top comments (0)