Syntax Data Types

JS: Variables | JavaScript

JavaScript Variables

JavaScript variables hold the information in a program. JavaScript variables hold data or information Dynamically and Loosely manner.

var v = 150; console.log(v + ' is ' + typeof v) v = "PiTribe"; console.log(v + ' is ' + typeof v) 150 is number PiTribe is string

typeof v returns the data-type of the variable i.e. what type of information v is holding, we will discus this later. In the example above, first v is Number data type and value 150. Later holds a string of alphabets PiTribe.

Anything within single or double quotes i.e. '' or "", is string e.g. 0 is number but "0" and '0' are strings.

JavaScript identifier

Variable is given a unique name, that is known as identifier

JavaScript variable declaration

Declaring a variable in JavaScript means to aware the JavaScript interpreter to allocate space in memory (RAM) to hold the information.

var v;

var tells JavaScript that an identifier (variable name) v to be used for holding value.

An identifier or variable declared is set to undefined value until assigned some value to the variable/identifier.

JavaScript variable initialization

Initializing a variable in JavaScript means to store a first value in a declared variable.

v = 10; console.log(v); 10

Despite declaration only, intizations creates the variable (declaration) as well as assigns a value. In the code above, identifier v declared and assigned value 10 in one statement.

JavaScript variable stores the value in the memory (RAM) and remember the address of the space allocated in the memory. When we need that information (i.e. variable value), JavaScript gives back the stored information from thae memory address. This memory allocation is handled by JavaScript and we don't need to worry about this. We just declare a variable, initialize with a value and use whenever requried. This is the common concept of variables in each programming language.

JavaScript variable assignment

Assigning a variable in JavaScript means to store a value in a variable.

v = 2020;

Here: v is the identifier (variable), = is the assignment operator and 2020 is the value assigned to v.

JavaScript variables are case-sensitive

JavaScript variable name

JavaScript variable name, technically known as identifier, must follow the rules:

  • Must not be a JavaScript keyword
  • May consist of upper case alphabet(s) (A-Z), lower case alphabet(s) (a-z), underscore (_), a dollar ($) sign and/or number(s) (0-9).
  • Must start with an upper case alphabet (A-Z), lower case alphabet (a-z), underscore (_) or a dollar ($) sign.
  • Must be unique within the scope. Learn about scope in chapter

JavaScript multiple variables declaration

JavaScript allows declaring multiple variables seperated by comma ,. var, let or const to be given only once at start. This is for shorten the code:

var pi = 3.14, x = 50, y = 100, z = 150, s = 'PiTribe';

Multiple declaration syntax

var identifier [[ = value ][, identifier[ = value][...]]]

in the syntax within [] are the optional supplies i.e. giving value at the tiime of declaration is optional but identifier is must with var. Similarly more than one identifier are optional.

Following also valid

var x = 50, y, z, pi = 3.14, s1, s2 = 'PiTribe', s3;

var

var keyword is the oldest keyword to declare variables. Variables declared with var can be re-assigned.

Multiple declaration of identifier with var

var allows to re-assign an identifier but no effect to the variable or its value.

var pi = 3.14; console.log(pi); var pi; console.log(pi) 3.14 3.14

var scope

var scope is its function. var identifier is valid within the function where it was declared.

var x = 50; function test(){ if(true){ var y = 100; } console.log('y: ', y); //valid } console.log('y: ', y); //error: outside the its function

If var is declared outside function i.e. at file level, the scope will be global.

let

let is similar to var but disallow mutliple declaration and the scope is limited to the block where declared. let is new in ECMAScript 2015 (ES6).

let Multiple declaration error

let multiple declaration of same identifier is not allowed:

let t1 = 3.14; console.log(t1); let t1; //error Uncaught SyntaxError: Identifier 't1' has already been declared

let scope

let scope is its block. let identifier is valid within the block where it was declared.

function test(){ if(true){ let t2 = 100; } console.log('t2: ' + t2); //error: outside the its block {} } test(); Uncaught ReferenceError: t2 is not defined
If you are writing JavaScript for a web-page client-side then prefer var over let just for the sake of backward compatibility as the visitor may have old version of JavaScript. On the contrary, prefer let over var for server-side JavaScript to minimize the bugs and confusion particularly hoisting. At server-side this doesn't matter what browser and version of the JavaScript the visitor have.

const

JavaScript const works similar to let but const declares constant identifier whose value can not be changed later. const is new in ECMAScript 2015 (ES6).

const mandatory initialization

const c1; //error Uncaught SyntaxError: Missing initializer in const declaration

const Re-assignment

const doesn't allow to reassign value. You can not even re-assign same value:

const c2 = 1; c2 = 1; //error Uncaught TypeError: Assignment to constant variable.

Multiple declaration of identifier with const

const does not allow multiple declaration of an identifier:

const c3 = 3; const c3; //error Uncaught SyntaxError: Identifier 'c3' has already been declared

const scope

const scope is its block. const identifier is valid within the block where it was declared.

function test(){ if(true){ const c4 = 100; } console.log('c4: ', c4); //error: outside the its block } test(); Uncaught ReferenceError: c4 is not defined

JavaScript enforce variable declaration

JavaScript interpreter may enforce a programmer to must declare a variable before asign or use. Add the following directive at the top of the file (or functions, functions will be discussed seperately). You may read about "use strict" in seperate chapter.

"use strict"

var and let difference

var and let has two differences:

  • let does not allow to redeclare a variable
  • var is function scoped,let is block scoped

let and const difference

let and const has the only two differences:

  • const must be initialized when redeclared whereas let can be assigned later
  • const can not be reassigned whereas let can be

Variables in JavaScript

  1. JavaScript variables are case-sensitive
  2. JavaScript variables must not start with a number
  3. JavaScript identifier is the unique name of the variable in the scope
  4. JavaScript identifier consists of alphabets, numbers, _ and $ only
  5. Prefer let over var for server-side JavaScript
  6. Prefer var over let for client-side JavaScript
Syntax Data Types