Wrapping Up
Template literals and destructuring greatly reduce the noise in code and are among the most charming features in modern JavaScript. Thanks to template literals, we’ll have no more clutter from multiple lines of +s to concatenate string expressions. Furthermore, tagged templates offer the ability to process literals to implement custom logic. Object literals reduce the ceremony around creating objects, and powerful destructuring makes extracting data from arrays and objects pretty darn easy. Furthermore, mixing destructuring with the rest operator makes the code for copying objects extensible to adding and removing properties.
In the next chapter, you’ll learn about all the improvements in JavaScript to do OO programming.
Exercises
Literals and destructuring are some of the most powerful features of JavaScript, but they come with some idiosyncrasies. The following practice exercises will help you hone the concepts. You can find answers to these exerciseshere.
Exercise 1
Let’s implement the greet() method, using template literals, to return the expected string result.
| | 'use strict'; |
| | |
| | const greet = function(name, gender) { |
| | //Your code goes here |
| | } |
| | |
| | console.log(greet('Sara', Symbol.for('female'))); //Hello, Ms. Sara |
| | console.log(greet('Tom', Symbol.for('male'))); //Hello, Mr. Tom |
Exercise 2
Let’s implement a tagged template named stripMargin that removes all leading spaces and all indentations on the new lines. Also, the tagged template should convert all expressions to uppercase.
| | 'use strict'; |
| | //Your code goes here |
| | |
| | const name = 'Jane'; |
| | |
| | const processed = stripMargin` This is for |
| | ${name} and it needs to be |
| | delivered by December 24th.` |
| | |
| | |
| | console.log(processed); |
| | //This is for JANE and it needs to be delivered by December 24th. |
Exercise 3
Let’s receive the values returned by the given function in discrete variables. If a value is not returned, let’s use the value 0 instead.
| | 'use strict'; |
| | |
| | const beforeAndAfter = function(number) { |
| | if(number < 0) return []; |
| | if(number === 0) return [1]; |
| | |
| | return [number - 1, number + 1]; |
| | } |
| | |
| | let before = 0; |
| | let after = 0; |
| | |
| | //Your code goes here |
| | = beforeAndAfter(7); |
| | console.log(`${before} and ${after}`); //6 and 8 |
| | |
| | //Your code goes here |
| | = beforeAndAfter(9); |
| | console.log(`${before} and ${after}`); //8 and 10 |
| | |
| | //Your code goes here |
| | = beforeAndAfter(0); |
| | console.log(`${before} and ${after}`); //0 and 1 |
| | |
| | //Your code goes here |
| | = beforeAndAfter(-1); |
| | console.log(`${before} and ${after}`); //0 and 0 |
Exercise 4
Let’s invoke the purchaseItems() function in a way that it prints the desired result.
| | 'use strict'; |
| | |
| | const purchaseItems = function(essential1, essential2, ...optionals) { |
| | console.log(`${essential1}, ${essential2}, ${optionals.join(', ')}`); |
| | } |
| | |
| | const mustHaves = ['bread', 'milk']; |
| | const also = ['eggs', 'donuts']; |
| | const andAlso = ['juice', 'tea']; |
| | |
| | //call purchaseItems so it prints |
| | //bread, milk, eggs, donuts, coffee, juice, tea |
| | //Your code goes here |
Exercise 5
Let’s use destructuring on parameters to implement the getDetails() function.
| | 'use strict'; |
| | //Your code goes here |
| | |
| | const details = |
| | getDetails({name: 'Sara', |
| | born: { month: 1, day: 1, year: 2000 }, |
| | graduated: { month: 5, day: 31, year: 2018 }}); |
| | |
| | console.log(details); |
| | //Sara born in the year 2000, graduated in 2018. |