Variables
A variable is a binding between a name and a value.
Essential:
github.com/getify/You-Dont-Know-JS
Description:
A variable is a “named storage” for data. Whenever there’s a need to store a piece of data, variables contain it, making it possible to use such data in the program elsewhere. Using variables also ensures code re-usability since it can be used to replace the same value in multiple places. In plain words, they are symbolic names for values in our application, no matter if their stocked information might change over time.
Table of Contents
- 1. Introduction
- 2. Primitive vs Object Binding
- 3. Redeclaring
- 4. undefined vs undeclared
- 5. Documentation
- 6. Related notes
1. Introduction
A variable is a binding between a name and a value. A variable is:
▪ declared when a const, let or var keyword is used with a name: let myVar
▪ initialized when an initial value is assigned to it: myVar = 1
▪ reassigned when its value changes: myVar = 2
Although you can declare and initialize a variable on the same line of code:
let myVar = 1, the engine will declare and initialize it in 2 different steps.
2. Primitive vs Object Binding
Remember the old arcade era? Did you ever play consoles such as NES or old home computers like Atari? Whatever the case, imagine that you have a NES at home where you can play Donkey Kong. You are the owner of the console, the game belongs to you, and you set your own high score. Independently of the time it takes you to play again, your high score remains there.
However, imagine there is also an arcade place nearby home. You do know the address, but nothing there belongs to you. You visit such an amazing space, play Donkey Kong, and get the high score. Some days later, however, your name doesn’t appear anymore, as several other players beat your marks.
A primitive binding is similar to owning your own copy of Donkey Kong at home, which means that only you can set the high score. An object binding, however, is the arcade machine: you don’t own it, and you only know the address of the place. Although you can set a high score, so can others.
Now, let’s remember that JavaScript has 8 types:
▪ null
▪ undefined
▪ boolean
▪ string
▪ number
▪ bigint
▪ symbol
▪ object
All of them are primitives except for object.
| Example | Explanation |
|---|---|
| Primitive | When you assign a primitive to a variable, let myVar = 1, the value 1 is bound to the name myVar. |
| Object | When you assign an object to a variable, let myVar = { a: 1 }, the value isn’t bound to myVar. Instead, an object reference is bound to myVar. The memory address of { a: 1 }. |
▪ Example 1. When assigning or passing variables of a primitive, a copy of the value is created.
▪ Example 2. When assigning or passing variables of an object, a copy of the reference is created. If 2 variables are assigned the same object, changing the value of one will change the other:
Example:
example1.js
-----------
// Primitive binding.
var var1 = 1
var var2 = var1
var var3 = var1
var2++
console.log(var3)
// Output: 1example2.js
-----------
// Object binding.
var var1 = { a: 1 }
var var2 = var1
var var3 = var1
var2.a++
console.log(var3)
// Output: { a: 1 }Note: When comparing objects using the equality opertor, ===, the results can be unintuitive.
See Referential Equality for details.
3. Redeclaring
Do you remember our dear scopes? Taking this into account, you can redeclare a variable
declared with var statement in the same scope or inner-outer scopes, as these variables are global.
However, when it comes to the variables declared with let and const, you can’t redeclare these statements
in the same scope - but you can do so in inner scopes, as variables with let and const are block scope:
Example:
index.js
--------
// Redeclaration with var.
var pepper = "🌶️";
console.log(pepper); // 🌶️
// Inner Scope,
{
var pepper = "🥦";
console.log(pepper); // 🥦
}
console.log(pepper); // 🥦index.js
--------
// Redeclaration with let.
let eggplant = "🍆";
let eggplant = "🥔";
// Output: SyntaxErrorindex.js
--------
/*
Redeclaration in inner scopes, as let and const are
block scope and don't affect the outer scopes.
*/
const carrot = "🥕";
// Block Scope.
{
const carrot = "🍒";
console.log(carrot); // 🍒
}
console.log(carrot); // 🥕4. undefined vs undeclared
undefined is the default value of a variable or property. If we simply write let myVar and then
console.log(myVar), that’s the result we will have.
Considering this, attempting to access a variable that hasn’t been declared throws a reference error.
Although the error states myVar is not defined, a more accurate description is myVar is undeclared.
5. Documentation
Don’t hesitate to visit the following sections to get more information about types, variables, and scopes:
Also, keep in mind that The Modern JavaScript site has plenty of examples you might find useful when getting started with the fundamentals.