Stop Using function and var in JavaScript!

There is absolutely no reason to use the function and var keywords in modern JavaScript. They are old artifacts from a dark era where they plagued many a developer with unnecessary pain and suffering. All browsers released since 2016 support their enlightened replacements, but developers who learned these evil things continue to use them because they are too lazy, afraid, or clueless not to.

💢 Yes I know that (almost) every stinking tutorial on the planet teaches var and function to beginners as if it is absolute cannon and should never be questioned. They are all brain dead. It is one of the worst examples of collective sheep mentality you can find today. Prove me wrong! I welcome it if you can. You can’t.

Weird Scoped this Variable in function

Ever open a minified JavaScript file? All you see is function everywhere right? That’s enough all by itself to drop function forever from your coding.

But there’s more.

The function keyword has been rendered useless by the amazing addition of fat-arrow functions and class method notation.

The special this variable set within every function is not only confusing for beginners but dangerous and leads to unnecessary bloat. This hack was intended to make JavaScript functions sort of behave like objects in other languages (although the word object has no real place in any JavaScript conversation about functions since it is so confusing). JavaScript objects are their own unique (and amazing) beasts.

Dangerous Function Scope of var

The use of var has always been one of JavaScript’s ugliest, fattest warts due to its functional scope. Always use let or const instead. Anyone telling you differently is an uninformed moron.

💢 As shallow as it sounds, var — and the previously mandatory diseased monstrosity it spawned, the IIFE — kept me from ever taking JavaScript seriously at all. They are completely stupid and objective evidence of how totally brain-dead early JavaScript was. Thankfully modern JavaScript has remedied all of these major warts enabling JavaScript application development at scale.

😕 Yes I do know while loops are bad in JavaScript.

var happy = true
var count = 0


while (happy && count < 10) {
  var happy = false
  console.log("I'm still happy?")
  count++
}

This executes once. The second var happy stomps the global happy because of function scope which, in the absence of an enclosing function, causes happy to be a global stomping not only everything in that file, but every single happy in any file declaration previously.

let happy = true
let count = 0

while (happy && count < 10) {
  let happy = false
  console.log("I'm still happy?")
  count++
}

Yeah, that runs all 10 times.

This leads to the insanely stupid — but absolutely necessary — use of the IIFE which is so stupid and evil we shall never speak its name again.

“How evil?”

I’m glad you asked.

The following uses this behavior to trick unsuspecting coders during (stupid) coding interviews where they actually torture you with impossibly hard challenges involving stuff that should never have existed nor ever be used (rather than observing your output and ability to work on a team).

🤪 This is from an actual coding interview known to have been given both at Facebook and Amazon (and possibly others).

// interviewer: what will the following code output?
const arr = [10, 12, 15, 21]

for (var i = 0; i < arr.length; i++) {
  setTimeout(function () {
    console.log('Index: ' + i + ', element: ' + arr[i])
  }, 3000)
}
Index: 4, element: undefined
Index: 4, element: undefined
Index: 4, element: undefined
Index: 4, element: undefined

While you definitely should understand why the above is so totally broken and be able to describe it in detail if you consider yourself a JavaScript professional you really don’t need to if you are just focused on being a productive developer.

Just use let and const when needed instead.

The proper way to fix the above — of course — is simply to not use var.

// interviewer: what will the following code output?
const arr = [10, 12, 15, 21]

for (let i = 0; i < arr.length; i++) {
  setTimeout(function () {
      console.log('Index: ' + i + ', element: ' + arr[i])
  }, 3000)
}
Index: 0, element: 10
Index: 1, element: 12
Index: 2, element: 15
Index: 3, element: 21