Awesome ES6 tips

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!!!
