Introduction to variables

In this tutorial, you will learn about a few fundamental concepts in JavaScript: variables and data type. These are for beginners. They are some of the important concepts that beginners must understand before delving into JavaScript.

Key takeaways

• The variable is like a container for storing data. These data can be retrieved and modified

• The variable values can be text (string), number (10, 10.5), Boolean (true or false), and many more.

• In JavaScript, variables should be declared before use.

• Variables can be declared with three keywords. These keywords are like containers for holding this data. These are the following keywords:var (the oldest keyword), let and const (for constant).

• Variable names are called identifiers.

• JavaScript is case-sensitive. username,USERNAME, or Username will be treated differently.

• In JavaScript, Variable names can be strings of letters (lower-case and upper-case), digits, dollar signs ($), and underscore characters (_). However, variable names can not start with a digit.

• There are lists of reserved words that you can't use as variable names. Some.

• In JavaScript, punctuation, spelling, and capitalization are important. Check your spelling properly. Don't mix a double quote with a single quote. Don't substitute a comma for a period, nor should you substitute a colon for a semicolon. _

Introduction

Programming is about giving computers instructions to perform specific tasks. To instruct computers to perform these tasks, we use programming languages. These languages act as a bridge between humans and computers.
JavaScript is one of the programming languages that humans use to communicate with computers by giving instructions to computers to perform specific tasks. JavaScript is often referred to as the language and backbone of the modern web. It is used for creating interactive websites, and client-side and server-side scripts.

Variables and data types are some of the basic concepts that are important to know for beginners in JavaScript.

Understanding Variables in JavaScript

Variables are like containers for storing data. The data stored in these containers can be changed or modified. You can think of a variable as a box for holding data or values. Variables are declared and initialized. For example:

let userName = "Las";

Variable Keywords

There are three keywords in javascript. They are the following:

• var

• let

• const

var and let

Also, with varand let, you declare a variable and initialize it with a value later and then initialize it with the value without error. For example :

let userName;

then later, you can initialize the var or let keyword with a value:

userName = "John";

Once you have declared and initialized with both var and let (this is not possible with const keyword), you can change the value. Note: That is not possible with const. For const, you must declare and initialize together.

However, var is only used for supporting old browsers. It was the only variable keyword when JavaScript began in the 1990s. Since 2015 when const was introduced, there has been minimal usefulness for var. Therefore, it is better to use let or const.

Const(constant)

Const is used when you know that the value of the variable will not be changed. However, with the const keyword, you must declare and initialize. Note: The conventional method for const (not mandatory) for a specific number (like color code:#004567) or string (like temp-c) to be named with all uppercase letters and underscores. This allows you to easily recall them.

Most times, constants(const) are preferable to variables (var and let) because in most cases, you won't need to change the value of your data. Also, this will minimize your bugs because you already know that constant values will not change, unlike variables. However, if perhaps you need to change the value, you can easily change the const to let.

Note: If you know that the value will be constantly changing, it is best to use let: let. You cannot change the value of a const after initialization, unlike variable keywords like var and let.
Note: In all, both const and let will be needed when writing your codes. Therefore, do not be carried away by one.

Variable Declaration
You should declare a variable before use. For example:

let userName;

You can declare multiple variables with the same keywords. For example:

let userName; userAge;

Variable Initialization
After you have declared a variable, the next thing is to initialize it with a value. This means assigning a value to the variable you have names. Declaration and Initialization can be done together as :

 let userAge = 18;

or separately

let userAge; //variable is declared
userAge = 10; //variable is initialized

Also, you can declare and initialize multiple with the same variable:

//Both userName and userAge is declared and initialized on the same line
let userName = "John"; userAge = 10;
//userName is declared and initialized
//userAge is declared and initialized

Variable data types: Primitive Data Types and Object

In JavaScript, literal values can either be primitive values or object values. However, only primitive values will be discussed here. There are various primitive data type values, but only five will be discussed here. These primitive data types are:

1. String

2. Number

3. Boolean

4. Undefined

5. Null

String
A String is a data text. It is a string of characters. It is a string literal because it distinguishes itself with quotation marks. It is represented by Unicode text. Read more on Unicode. You can use single quotes('') or double quotes ("") for literal values.

Note: Despite the flexibility to choose either single quotes or double quotes, most JavaScript developers use double quotes. However, if you writing a few lines of JavaScript codes inside HTML, you can use single quotes ('') for a string to distinguish it from HTML attributes. HTML comes with double quotes (").

Number as string

Also, if you put a number in quotation marks, it is no longer a number, it is a string. Numbers do not have quotations as earlier explained. Therefore,

const a = 20; const b = "22";
//the output will 2022 (not 42)

Escaping in String

Backlash () is used for escaping in string. E.g., if you need to have either double quotes or single quotes in your string along with string value:

let  = "John cannot be \"trusted\" ";

The backlash () will allow you to insert quotation marks inside strings.

The backlash has various use cases in JavaScript. For more uses of the backlash, read more

Number
in JavaScript, you can store numbers in variables. Just like strings, you don't have to specify the data type, JavaScript has an in-built program to know the data type.

The number data type represents integer and floating-point numbers.

For example:

let x = 10;

Quotation marks are not needed. The numbers can be a whole number (for example: 23) or a decimal number (e.g., 10.44. This is called a floating number).

Boolean
In JavaScript, Boolean is one of the data types with two possible values: true or false. For example:

let isRaining = "true";

let heating = false;

Note: It is important to know that the Boolean data value is not a string. Therefore, do not put either single quotes or double quotes. E.g., this is wrong:

let isRaining = "true"; 
//this is wrong

Null and Undefined

Null and undefined are two special data values in JavaScript primitive's values. Either of the two has one possible value:

• Null (null)

• undefined (undefined)

Null
The null data type is a primitive data type with one possible value. In JavaScript, the null data type value is available to the developer for values of variables that are not known yet. It means that value doesn't exist yet.

let userName = null; 
//note that the null is without quotation marks

Undefined
Undefined is a primitive data type with one possible value. For undefined, it simply means that you declared a variable but it has not been given a value yet. In such a situation, by default the value of the declared variable is undefined. This is reserved for JavaScript. As mentioned above, you can declare a variable with var and let without initializing it with a literal value. For example:

let userName; 
console.log(userName)// the output will be "undefined"

The userName is the variable that is declared but not initialized with a value. Therefore, the value is undefined by default. If you check the value of the data type, it will output undefined. For example:

let userName; 
console.log(typeof userName)// undefined

However, in JavaScript, the null data type is equal to (==) undefined data type. For example:

console.log(undefined == null); // true
//it returns true as output

Resources to learn more about variables:

W3Schools:

MDN web doc: