What are some of the ES6 language features should you be familiar with when building applications and using modern JavaScript frameworks?
Something I like about React compared to other frameworks is how you can seamlessly use JavaScript and Html together in the same file. There are no new specialized DOM elements you need to learn. (JSX compiles to plain old JavaScript), and with the addition of React Hooks, the component API has gotten quite simple. The framework focuses on the UI concerns it was intended for.
Learning new ES6 features is recommended for you to be effective at building applications. Below are a few JavaScript tidbits I’d recommend you spend some time learning. These techniques can be used alone with vanilla JavaScript or you can use them with your favorite frameworks like React or Angular.
Template literals (Template strings)
Template literals are string literals that allow embedded expressions and multiline strings.
Shorthand property names
This is so common that it becomes 2nd nature.
MDN: Object initializer New notations in ECMAScript 2015
Arrow functions
Arrow ( ) => { } functions are a quick way to write functions in ES6. In React, you don’t have to worry about the ‘this’ keyword as much if you’re using hooks in your project (rather than classes). Arrow functions allow for quick anonymous functions and implicit returns, so you’ll see and want to use arrow functions quite regularly.
One thing to note about the example above is the opening and closing parentheses (. This is a common way to leverage the arrow function’s implicit return capabilities when working with JSX.
Destructuring
Destructuring might be my favorite new ES6 feature. I destructure objects and arrays all the time (and if you’re using the useState hook in React then you probably are too). It’s a huge time saver. Much less boilerplate code. I love how declarative it is.
Parameter defaults
This is a good tool to have on your toolbelt. It’s how you declare default values for your functions.
Rest/spread
The … (spread) syntax can be thought of as sort of a “collection” syntax where it operates on a collection of values. I use it all the time. It has slightly different meanings in different contexts, so learning the differences will help you.
ESModules
If you’re building a modern web application, it likely supports ES modules. You should take the time to learn how they work because pretty much any application of more than a couple functions would benefit from modules for code reuse and organization. Modules import and export functionality to other modules.
Ternaries
Who doesn’t love ternaries? They’re clear in their intent. They are logically the same as an if…then…else statement. Look for the ( (ifTrue) ? ShowMe : OtherwiseShowMe ) pattern in the markup of the PuppyDogList component. You can easily show and hide content using a ternary.
Array methods
Arrays and array methods are the bread and butter of JavaScript and web applications! This is a skill you should master. Think about it, you’re always slicing and dicing data to display it in different ways. Like filtering data or restricting access to items. I use these methods the most frequently:
- find – (obj) gets the first item that matches
- some – (bool) do some things match?
- every – (bool) do ALL things match?
- includes – (bool) is this in there?
- map – ([ ]) I want an array of these …
- filter – ([ ]) I want all that match
- reduce – ({ }) I want to consolidate you in to one thing…
Here are some examples:
Promises and async/await
This can take a bit of practice and time working with to get good at. These are somewhat complex. I still struggle with them sometimes.
Promises are everywhere in JavaScript. They help you manage asynchronous functions and are returned from many DOM APIs and third-party libraries. They prevent blocking the UI while waiting on a result. Such as calling out for some data. These calls can take several seconds to complete. After calling a function that returns a promise, the application can carry on with business and doesn’t care about the result. The application may or may not get a response.
Async/await syntax is a special syntax for dealing with promises.
There are many JavaScript features which are useful when building complex user interface applications, but these are some of the tools that I find myself reaching for again and again.
Like what you see?
Christopher Kettenbach is a Senior Software Consultant. He specializes in UI development, Java, and front end development tools to create highly accessible web sites including and various screenreader/accessibility techniques.
Author
-
Your additional text goes here
