DEV Community

Cover image for Common JavaScript Tips
Maciej Trzciński 🌱🇵🇱
Maciej Trzciński 🌱🇵🇱

Posted on • Updated on • Originally published at Medium

Common JavaScript Tips

Bellow, I will explain you some popular JavaScript mistakes

Use const/let instead of var

Replace old fashioned var with new const, that will guarantee you better condition of your code.

// bad

var a = foo

var b = bar

// good

const a = foo

const b = bar

Enter fullscreen mode Exit fullscreen mode

If you really need to change variable use let, it’s like var but let has block range, var has functional range.

What is block variable?

Block variable you can read only in defined block of code where was defined.


for(let i = 0; i < 10; i++) { 

  let j = 10

  console.log(j)

  //variable j range

}

console.log(j) //ReferenceError: i is not defined

Enter fullscreen mode Exit fullscreen mode

Functional variable you can read inside whole function not only in the code block.


for(let i = 0; i < 10; i++) { 

  var j = 10

  console.log(j) // 10

}

console.log(j) //10

Enter fullscreen mode Exit fullscreen mode

Both let and const are in block range.


Use Template Literals

Manually joining string with + it’s terrible, it’s bad for refactoring and code readability. The best way for joining words is Template Literals.

If you earlier joined words like that, read this chapter.

const name = Maciej

console.log(Hello + name + , wave)

Enter fullscreen mode Exit fullscreen mode

Now I’ll compare the old method with Template Literals.

const name = Maciej

console.log(`Hello ${name}, wave`)

Enter fullscreen mode Exit fullscreen mode

It’s more clear, right?

In Template Literals you can easily add new lines with only just enter button.

const name = Maciej

console.log(`Hello ${name}

,wave`)

Enter fullscreen mode Exit fullscreen mode

Copy array with spread operator

I think every one of us sometimes must copy the array, but only half of us know about spread operator.

const array = [1,2,3,4,5]

//bad

const newArray = []

for(let i = 0; i < array.length; i++){

  newArray[i] = array[i]

}

//good

const newArray = [...array]

Enter fullscreen mode Exit fullscreen mode

Reference on MDN


Conditional operators

Every one of us sometimes must or want to use conditional operators from some reasons, sometimes you want to save a couple of lines or make the code cleaner.

const a = 0

let b = 0

!a ? b = 1 : b = 2

Enter fullscreen mode Exit fullscreen mode

Like you see on the above snippet, this is not perfect code it's looks weird.

Below you will see easier way.

b = !a ? 1 : 2

Enter fullscreen mode Exit fullscreen mode

Tadam! Looks better, right?

Thanks for reading 🙏


Changelog:

07/22/2020

Added:

  • Use const/let instead of var

  • Use Template Literals

  • Copy array with spread operator

  • Conditional operator

If you like this article, please follow me on Twitter @MaciejDEV


Photo by NeONBRAND on Unsplash

Top comments (4)

Collapse
 
artydev profile image
artydev

Nice thank you

You have also :

b = a && 1 || 2
Enter fullscreen mode Exit fullscreen mode

Regards

Collapse
 
4rontender profile image
Rinat Valiullov • Edited
const a = 0

let b = 0 // one remark: not const

!a ? b = 1 : b = 2

Enter fullscreen mode Exit fullscreen mode
Collapse
 
maciejtrzcinski profile image
Maciej Trzciński 🌱🇵🇱

Thank you for your attention!

Collapse
 
lucassperez profile image
Lucas Perez

I once intentionally used a var declaration at a C style for loop so the value would be accessible from the outside and I got a React warning asking me not to do it. I went quickly from "I'm a genius!" to "Ima refactor dis..." ):