javascript Archives - Mohammed Lakkadshaw's Blog

In this post, I am going to share with you Javascript ES6+ features that I find the most useful:

For…of Loop
Arrow Functions
Async and Await
Template literals
Destructing

For…of Loop

Before either we had to write a full for loop or call the forEach function on the array to iterate over its item.

Previously we had to do this

var animals = ['cat', 'dog', 'monkey', 'goat'];
animals.forEach(function(animal) {
    console.log(animal);
});

// OR THIS

for(var i=0; i < animals.length; i++) {
    console.log(animals[i])
}

var animals = ['cat', 'dog', 'monkey', 'goat'];

animals.forEach(function(animal) {

console.log(animal);

});

// OR THIS

for(var i=0; i < animals.length; i++) {

console.log(animals[i])

}

Now with the new version of JavaScript, we can simply write the For…Of loop

for (let animal of animals) {
    console.log(animals)
}

for (let animal of animals) {

console.log(animals)

}

If we have to iterate over an object’s keys we can use the For…In loop

var address = {
    street: '123 Example Street',
    city: 'TestCity',
    state: 'CoolState'
};

for (let key in address) {
    console.log(address[key]);
}

var address = {

street: '123 Example Street',

city: 'TestCity',

state: 'CoolState'

};

for (let key in address) {

console.log(address[key]);

}

Arrow Functions

If you have done programming in JavaScript you must be familiar that we have to create a LOT of functions in javascript as it is an asynchronous programming language.

With the new Arrow Functions, it makes the code cleaner and also saves you a few keystrokes.

Consider the following example, previously we had to do this

setTimeout(function() {
    console.log('5 seconds later')
}, 5000)

setTimeout(function() {

console.log('5 seconds later')

}, 5000)

Now with the ES6+ syntax, it can be compressed into a single line, in a single like arrow function we don’t have to write the return statement, the value of whatever expression preceding the arrow will be returned.

setTimeout(() => console.log('5 seconds later'), 5000)

1	setTimeout(() => console.log('5 seconds later'), 5000)

We can also create multi-line arrow functions that accept multiple arguments

const compute = (arg1, arg2, arg3) => {
    const total = arg1 + arg2 + arg3;
    return total * total;
}

compute(4,5,6)

const compute = (arg1, arg2, arg3) => {

const total = arg1 + arg2 + arg3;

return total * total;

}

compute(4,5,6)

Async and Await

This is the feature that I use a lot especially when doing server-side programming using Node.JS, but you can also use it on the front-end and it also works in all the major browsers.

With Async and Await keywords, you can write asynchronous code that uses promises appear as if it is synchronous and make the code more readable.

Consider the following example without async await

function doSomething() {
    getData().then((data)=> { //asychronous call
        const dataWithSomething = doSomethingWith(data) //sychronous call
        passDataToAnotherService(dataWithSomething).then((processedData) => { //asychronous call
            doSomeMoreThing(processedData) //sychronous call
        })
    })
}

function doSomething() {

getData().then((data)=> { //asychronous call

const dataWithSomething = doSomethingWith(data) //sychronous call

passDataToAnotherService(dataWithSomething).then((processedData) => { //asychronous call

doSomeMoreThing(processedData) //sychronous call

})

}

Now with Async and Await keywords, we can update the code and make the asynchronous functions look like synchronous functions and it results in a much cleaner code, see for yourself:

async function doSomething() {
    const data = await getData();
    const dataWithSomething = await doSomethingWith(data);
    const processedData = await passDataToAnotherService(dataWithSomething);
    doSomeMoreThing(processedData)
}

async function doSomething() {

const data = await getData();

const dataWithSomething = await doSomethingWith(data);

const processedData = await passDataToAnotherService(dataWithSomething);

doSomeMoreThing(processedData)

}

As you can see with the update the code is much more simplified. To use async-await first you have to create a function with keyword async, then inside the function, you can call asynchronous methods that uses promise and add the await keyword in front of the function call.

Template literals

Template literals is a very useful feature, previously we had to use string concatenation the can quickly get out of hand if we are using multiple values or if want to construct a multi-line string, consider the following example

var bookCount = 100;
var message = 'Your have ' + bookCount + ' books.'

1 2	var bookCount = 100; var message = 'Your have ' + bookCount + ' books.'

The code can be simplified with template literals

var books = 100;
var message = `You have ${bookCount} books.`;

1 2	var books = 100; var message = `You have ${bookCount} books.`;

To use the template literal we have to enclose the string in ` and then enclose the variable name under ${<variable_name>}

Template literals can also expand to multiple lines

var message = `
    You have ${bookCount} books in your library.
    The most popular title in you collection is: ${popularTitle}.
    Your have favourited ${favBookCount} books.
`

var message = `

You have ${bookCount} books in your library.

The most popular title in you collection is: ${popularTitle}.

Your have favourited ${favBookCount} books.

Imagine constructing the above code using string concatenation, it would be an unreadable mess.

Destructuring

Destructuring allows us to extract values from an object and easily assign it to variables.

Considering the following example, here is what we normally do when we want to extract values from an object

var person = {
    name: 'James Bond',
    age: 41,
    occupation: 'plumber'
}

// Without Destructing
const name = person.name;
const age = person.age;
const occupation = person.occupation;

var person = {

name: 'James Bond',

age: 41,

occupation: 'plumber'

}

// Without Destructing

const name = person.name;

const age = person.age;

const occupation = person.occupation;

With destructuring you can simplify the code as following:

//With Destructing
const { name, age, occupation } = person;

// And we can normally use the defined variables
console.log(`The name is ${name}`);

//With Destructing

const { name, age, occupation } = person;

// And we can normally use the defined variables

console.log(`The name is ${name}`);

and we can use the name, age, and occupation as variables in our code.

That’s it!

These the feature that I find the most useful in ES6+, please share if you found it interesting and let me know in the comments what ES6+ feature you like the best.

Before starting my latest web-development project I was looking for some robust javascript frameworks that I could use.

I was familiar with AngularJS and I loved it, but it doesn’t have a lot of utility methods and I was looking for some solution to solve that problem.

So, I thought about using UnderscoreJS, which is a collection of utility methods with angularJS and I got myself a killer web development toolkit. In this blog post, I have summed up UnderscoreJS methods which I find useful. visit underscorejs.org to view all the available methods.

Using Underscore with Angular:

Combining angular and underscore is pretty straightforward, just add import underscore in your index.html, then add it as a service.

And then we could inject it into our controllers.

Useful Underscore methods:

I have compiled a list of my favourite underscoreJS methods, you can always visit underscorejs.org to view all the methods that are available in underscore.

_.isUndefined:

This method is used to determine whether the specified value is undefined or not, I know you could always do typeof value === “undefined” to check whether it is undefined or not, but I find this neater.

	_.isUndefined(value)
=>
(Returns a boolean value true/false)

_.isUndefined(value)

(Returns a boolean value true/false)

_.defaults:

This is also a very useful method, it allows you to define default values for something if they are not present.

var data = {"model":"T", "manufacturer": "Ford", "price": "200"};
_.defaults(data, {"model":"N/A", "N/A": "Ford", "price": "0"})

output: ---> {"model":"T", "manufacturer": "Ford", "price": "200"}

_.defaults({},{"model":"N/A", "N/A": "Ford", "price": "0"})	
output: ---> {"model":"N/A", "N/A": "Ford", "price": "0"}

var data = {"model":"T", "manufacturer": "Ford", "price": "200"};

_.defaults(data, {"model":"N/A", "N/A": "Ford", "price": "0"})

output: ---> {"model":"T", "manufacturer": "Ford", "price": "200"}

_.defaults({},{"model":"N/A", "N/A": "Ford", "price": "0"})

output: ---> {"model":"N/A", "N/A": "Ford", "price": "0"}

_.where:

This method comes handy when you want to search something in the array of objects using some attributes present in the object.
consider the example below.

var data = [{'model':"T", 'manufacturer':'Ford'},{'model':"P", 'manufacturer':'Ford'},{'model':"E", 'manufacturer':'Ford'},{'model':"a", 'manufacturer':'GM'},{'model':"g", 'manufacturer':'GM'}];
So,
_.where(list, properties) 
_.where(data, {'manufacturer':'ford'})
=>[{'model':"T", 'manufacturer':'Ford'},{'model':"P", 'manufacturer':'Ford'},{'model':"E", 'manufacturer':'Ford'}]

var data = [{'model':"T", 'manufacturer':'Ford'},{'model':"P", 'manufacturer':'Ford'},{'model':"E", 'manufacturer':'Ford'},{'model':"a", 'manufacturer':'GM'},{'model':"g", 'manufacturer':'GM'}];

So,

_.where(list, properties)

_.where(data, {'manufacturer':'ford'})

=>[{'model':"T", 'manufacturer':'Ford'},{'model':"P", 'manufacturer':'Ford'},{'model':"E", 'manufacturer':'Ford'}]

_.uniq:

This method operates on arrays, and it removes duplicates in the array.
Consider the following example:

_.uniq(array, [isSorted], [iteratee])

1	_.uniq(array, [isSorted], [iteratee])

_.uniq(['Tim','Jon','Jim','Tim']);
=> ['Tim','Jon','Jim'];

1 2	_.uniq(['Tim','Jon','Jim','Tim']); => ['Tim','Jon','Jim'];

_.pluck:

if you ever wanted to extract some values from an array of objects, well the pluck method let’s you do that.
Here is the example:

var people = [{name:'Joe', hobby:'baseball'}, {'Jane', hobby:'swimming'}, {'Tim', Hobby:'basketball'}, {'Duke', hobby:'cricket'}];

-.pluck(people,'name');
=>['Joe','Jane','Tim','Duke']

var people = [{name:'Joe', hobby:'baseball'}, {'Jane', hobby:'swimming'}, {'Tim', Hobby:'basketball'}, {'Duke', hobby:'cricket'}];

-.pluck(people,'name');

=>['Joe','Jane','Tim','Duke']

By merging these two awesome web development frameworks together we can get a pretty nice web development experience, as angular serves as an awesome MVC, and underscore provides a very useful collection of utility methods.

About me:

I am Mohammed Lakkadshaw. A freelance javascript developer with expertise in NodeJs Angular and React. If you like this article please share them on Twitter Facebook and Google+.

Category: javascript

5 Most useful ES6+ Features