5 tips en el manejo de variables en JavaScript

Una de las características básicas de cualquier lenguaje son las variables. Su uso o mal uso puede provocarnos más de un dolor de cabeza.

Es por eso, que es importante conocer cuales son las características y las particularidades de las variables en JavaScript.

Por ello, aquí van 5 tips:

1. var, let y const

En JS (a partir de ES6) tenemos 3 formas de declarar variables.

var oneVarlet 
let antoherVar
const constVar

Simplificando mucho (ampliaré info en otro post), con var únicamente tendremos 2 scopes: Global o método, lo que, puede provocar efectos colaterales indeseados (como vemos en el siguiente ejemplo, en el que la variable interna, nos sobreescribe el valor de la variable insideVar)

Recomendación: Utiliza siempre let y const

2. Hoisting

Hoisting (traducido como elevación) es un mecanismo de JS que nos permite utilizar funciones antes de declararlas.

test() // Aún no está declarada la función, pero ya puedo llamarla
function test() {
   console.log('Hello world')
}

Sin embargo, esto no se aplica a las variables

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

3. 0, null y undefined

undefined es un estado de la variable en el que no le hemos asignado ningún tipo de valor o, incluso, ni ha sido declarada aun la variable.

null, es un tipo especial que no contiene tipo ni valor (la variable aun no ha sido inicializada)

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 en ECMAScript, debería ser null)
myVar = 0
console.log('myVar is 0 ' + myVar)          // myVar i 0 0
console.log('typeof myVar ' + typeof myVar) // typeof myVar number

4. Igual e igual

En JS, disponemos de 2 tipos de comparaciones == y ===.

Con el ==, comparamos que los valores son iguales (permitiéndole a JS hacer un cast de los tipos si fuera necesario)

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

Sin embargo, con ===, le indicamos a JS que deben ser iguales en valor y tipo

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

5. NaN puede convertirse en cadena

Si intentamos realizar una operaciones sobre un tipo no numérico, JS nos asignará el valor NaN (Not a Number). Dicho valor, concatenándolo a una cadena se convertirá en una cadena.

¿Puedes ver lo que ocurre en el siguiente código?

console.log('b' + 'a' + + 'a' + 'a') // baNaNa