DEV Community

Make Your Code Cleaner, Shorter and Easier to Read! ES6 Tips and Tricks.

Sam Williams on January 23, 2018

Template literals Template literals make working with string so much easier than before. They're started with a back tick and can have v...

Read full post

Rinat Valiullov • Jan 29 '18

In console I have: "Uncaught SyntaxError: Unexpected token." (row#2 => job.company:...)
function es6({ age, name, job.company: company}) { var yearOfBirth = 2018 - age, console.log(${ name } works at ${ company } and was born in ${ yearOfBirth }.); }

Erica DiGiulio • Jan 30 '18

That's because of the comma at the end of the assignment.

dshepsis • Jan 24 '18

The code sample for Dynamic Property Names is incorrect:

let  city= 'sheffield_';
let a = {
    [ city + 'population' ] = 350000
};
a[ city + 'county' ] = 'South Yorkshire';
console.log(a); // {sheffield_population: 350000, sheffield_county: 'South Yorkshire' }

On line 3, you use an = symbol instead of the : operator.

Sam Williams • Jan 24 '18

Thanks for pointing that out. All changed now

Fabio Pontes • Jan 24 '18

Nice article, nicely summary of ES6 Tips and Tricks. The for has a typo.

for (var i = 1, i < 5, i++){ // for is separated with ; instead of ,
    setTimeout(() => { console.log(i); }, 1000);
}

Correct one:

for (var i = 1; i < 5; i++){
    setTimeout(() => { console.log(i); }, 1000);
}

Sam Williams • Jan 24 '18

Thanks, I must have been on auto pilot!

Rinat Valiullov • Jan 29 '18 • Edited

You have a tiny misspelling

function foo() { return { name: 'Anna', age: 56, job: { company: 'Tesco', title: 'Manager' } }; } // pre ES6 let a = foo(), name = a.name, *****age = name.age*****, company = a.job.company; // ES6 destructuring and concise parameters let { name, age, job.company: company} = foo();

Sam Williams • Jan 30 '18

Thanks for pointing it out.

reggietheroman • Jan 24 '18

Theres so many 'little' things here I have seen in my senior developers code that I've never been able to wrap my head around! Thanks so much for sharing!

Sam Williams • Jan 24 '18

It's great when you learn a new thing and then suddenly understand how a bit of code works. Hopefully you can now write code more like a senior developer!

Gutem • Jan 25 '18

2 typos:

var fName = 'Peter', sName = 'Smith', age = 43, job: 'photographer';
var a = 'Hi, I'm ' + fName + ' ' + sName + ', I'm ' + age + ' and work as a ' + job + '.';

Change the ":" at job assigment to "=" and escape all single quotes inside the var a or use double quotes starting/finishing.

var fName = 'Peter', sName = 'Smith', age = 43, job = 'photographer';
var a = 'Hi, I\'m ' + fName + ' ' + sName + ', I\'m ' + age + ' and work as a ' + job + '.';

Sam Williams • Jan 26 '18

Thanks, the dev.to community is so observant

Vitaliy Korotynskyy • Jan 25 '18 • Edited

Great ES-6 features explanation. I've found typo:

function foo(a, b, c) { console.log(a=${a}, b=${b}, c=${c}}
let data = [5, 15, 2];
foo( ...data); // a=5, b=15, c=2

There is a missing closing bracket of console.log()

Sam Williams • Jan 26 '18

Thanks for pointing that out. I hope you enjoyed the post beside the typos

Comment deleted

Sam Williams • Jan 30 '18

If you would like to, that would be amazing.

plainJavaScript • Mar 15 '18

Really nice little Tutorial. You always went directly to the main point. I saw many tutorials that looks like a philosophical stuff...

Sam Williams • Mar 15 '18

Thanks. That's what I've been aiming for. There are so many books and sites out there explaining the exact mechanics and all possible variations but that doesn't help many people.

Is there another topic you think I should try to tackle?