I've been doing some personal research into improving my own JavaScript development. I decided to get more familiar with the new version of JavaScript - ES6. ES6 is filled to the brim with some really nice improvements that make JavaScript development much more concise and efficient. After having the opportunity to work on React and React Native projects, I had a chance in putting my new found ES6 knowledge to good use!
If I had to describe ES6 in a sentence:
JavaScript has gone on a diet and cut the fat. Write less, do more!
I have only scratched the surface to what ES6 has to offer and will continue to add more to the list as I learn. If you are familiar with server-side development, you might notice some similarities from a syntax perspective. That in itself shows how far ES6 has pushed the boundaries.
Arrow Functions
Arrow functions are beautiful and so easy on the eye when scrolling through vast amounts of code. You'll see with arrow functions, you'll have the option to condense a function that consists of many lines all the way down to single line.
The traditional way we are all familiar with:
// The "old school" way..
function addSomeNumbers(a, b) {
return a + b;
}
console.log(addSomeNumbers(1, 2));
// Output: 3
ES6:
// ES6.
const addSomeNumbers = (a, b) => {
return a + b;
}
console.log(addSomeNumbers(1, 2));
// Output: 3
The traditional and ES6 way can still be used in the same way to achieve our desired output. But we can condense out arrow function further:
// Condensed ES6 arrow function.
const addSomeNumbers = (a, b) => a + b;
console.log(addSomeNumbers(1, 2));
// Output: 3
Default Function Parameters
When developing using server-side languages, such as C# you have the ability to set default values on the parameters used for your functions. This is great, since you have more flexibilty in using a function over a wider variety of circumstances without the worry of compiler errors if you haven't satisfied all function parameters.
Lets expand our "addSomeNumbers()" function from our last section to use default parameters.
// Condensed ES6 arrow function with default parameters.
const addSomeNumbers = (a=0, b=0) => a + b;
console.log(addSomeNumbers());
// Output: 0
This is an interesting (but somewhat useless) example where I am using "addSomeNumbers()" function without passing any parameters. As a result the value 0 is returned and even better - no compiler error.
Destructuring
Destructuring sounds scary and complex. In its simple terms, destructuring is the process of adding values to an object or array to an existing variable more straightforward. Lets start of with a simple object and how we can output these values:
// Some info on my favourite Star Trek starship...
const starship = {
registry: "NCC-1701-E",
captain: "Jean Luc Picard",
launch_date: "October 30, 2372",
spec: {
max_warp: 9.995,
mass: "3,205,000 metric tons",
length: "685.7 meters",
width: "250.6 meters",
height: "88.2 meters"
}
};
We would normally output the these values in the following way:
var registry = starship.registry; // Output: NCC-1701-E
var captain = starship.captain; // Output: Jean Luc Picard
var launchDate = starship.launch_date; // Output: October 30, 2372
This works well, but the process of returning those values is a little repetitive and spread over many lines. Lets get a bit more focus and go down the ES6 route:
const { registry, captain, launch_date } = starship;
console.log(registry); // Output: NCC-1701-E
How amazing is that? We've managed to select a handful of these fields on one line to do something with.
My final example in the use of destructuring will evolve around an array of items - in this case names of starship captains:
const captains = ["James T Kirk", "Jean Luc Picard", "Katherine Janeway", "Benjamin Sisko"]
Here is how I would return the first two captains in ES5 and ES6:
// ES5
var tos = captains[0];
var tng = captains[1];
// ES6
const [tos, tng ] = captains;
You'll see similarities to our ES6 approach for getting the values out of an array as we did when using an object. The only thing I need to look into is how to get the first and last captain from my array? Maybe that's for a later post.
Before I end the destructuring topic, I'll add this tweet - a visual feast on the basis of what destructuring is...
Destructuring. Courtesy of @NikkitaFTW pic.twitter.com/j8OX3VyrTL
— Burke Holland (@burkeholland) May 31, 2018
Spread Operator
The spread operator has to be my favourite ES6 feature, purely because in my JavaScript applications I do a lot of data manipulation. If you can get your head around destructuring and the spread operator, you'll find working with data a lot easier. A spread operator is "...". Yes three dots - ellipsis if you prefer. This allows you to copy the values of an object to be used as a basis of a new object.
In its basic form:
const para1 = ["to", "boldly", "go"];
const para2 = [...para1, "where", "no", "one"];
const para3 = [...para2, "has", "gone", "before"];
console.log(para1); // Output: ["to", "boldly", "go"]
console.log(para2); // Output: ["to", "boldly", "go", "where", "no", "one"]
console.log(para3); // Output: ["to", "boldly", "go", "where", "no", "one", "has", "gone", "before"]
As you can see from my example above, the spread operator used on variables "para1" and "para2" creates a shallow copy of the array values into our new array. Gone are the days of having to use a for loop to get the values.
I've been meddling around with ReactJS over the last week or so, seeing if this is something viable to use for future client projects. I am always constantly on the lookout to whether there are better alternatives on how my fellow developers and I develop our sites.
