ES6 Chronicles: Destructuring Assignment - Ooh! - and Template Strings too!

And behold the ES6 Knights went a-code-jousting with the ES5 Knights.

The ES5 Knights — poor suckers! — had to laboriously write out the destructuring of the knight object and the construction of the console.log() output string ye olde fashioned way,with + the + string + concatenation + operator...

function knightInfo_ES5( knight ){

   // Manual line-by-line assignment of name, quest, favorite_color...
   var name=knight.name;
   var quest=knight.quest;
   var favorite_color=knight.favorite_color;

   // Constructing a string via the string concatenation operator "+"...
   // ...ugh! What a mess!
   console.log(
   " \"What is your name?\"\n" +
   " \"" + name + "\"\n" +
   "\n" + 
   " \"What is your quest?\"\n" +
   " \"" + quest + "\"\n" +
   "\n" +
   " \"What is your favorite color?\"\n" +
   " \"" + favorite_color + "\"\n"
   );
}

knightInfo_ES5({name: "Sir Galahad of Camelot.", quest: "I seek the Grail.", favorite_color: "Blue...no yellow...aaaaaaaugh!"});

"What is your name?"
"Sir Galahad of Camelot."

"What is your quest?"
"I seek the Grail."

"What is your favorite color?"
"Blue...no yellow...aaaaaaaugh!"

But the ES6 Knights won the code-joust by showing off their at-first-it-may-seem-like-just-obfuscatory-showboating-but-actually-makes-code-more-declaratory destructuring-assignment:

function knightInfo_ES6( knight ){

   // Destructuring Assignment of name, quest, favorite_color...
   var { name, quest, favorite_color } = knight;
      
   // Constructing a string via Template String:
   console.log(`
  "What is your name?"
  "${name}"

  "What is your quest?"
  "${quest}"

  "What is your favorite color?"
  "${favorite_color}"
`
   );
}

knightInfo_ES6({name: "Sir Galahad of Camelot.", quest: "I seek the Grail.", favorite_color: "Blue...no yellow...aaaaaaaugh!"});

And, in case thou didst not also notice, the ES6 Knights — what show-offs! — also made use of ES6 "template strings" magic in their console.log statement...for the "template strings" allow ye to place whatsoever JavaScript expression that returneth a value within ${}, and it shall be automagically concatenated into the output string, wherefore the ES5 Knights were stuck with ye olde-fashioned string concatenation with + signs... Also, as thou seest, the template strings honor end-of-lines, while ye olde-fashioned ES5-ers need to awkwardly put in + "\n" at the end of each line...not to mention the uber-awkward + "\\""...

And, behold, the ES5 Knights all became ES6 Knights from that day forward, and The Kingdom of JavaScript was greatly strengthened as all JavaScript Knights rode under the same ES6 banner...

Another happy ending, dear reader!

For more on the "destructing assignment" of both objects and arrays, visit MDN's web-scroll for Destructuring Assignment.

For more on "template strings" -- oh, excuse me, now they're called "template literals" ... visit MDN's web-scroll for Template Literals.

And if you really want to learn ES6, Functional and Declarative Programming, React and Redux (with some Node & Express thrown in on the last chapter), get the O'Reilly scroll Learning React...

And until next time, The Tenacious Techie says...keep...on...hacking!

This blog post was originally published at http://johndavidaynedjian.com/blog/es6-chronicles-destructuring-assignment-ooh-and-template-strings-too/