Day 64 / 100 Days of Code: Destructured Assignment

Mon, Sep 2, 2024

If JavaScript Syntax initially seemed a natural extension coming from C/C++, the advanced object features I’m now seeing are a masterful revival.

One characteristic of computer languages that is foundational is that, with rare exceptions, they are always backward compatible. This is crucial so that legacy code can continue to operate 10, 15, or 20 years after it was written. Code that’s been tested and proven reliable is what we want running our Air Traffic Safety Control system. However, while backstopping is crucial, that doesn’t mean language development must flatten.

JavaScript is an implementation of the ECMAScript standard, and every year or two, there are new releases. The most significant was ES6 in 2016, which all major browsers have supported since 2017. JavaScript used to only operate in web browsers, but in 2009 Node.js was released, bringing JavaScript to application developers everywhere.

I've mentioned how arrow functions and for..in and for..of loops abstracted data from traditional programming design patterns. Well, JavaScript was just getting warmed up, because it has some pretty powerful tools under its belt. Recalling that an object is a collection of tailored properties and functions, JavaScript deploys the following:

// 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.

The this keyword is a means for securely accessing only one object’s data, namely the one being accessed. If the logCurrentSpeed method attempted to access the currentSpeed without using this, the result would be undefined. Using this provides the correct context.

As the Rebel Alliance needs a fleet of starships to defeat the Galactic Empire, JavaScript comes to the rescue with Factory Functions to produce objects, here Starships, en masse! Note: Property Value Shorthand is used to reduce retyping parameters.

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

Finally, JavaScript provides Destructured Assignment to simplify assigning an object’s property to a variable. Compare:

const engineCapacity = millenniumFalcon.engineCapacity;
const { engineCapacity } = millenniumFalcon;

We can even use destructured assignment to grab nested properties:
const { hyperdrive } = millenniumFalcon.rateOfTravel;

JavaScript’s advanced object features provide powerful tools for developers, making it easier to write clean, efficient, and maintainable code. As you continue your coding journey, keep exploring these features and see how they can enhance your projects.

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