Scotch.io V8 Challenge #13 (Converting ES5 — ES6)

Ileriayo Adebiyi
Sep 7, 2018 · 3 min read
Credit: Scotch.io Code Challenge #13

Following the recent redesign of Scotch.io, a challenge was given to convert ES5 code to ES6.

In this article, I will be showing how I solved it.

1. Convert the function to an ES6 Arrow Function.

ES5

const golden = function goldenFunction(){
alert("this is golden!!")
}
golden()

Arrow functions employ the use of => instead of the function keyword

ES6

const golden = () => alert("this is golden!!")golden()

2. Simplify the following with es6 Enhanced Object Literals.

ES5

const newFunction = function literal(firstName, lastName){
return {
firstName: firstName,
lastName: lastName,
fullName: function(){
alert(firstName + " " + lastName)
return
}
}
}
newFunction("William", "Imoh").fullName()

Enhanced Object Literal provides shorthand for initializing object properties such that it checks if the property key has a corresponding variable name. It assigns the value of that variable to the property otherwise it returns undefined. It also allows for shorthand in defining functions as shown in the following ES6 code-block.

ES6

const newFunction = function literal(firstName, lastName){
return {
firstName,
lastName,
fullName(){

alert(firstName + " " + lastName)
return
}
}
}
newFunction("William", "Imoh").fullName()

3. Condense this code with Destructuring.

ES5

const newObject = {
firstName: "Harry",
lastName: "Potter Holt",
destination: "Hogwarts React Conf",
occupation: "Deve-wizard Avocado",
spell: "Vimulus Renderus!!!"
}
const firstName = newObject.firstName;
const lastName = newObject.lastName;
const destination = newObject.destination;
const occupation = newObject.occupation;
console.log(firstName, lastName, destination, occupation)

Object Destructuring allows us to cut out repetition when retrieving the values of Object properties. We would simply declare variables with same name as the Object properties and assign them to the Object name.

ES6

const newObject = {
firstName: "Harry",
lastName: "Potter Holt",
destination: "Hogwarts React Conf",
occupation: "Deve-wizard Avocado",
spell: "Vimulus Renderus!!!"
}
const {firstName, lastName, destination, occupation} = newObject;
console.log(firstName, lastName, destination, occupation)

4. Combine these arrays with Array Spreading.

ES5

const west = ["Will", "Chris", "Sam", "Holly"]const east = ["Gill", "Brian", "Noel", "Maggie"]const combined = west.concat(east)console.log(combined)

Say we had several arrays and we wanted to combine all of them into a single array, ES6 provides a cleaner way of doing this using Array Spreading or the ... operator.

ES6

const west = ["Will", "Chris", "Sam", "Holly"]const east = ["Gill", "Brian", "Noel", "Maggie"]const combined = [...west, ...east]console.log(combined)

5. Tidy up this multi-line string using Template Literals.

ES5

const planet = "earth"
const view = "glass"
var before = 'Lorem ' + view + 'dolor sit amet, ' +
'consectetur adipiscing elit,' + planet + 'do eiusmod tempor ' +
'incididunt ut labore et dolore magna aliqua. Ut enim' +
' ad minim veniam'
console.log(before)

Template literals:

  • preserves our multi-line string (WYSIWYG)
  • doesn’t require the + concatenate symbol which makes your code look messy if you have so many variables
  • in place of concatenating variables using the +, we can make use of ${variable_name}

ES6

const planet = "earth"
const view = "glass"
var after = `Lorem ${view} dolor sit amet,
consectetur adipiscing elit, ${planet} do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam`
console.log(after)

You can find the link to the ES5 challenge: here.

Find my solution here.

Thanks for reading. (You can add comments below)

Kindly click 👏

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade