JS Variables

Welcome to another tutorial, here you will learn how to create variables to store data in JavaScript.

Firstly, let’s understand what variables are.
 

What is Variable?

Variables are fundamental to all programming languages, same in JavaScript. They are used to store data and can be in the form of numbers, strings of text, etc. The stored data or value in the variables can be set, updated, or retrieved when needed. 

In programming, variables are symbolic names for values and can be created with the ‘var’ keyword. We have the assignment operator ‘=’, which is used to assign value to a variable. For instance; var varName = value;

Example :

var name = "Peter Parker";
var age = 21;
var isMarried = false;

HINT: Give simple and meaningful names to your variables. Also, while naming multiple words variables, it is widely advised to use camelCase. It entails that all words after the first should have an uppercase for the first letter. For example; my variable name.

From the example above, you can see that three variables were created. The first variable was assigned with a string value, the second was assigned with a number, and the last one was assigned with a boolean value. You can see that variables can hold different types of data. we'll learn more about them in subsequent chapters.

More so, in JavaScript, it is possible to declare variables without having any initial values assigned to them. This is useful for variables created to hold values such as ‘user inputs’.

Example :

// Declaring Variable
var userName;
 
// Assigning value
userName = "Clark Kent";

NOTE: If a variable has been declared in JavaScript, but is yet to be assigned a value, it will be automatically assigned the value undefined explicitly.

Declaring Multiple Variables at Once

In JavaScript, you can declare multiple variables and set their initial values in a single statement. In other to achieve that, each variable is separated by a comma. This is shown in the example below:

Example :

// Declaring multiple Variables
var name = "IronMan", age = 21, isMarried = false;
 
/* Longer declarations can be written to span
multiple lines to improve the readability */
var name = "Peter Parker",
age = 21,
isMarried = false;

The ‘let’ and ‘const’ Keywords (ES6)

The keyword, ES6 introduces two new keywords ‘let’ and ‘const’ for declaring variables.

The ‘let’ keyword works exactly like the ‘const’ keyword, excluding the fact that variables declared using the 'const' keyword cannot be reassigned later in the code. Take look at this example; 

Example :

// Declaring variables
let name = "Harry Potter";
let age = 11;
let isStudent = true;

// Declaring constant
const PI = 3.14;
console.log(PI); // 3.14

// Trying to reassign
PI = 10; // error

‘let’ and ‘const’ differ from ‘var’, which declare function-scoped variables. ‘let’ and ‘const’ declare variables, scoped at block level({}). Block scoping refers to a newly created scope between a pair of curly brackets '{}'. 

In a subsequent chapter, we'll discuss this in detail.

NOTE: The keyword ‘let’ and ‘const’ is not supported in older browsers such as IE10, but IE11 support them partially. 

Please, see the JavaScript ES6 features chapter to get more insight on how to start using ES6. 

Rules for Naming JavaScript Variables

Below are the rules for naming JavaScript.

• All variable names must start with a letter, underscore ‘_’, or dollar sign ‘$’.
• No variable name should start with a number but can take alpha-numeric characters (A-z, 0-9) and underscores.
• JavaScript keyword or a JavaScript reserved word cannot be used as a variable name.
• No variable name should contain spaces.