DEV Community

loading...
Cover image for Common JavaScript Tips

Common JavaScript Tips

maciejtrzcinski profile image Maciej Trzciński 🌱🇵🇱 Originally published at Medium Updated on ・2 min read

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

Discussion (4)

pic
Editor guide
Collapse
artydev profile image
artydev

Nice thank you

You have also :

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

Regards

Collapse
rinatvaliullov profile image
4rontender • 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 🌱🇵🇱 Author

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..." ):