DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for ES6 way of coding Javascript!
Ritesh Kumar
Ritesh Kumar

Posted on

ES6 way of coding Javascript!

JavaScript is an incredibly fast and efficient programming language to use for a variety of purposes. Today Every type of software uses JavaScript, including Web apps, 3D games, robots, IoT devices, etc.

Back in 2007, Jeff Atwood (founder of StackOverflow), made a case that JavaScript would become a bigger part of web development. Atwood coined the term Atwoodโ€™s Law, which states:

Any application that can be written in JavaScript, will eventually be written in JavaScript.

Itโ€™s now ten years later, and Atwoodโ€™s statement is truer than ever. JavaScript is continuing to gain more and more adoption. The โ€œnext generationโ€ of Javascript is something known as ES6. ES6 is so far the best and biggest update javascript has ever received. It streamlined the javascript development and almost killed jQuery's career. ES6 mainly allows you to write less code and do more.
In this post, I'll go over the six major differences between ES6 and ES5. Letโ€™s take a look.

Arrow function: write less do more

ES5 WAY

function add(a,b){ 
    return a+b
}
console.log(add(2,3))
//OUTPUT: 5
Enter fullscreen mode Exit fullscreen mode

ES6 WAY

const add = (a,b)=> a+b
console.log(add(2,3))
//OUTPUT: 5
Enter fullscreen mode Exit fullscreen mode

Use const if you don't want to reassign the 'element variable by mistake.

ES5 WAY

var element = document.getElementById('myForm')
Enter fullscreen mode Exit fullscreen mode

ES6 WAY

const element= document.getElementById('myForm')
Enter fullscreen mode Exit fullscreen mode

De-structuring: write less do more!

ES5 WAY

var user = {
    name "Ritesh Kumar", 
    username: "@0xRitesh"
}
const name = user.name
const username user.username
Enter fullscreen mode Exit fullscreen mode

ES6 WAY

var user = {
    name "Ritesh Kumar".
    username: "@0xRitesh"
}
const {name,username} = user
Enter fullscreen mode Exit fullscreen mode

Template Literals

ES5 WAY

function getUsertMessage(name,country){
    console.log('Hi, my name is '+ name+ ',and I am from '+ country)
}
logUserMessage('Ritesh, 'India')
Enter fullscreen mode Exit fullscreen mode

ES6 WAY

function logUserMessage(name,country){
    console.log(`Hi, my name is ${name}, and I am from ${country}`)
}
logUserMessage('Ritesh', 'India')
Enter fullscreen mode Exit fullscreen mode

improve Object Literals

ES5 WAY

function getUserObj ( name, age, address){
    return {
        name: name,
        age: age,
        address: address
        }
}
Enter fullscreen mode Exit fullscreen mode

ES6 WAY

function getUserObj ( name, age, address){
    return {
        name,
        age,
        address
        }
}
Enter fullscreen mode Exit fullscreen mode

Default Parameters

ES5 WAY

function ES5Fun( username, platform){
    username, = username, || '@wordssaysalot';
    platform = platform || 'Dev';
}
Enter fullscreen mode Exit fullscreen mode

ES6 WAY

function ES6Fun( username = '@wordssaysalot' , platform= 'Dev') {
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Thanks for reading the article! I hope you guys found this article useful, and I hope I was able to introduce you to some of the ES6 features.


Top comments (12)

Collapse
 
lukeshiru profile image
Luke Shiru

You have a few typos:

In "Arrow function: write less do more", ES6 is missing an =:

const add = (a, b) => a + b;
Enter fullscreen mode Exit fullscreen mode

Also ideally you should show how it works with a single argument:

const add = a => b => a + b;
Enter fullscreen mode Exit fullscreen mode

In "Template Literals" you used ' instead of using back-ticks:

const logUserMessage = (name, country) =>
    console.log(`Hi, my name is ${name}, and I am from ${country}`);
Enter fullscreen mode Exit fullscreen mode

One last thing: You go back and forward between using new and old syntax. Ideally you should use arrow functions in all your examples.

Cheers!

Collapse
 
supportic profile image
Supportic

Sometimes for the sake of simplicity you don't want to use arrow function syntax.
E.g. event listeners, the reference of *this * comes in handy to reference the element. On the other hand you could also use event.target. My point is, arrow function syntax is not the holy grail.

Collapse
 
lukeshiru profile image
Luke Shiru

If you write arrow functions inside classes, you can access this:

class Example {
    name = "Foo";
    greet = () => console.log(`Hello, ${this.name}!`);
}
Enter fullscreen mode Exit fullscreen mode

And in plain objects you can still avoid writing function by using this syntax:

const example = {
    name: "Foo",
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
};
Enter fullscreen mode Exit fullscreen mode

Arrow functions aren't the holy grail, indeed ... but that doesn't mean that we need to use function everywhere either, that only means that we need to use it only when arrow functions don't work.

Thread Thread
 
wordssaysalot profile image
Ritesh Kumar

Thank you for pointing this up; it was a typo. and I've made the necessary changes.

Collapse
 
revenity profile image
Revenity

Remember: Arrow function does not have their own scope so use

const App = (name) => {
    this.name = name
}
Enter fullscreen mode Exit fullscreen mode

this will be undefined in modules and window in page scripts

Collapse
 
lukeshiru profile image
Luke Shiru
Collapse
 
mod5ied profile image
Patrick

Dude he used backticks. Check well.

Collapse
 
lukeshiru profile image
Luke Shiru

The post was updated after I made the comment ๐Ÿ˜…

Collapse
 
larsonnn profile image
Lars Feldeisen

Note for Arrow functions:

Arrow functions can be tricky when using it without declaration.

const runThis = (cb) => cb();
runThis(() => x+x);
Enter fullscreen mode Exit fullscreen mode

Error would be:

VM1535:1 ReferenceError: x is not defined
    at <anonymous>:1:60.       <---------- ?
    at runThis (<anonymous>:1:35)
    at <anonymous>:1:47
Enter fullscreen mode Exit fullscreen mode

But with declaration

const add = () => x+x;
runThis(add);
Enter fullscreen mode Exit fullscreen mode

Looks like this:

VM1587:1 ReferenceError: x is not defined
    at add (<anonymous>:1:24) <---------- the function name
    at raise (<anonymous>:1:35)
    at <anonymous>:1:47
(anonym) @ VM1587:1
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ayaanraj profile image
ayaanraj

Instead of this

const add (a,b)=> a+b

it should be

const add = (a,b)=> a+b

Collapse
 
brunoj profile image
Bruno

good read

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.