DEV Community

Cover image for Var Wars, The Rise of ES2015
Benjamin🦸‍♂️Auzanneau™
Benjamin🦸‍♂️Auzanneau™

Posted on • Edited on • Originally published at necraidan.com

1

Var Wars, The Rise of ES2015

In this article, we will explore the different ways to declare a variable in JavaScript.

We will also see why var is so problematic and why it must be avoided.

var in a nutshell (aka Var Wars, the Hoisting Menace)

Until ES5, this is the only way to declare a variable.

// Declaring variable
var sith;
// Init
sith = 'Darth Vader';
Enter fullscreen mode Exit fullscreen mode

or directly

// Declaring variable & init
var sith = 'Darth Vader';
Enter fullscreen mode Exit fullscreen mode

Like other languages, is simple to declare a variable.
But in JavaScript, scoping works differently.

var is function scoped, it refer to the parent function.
If there is no parent function, your var is global.

var hanShotFirst = true;

if (true) {
  var hanShotFirst = false;
}

console.log(hanShotFirst); // false
Enter fullscreen mode Exit fullscreen mode

As you can see, you can rewrite and redeclare our variable hanShotFirst (while it's really Han who shoots first, anyway).

Another weird thing :

var obiWan = '🧔🏼';

console.log(obiWan) // '🧔🏼'
console.log(anakin) // 'undefined' with no error

var anakin = '💇‍♂️'
console.log(anakin) // '💇‍♂️'
Enter fullscreen mode Exit fullscreen mode

This atypical behavior is called hoisting

In fact, JavaScript engine reads the script before its execution like :

var obiWan = '🧔🏼';
var anakin;

console.log(obiWan) // '🧔🏼'
console.log(anakin) // 'undefined' with no error

anakin = '💇‍♂️'
console.log(anakin) // '💇‍♂️'
Enter fullscreen mode Exit fullscreen mode

The engine goes up variables and function declarations, as high as possible at the beginning of the parent function.

It is then possible to use the functions and variables of the script before they are actually declared ! 🧐

I feel a disturbance in the force...

ES2015 coming with let and const (aka Var Wars, the New Scope)

The new version of the ES2015 standard comes with few interesting features like new variable declarations let and const.

let deathStar = 'destroyed';

if (deathStar === 'destroyed') {
  let deathStar = 'pending';
}

console.log(deathStar); // 'destroyed', parent scope !
Enter fullscreen mode Exit fullscreen mode

As you can see, let resolve our previous problems.

It prevent :

  • can't use before init (throw error)
  • can't redeclare in same block (throw error)
  • block scoped (prevent shadowing)

What about const ?

Yes, you can declare a constant, but not like other language.

const deathStarV2 = {
  engine: 'off'
}

deathstarV2 = new DeathStar('V3'); // Uncaught TypeError: Assignment to constant variable.

deathstarV2.engine = 'on'; // it works ! 🚀🚀🚀

Enter fullscreen mode Exit fullscreen mode

We can keep the reference of the object, not its content.

Conclusion

I hope this little article gave you a good understanding of all the three ways to declare variables in JavaScript.

We understand why var is dangerous and why we should use let and const instead.

It's basic but essential.

That's it for today, thanks for reading !
May the code be with you !


I'm not a native English speaker so, thanks in advance if you want to improve my article with correct syntax/grammar/sentences.

I can accept all kind remarks :)

Cover by Benjamin Auzanneau on Unsplash

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
stevematdavies profile image
Stephen Matthew Davies

Most ES6 features have been fully supported for a while in all browsers, var should not even be considered at all unless supporting legacy systems.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay