Cleaning up your code (or how to switch to ES6)

It's been on my mind. I've been using ES6 for projects for a while now. And while some concepts are better stuck in the mature ES5 concepts, I want to point out that there is a lot to be gained from learning how to restructure your code before concluding what should be what.

SO why not take time to write up some basic concepts for viewers passing by my articles while waiting for code to run....

From var to const...

This should be already understood. But, if you are using it without really understanding WHY, let me explain.

var i = 1
if(true) {
var i = 2
}
i; // 2

whereas:

let i = 1
if(true) {
let i = 2
}
i; // 1

Now, this is simple so I can move forward. The reason "let" was introduced was to fix ECMAScript bugs that occurred using "var". The thing is, you should be using let and const, and removing yourself from "var" while using ES6. I won't get into it, but you can read up on it HERE.

What's nice about ES6, you can understand your "scope" better. Using javascript has a horrible context of using the word "this". Literally, the word "THIS" is the most frustrating thing I ever came accross. I remember taking a week before an interview I had with Gitlab a couple years ago to make sure I could explain it with code (it came up too). But ES6 syntax allows you to do this: (<- get it? haha)

function Cat() {
    this.age = 1


    setInterval(() => {
        this.age++ // refers to Cat obj
    }, 3)
}
const c = new Cat()

It used to be some "hacky" BS making this work, but Arrow functions (you can't call them FAT arrow functions, it's incorrect...because arrows have feelings too...the fu%k...). Apart from being 'lexical' in nature, FAT arrow functions make code syntax SO much smaller and readable. I mean, do you want to write this?

var g = [
    'goods',
    'garbage',
    'garage'
]
var g2 = g.map(function(g) {return g.length})
 console.log(g2) //[5, 7, 6]

Writing the word 'function' over and over every time you need to map over some array? Or we create ES6 syntax and scream for joy:

let v = [
    'vehicle',
    'violin',
    'vapor'
]


const v2 = v.map((v) => v.length)
console.log(v2) //[7, 6, 5]

Template Literals

I have no time to write these but I'm making an effort to have more articles on Linkedin (it's a self-motivated thing...) So some shit that should be highlighted as a new part in my article (underlining text to show new section) comes to mind, and I do it. I amy go back and correct the rest...So TEMPLATE LITERALS. Anyone who knows the benefit of these has never looked back:

var newLine = "hi my name is" +
" Nick"
console.log(newLine) //Hi my name is Nick <-boooooo
// or 
let freshLine = `Hi my new new name is Nick
 the Great`
console.log(freshLine) // just use back ticks --no plus sign needed

BUT WAIT! There's more! What if you need to just add a "variable" into your current string?

//BLAH method

var otherLine = " added LINE"


var newLine = "hi my name is" +

" Nick" + otherLine // this is just stupid

//WITH TEMPLATE Literals!!!

let awesomeAddedLine = "and I'm so AWESOME"
let nameString = `My name is Nick ${awesomeAddedLine}`

console.log(nameString) //Notice no added whitespace within the string!

Other than the fact that it reminds me of using JQUERY (EWWWW), this is epic. What's great about these methods, is they are "no-brainers". Anyone who says otherwise has issues.On to the next...

Destructuring

While I tried coming up with all the cool ways that we can use this, I thought one example would do for now, with an article to cover this subject. I linked the heading for context. THis works with arrays and objects, and allows binding throught pattern matching.

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10 
b; // 20 

console.log(rest); // { c: 30, d: 40 }

Ill end with IMPORT/EXPORT

Keeping your code MODULAR is key, the smaller the component, the easier to test, and understand. Anything that makes our code easier to read is a plus, and I think that this handles that quite well

//using import
import MyFile from './MyFile.js'
// do code stuff and then make that code 
// export to be used somewhere else

export default OtherFile

IMPORT and export are standard, and I suggest you read the docs for both HERE and HERE.

I'm hoping anyone who passes by gets some value from this and will follow the links I provided. ES6 has been around, and is becoming almost FULLY NATIVE to browsers. For those of you still not keeping up with everyhitng going on. I'd take a day, sit back, and start trying to restructure your day-to-day work flow. Let's move forward, together. Until next time!