5 tips of Javascript variables

Photo by Christopher Gower on Unsplash

One of the most basic characteristics of any language is variables. Their use (or misuse) could cause us a headache.

For this reason, is very important to know what are their characteristics and particularities of Javascript variables.

Let’s go with 5 tips:

1. var, let y const

In JS (at least, from ES6) we’ve 3 different ways of declaring variables:

var oneVarlet 
let antoherVar
const constVar

‘var’ is the old way of declaring variables and, simplifying it very much, the main negative point here is that with var we only have 2 scopes: Global or method. In the next example, could you predict what is the output?

var sampleVar = 'Hello'
function test() {
  var insideVar = 'world'
  
  for (var i = 0; i<1; i++) {
    var insideVar = ' dentro de ámbito interno'
  }
  console.log(sampleVar + ' ' + insideVar)
}

test()

Unlike we can think, we can see that internal variable assignation overrides our method variable.

Recomendation: use always let and const. Both of them have block scopes.

2. Hoisting

Hoisting is a JS mechanism to allow us to use functions that have not been yet declared.

test() // It's not yet declared, but I can use it
function test() {
   console.log('Hello world')
}

But hoisting is not applied to variables:

var x = 5
console.log('x: ' + x + ' - y: ' + y)
var y = 3
$> x: 5 - y: undefined

3. 0, null y undefined

In JS, a variable could have 3 different states:

• 0 (or any value): Variable has been initialized and can be used
• undefined: We only have declared the variable but we didn’t assign it any value.
• null: This is a special type and its meaning is that the variable is ‘empty’ (don’t have any value)

console.log('myVar is undefined ' + myVar) // myVar is undefined $> $> undefined
var myVar = null
console.log('myVar is null ' + myVar)       // myVar is null null
console.log('typeof myVar ' + typeof myVar) 
$> typeof myVar object                      // (bug in ECMAScript,      
                                            // it should be null)
myVar = 0
console.log('myVar is 0 ' + myVar)          
console.log('typeof myVar ' + typeof myVar) 
$> myVar is 0 0
$> typeof myVar number

4. Equals and equals

In JS, we have 2 differents types of comparission: == & ===

With ==, we are checking that values are equals (allowing JS to make a cast if it needed).

let numeric = 5
let oneString = "5"
console.log('typeof numeric: ' + typeof numeric)
$> typeof numeric: number
console.log('typeof oneString: ' + typeof oneString)
$> typeof oneString: string
console.log('numeric == oneString? ' + (numeric == oneString))  
$> true

But, with === we are checking against value and type (we don’t allow JS to cast to another type).

let numeric = 5
let oneString = "5"
console.log('typeof numeric: ' + typeof numeric)
$> typeof numeric: number
console.log('typeof oneString: ' + typeof oneString)
$> typeof oneString: string
console.log('numeric === oneString? ' + (numeric === oneString))  
$> false

Always use === unless you know why you’re doing it.

5. NaN could be a string

If we try to make a math operation over a non-math variable, JS will assign a NaN (not a number) value. That value could be cast (with our knowledge or not) to a string.

Could you see whats happens to the next piece of code?

console.log('b' + 'a' + + 'a' + 'a') 
$> baNaNa