Awesome ES6 tips

dellean.santos
Sep 6, 2018 · 3 min read

Hey everybody, today a bring to you somes ES6 tips that can make you Javascript development more clean and productive. So if you’re still learning ES6 this post is for you!!

I’m trying to me straightforward, so make this small compilation of most frequent ES6 features that I use in my code time.

Template Literals

Concatenate string with plus operator? Never again!!!

const firstName = "Dellean"
const lastName = "Santos"
//BAD
const fullName = firstName + " " + lastName
//AWESOME
const fullName = `${firstName} ${lastName}`

Multilines

//BAD
const animals = cat\n' + 'dog\n' + 'frog'
//AWESOME
cons animals = `cat
dog
frog`

Template Literals will preserve new lines and also can evaluate expressions

//BAD
const todayText = "now in timestamp is " + Date.now()
//AWESOME
const todayText = `now in timestamp is ${Date.now()}`

Destructuring Arrays

//BAD
const numArray = [0, 1]
const zero = numArray[0]
const one = numArray[1]
//AWESOME
const [zero, one] = [0, 1]

Destructuring Objects

const author = { name: "Dellean", age: 28 }//BAD
const name = author.name
const age = author.age
//AWESOME
const { name, age } = author
//Destructuring inside functions//BAD
function myName(author){
return author.name
}
//AWESOME
function myName({ name }){
return name
}

Defining objects

If the variable name is the same of atribute of object, you can omit the colon and value.

const name = "Dellean"
const age = 28
//BAD
const author = { name: name, age: age }
//AWESOME
const author = { name, age }

Literals Functions F => F+1

//BAD
callback(function(a){
return a+1
})
//AWESOME
callback( a => a+1 )
//BAD
callback(function(a,b){
doSomething(a)
doSomethingElse(b)
})
//AWESOME
callback((a,b)=>{
doSomething(a)
doSomethingElse(b)
})

Note: Arrow Functions, the lexical value of this isn't shadowed, read more about here.

Default Parameters ( default = true )

//BAD
function myFuncion(firstParam, secondParam){
const x = firstParam || 'xDefaultValue'
const y = secondParam|| 'yDefaultValue'
...
}
//AWESOME
function myFunction(x = 'xDefaultValue', y = 'yDefaultValue'){
...
}

Classes { }

//BAD
function Author(name, age){
this.name = name
this.age = age
}
const dellean = new Author('Dellean', 28)//AWESOME
class Author {
constructor({ name, age }){
this.name = name
this.age = age
}
}
cons dellean = new Author({ name: 'Dellean', age: 28 })

Spread operator …

Spread operator is coolest features in javascript to me, in most of cases that can speed up your development a lot, so it’s very important to you everything wich the operator can do.

Arrays

let myArray = [3,4]
let myNumberArray = [1,2, ...myArray,5,6]
console.log( myNumberArray )
//output [1,2,3,4,5,6]

Objects merge

const author = { name: "Dellean", age: 28 }
const merged = { from: "Brazil", ...author }
console.log( merged )
//output { name: "Dellean", age: 28, from: "Brazil" }

Outstanding Params / Attr

function something({ name, age, ...rest }){
console.log(`name: ${name}`)
console.log(`age: ${age}`)
console.log('rest', rest)
}
something({ name: "Dellean" age: 28, from: "Brazil", dev: true })
//name: Dellean
//Age: 28
//rest { from: "Brazil", dev: true }

Dynamic Property

let age = 'age'
let myObg = { [age] : 28 }
//myObg { age: 28 }
let otherObj = { [`${age}Test`]: 28 }
//otherObj {ageTest: 28}

I hope you enjoyed thats tips, so if help you please leave your clamp and otherwise please leave your comment!

Bye!!!

dellean.santos

Written by

A brazilian Javascript developer and Day Trader ( Systemic anomaly )

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade