ES6 features: Essential explanations and example for Vue JS development

ES6 (a.k.a ES2015) is the current specification of the JavaScript language. So, if you’re new to JavaScript or haven’t updated your JavaScript knowledge recently, there are a number of new ES6 features that make development much better and more enjoyable. Also, if you are a Vue.js developer, this specification will benefit a lot to you and your business when you get to know and learning it.

ES6 features

However, a few of its features are specifically suited to solve problems that arise when developing with Vue.js. Also, as a means of triage, you might start with those features that apply to Vue specifically. The sooner you get to know about that, the better your development will be obviously. So now, we – ArrowHiTech would like to introduce to you guys some essential explanations of ES6 features, along with the examples for Vue JS development.

Let’s get into it!

#1. Modules – ES6 features of success

How do you load a JavaScript object from one file into another? There was no native way to do it pre-ES6. Using JavaScript modules, we can do it with export and import syntax. One great use case for module files is a component. Pre-ES6, we’d need to put all our component definitions in the main file including our Vue instance. Using modules, we can put our component definitions in separate files and achieve better organization.

We can now import the component definition object now in our main file:

 app.js
 
 import component1 from './component1.js';
 Vue.component('component1', component1)
 ...

An even better option for modularizing your components is to utilize Single-File Components. These make use of JavaScript modules, but also require a build tool like Webpack.

#2. Arrow functions – one of the most prominent ES6 features

These are a new way to declare JavaScript ES6 features. They provide a shorter syntax, but differ from regular JavaScript function in other ways, too. An important feature of arrow functions is that they do not bind a value for this. Instead, they use this of the enclosing context. Consider JavaScript array methods requiring a callback function. Array filter, for example, allows you to return a new array only including those items that match the filter defined by the callback.

If you use a regular function for a callback, however, it will bind its own value for this. You can’t then refer to ES6 features of the Vue object as this.vueProperty from within the callback, you have to manually create them somewhere in the scope of the callback. In the below example, size is a data property. In the fitlerBySize computed property, we need to declare a variable size so this value can be used in the filter callback:

 new Vue({
  data: {
    size: 'large',
    items: [ { size: 'small' }, { size: 'large' } ]  
  },
  computed: {
    filterBySize() {
      let size = this.size;
      return this.items.filter(function(item) {
        return item.size === size;
        // Note: this.size is undefined
      });
    }
  }  
});

Also, you can make arrow function syntax even terser in certain scenarios. If you only have one parameter for your function, you can drop the brackets (). If you only have one expression in your function, you can even drop the curly braces {}.

#3. Template literals

Template literals use backticks (“) instead of double or single quotes to define a string. Firstly, we can use the method called multi-line strings. Writing a template in JavaScript code is not ideal, but sometimes we want/need to. First, put it all on one line:

 Vue.component({
   template: '<div><h1>{{ title }}</h1><p>{{ message }}</p></div>'
 });

Yet, This is really hard to read when the line gets long. That’s when you make it to the next stage: multi-line integration. Due to how JavaScript strings are parsed, you’ll need to break the string at the end of each line and join it up again with a +. This makes the template much harder to edit, obviously. Template literals, to clarify, are the ES6 features that solve the problem as they allowing multi-line strings without requiring the string to be broken up.

However, sometimes we want a string to be dynamic i.e. include a variable. This is very common in computed properties where you may want to interpolate a string in the template so that it is derived from a reactive Vue.js data property. Also, by using a placeholder ${} in a template literal, we can insert variables and other expressions without breaking the string. Check this example below:

 new Vue({
  data: {
    name: 'George'
  },
  computed: {
    greeting() {
      return `Hello, ${this.name}, how are you?`
    }
  }
});

#4. Destructuring and spread syntax – one of the most flexible ES6 features

Objects are an essential part of Vue.js development. Obviously, ES6 features make it easier to work with object properties through some new syntax features. Destructuring, to clarify, allows us to unpack object properties and assign them to distinct variables. It’s also useful in Vuex actions. Then actions receive a context object which includes properties for the state object and the commit API method.

The Spread syntax, to clarify, is one of the best ES6 features that allow us to expand an object into a place where multiple key/value pairs are expected. Taking an example from Vuex again, we also often want to use our Vuex state properties as computed properties. Pre-E6, we’d have to replicate each one manually. For example:

 store.js

new Vuex.Store({
  state: {
    prop1: ...,
    prop2: ...,
    prop3: ...
  }
});
 app.js

new Vue({
  computed: {
    prop1() {
      return store.state.prop1;
    },
    prop2() {
      return store.state.prop2;
    }
    ...
  }
});

Vue, to clarify, provides the mapState function – that other ES6 features that are on big frameworks can’t compare. This certainly returns an object with all the Vuex state properties that you specify by providing their keys. Using mapState in conjunction with the spread operator, we obviously can combine local computed properties with those from Vuex in a very succinct way.

Final words

That should be it! All in all, here are some essential explanations of the ES6 features, as well as the example for Vue.js development. There are, of course, many other ES6 features that are useful in Vue.js programming, yet they are not significant enough to consider. If your development may encounter any problem, you will know how to solve that, certainly by reckoning the features of ES6. Besides that, if you are still confused about any steps, you can enter your problem into this CONTACT FORM. We will reply your email as soon as possible. So don’t worry about it. During waiting for our answers, let’s explore more awesome services at ArrowHiTech Website.



Tags

Share