as we already know
types are
that can be
represented manipulated
in a programming language

in JavaScript they can be categorized as

primitive / object

mutable immutable




Mutable types


their values can be changed

var obj = { a: 1 };

obj.a = 2;
obj.b = 3;console.log(obj); //=> Object {a: 2, b: 3}

var arr = [1, 2, 3];
arr[1] = 0;
arr[4] = 4;

console.log(arr); //=> [1, 0, 3, undefined, 4]

not compared by value

two objects are NOT equal even if 

they have the same properties and values

var obj1 = { a: 1, b: 2 }, obj2 = { a: 1, b: 2 };

console.log(obj1 === obj2); //=> false

two arrays are NOT equal even if

they have the same elements in the same order

var arr1 = [1, 2], arr2 = [1, 2];

console.log(arr1 === arr2); //=> false

comparison by reference

two object values are the same if & only if 

they refer to the same underlying object 

var obj1 = { a: 1, b: 2 }; 
var obj2 = { a: 1, b: 2 };
var obj3 = obj1; 
var obj4 = obj1; 

console.log(obj1 === obj2); //=> false 
console.log(obj3 === obj4); //=> true

var arr1 = [1, 2];
var arr2 = [1, 2];
var arr3 = arr1;
var arr4 = arr1;

console.log(arr3 === arr4); //=> true

assigning an object or array

to a variable simply assigns

the reference

it does not create a new copy

if you want to make a new copy of an
object or array
you must explicitly copy the properties of the object or
the elements of the array

in order to compare two distinct objects or arrays

their properties or elements must be compared

Immutable types


numbers / strings / booleans / null / undefined

their value can't be changed

var title = 'JavaScript - The Basics';

console.log(title.toUpperCase()); //=> JAVASCRIPT - THE BASICS
console.log(title);               //=> JavaScript - The Basics

this is obvious for numbers and booleans 

but it is not so obvious for strings

even if strings are like arrays of characters

there's no way to alter the character at any specified index

all string methods that appear to return a modified string 

are returning a new string value

primitives are
compared by value

two primitives are equal 
only if they have the same value

numbers / booleans / null / undefined
have no other way to be compared

strings are equal if they have the same length 
if the character at each index is the same
'JavaScript' === 'javascript' //=> false



computer programs work by 

manipulating values

a value is an expression which cannot be evaluated any further

var num = 1 + 2;
console.log(num); //=> 3

when a program needs to retain a value for future use

it assigns the value to a variable



defines a symbolic name for a value

and allows the value to be referred to by name

in JavaScript


 are declared with the var keyword

var title = "JavaScript - The Basics";

a var keyword can be used to declare multiple variables
var i, j = 0, k, x,
    y = 0,     z;

repeated declarations
are legal and harmless

var i = 0;
var i = 1;
var i;

console.log(i); //=> 1

omitted declarations

assigning a value to an undeclared variable 

creates that variable as a property of the global object

var i = 0;
j = 1;

console.log(i, j); //=> 0 1

delete i;          //=> false  - Declared variable cannot be deleted
delete j;          //=> true   - Undeclared variable can be deleted

console.log(i, j); //=> ReferenceError: j is not defined


forget to declare a variable without var keyword

it leads to many bugs


if an initial value is not specified 

with the var statement the variable is


until the code stores a value in it

var i;
console.log(i); //=> undefined

i = 0;
console.log(i); //=> 0




you can assign a value of any type to a variable

and later you can assign a value of a different type to the same variable

var n = 1;
console.log(n); //=> 1

n = 'string';
console.log(n); //=> string

variables scope

the scope of a variable is

the region of a program

in which it is defined

variables declared outside functions

are global variables

have global scope 

they are visible throughout the program

var scope = 'global';
console.log(scope);     //=> global

function fn() { 

  function fnc() {
    console.log(scope); //=> global
  return fnc();
}fn();                   //=> global

variables declared inside functions

are local variables


have function scope 

they are visible only inside that function

var scope = "global";

function fn() {
  var scope = "local";

  function fnc() {

  return fnc();

fn();  // => local

function parameters

are also 

local variables


are defined

only within the body of the function

function fn(param) {

fn('Javascript - The Basics');  //=> Javascript - The Basics

within the body of a function


local variable

takes precedence over a

global variable

with the same name

var scope = "global";
function fn() { 
  var scope = "local";


fn(); //=> local


variables declared within a function are visible

throughout the body of the function

they are visible even before they are declared

var scope = "global";
function fn() {

scope = "local"; console.log(scope); } fn(); //=> undefined //=> local // this is equivalent to var scope = "global"; function fn() { var scope; console.log(scope); scope = "local"; console.log(scope); }

all variable declarations in a function are

"hoisted" to the top of the function

function definitions can be  nested

so that

each function has its own local scope

function fn() { 
  var scope = "local1"; 
  function fnc() { 
    var scope = "local2"; 



fn(); //=> local2
      //=> local1 

The Scope Chain

every chunk of JavaScript code
has a scope chain associated with it


is a list or a chain of objects 

that defines the variables 
that are "in scope
for that code

when JavaScript needs to look up the value of a variable 
it starts by looking at the first object in the chain 

moves on to the next objects until it finds an object 
that has that property
function fn() {
  var x = 1;

  (function fnc() {
    var y = 2;
    (function func() {
      var z = 3;
      console.log(x + y + z);
fn(); //=> 6

if no property was found 

in the scope chain
then the variable
 is not in scope 
ReferenceError occurs
function fn() {
  var x = 1;

  (function fnc() {
    var y = 2;
    (function func() {    
      console.log(x + y + z);
fn();  //=> ReferenceError: z is not defined 

Day I: JavaScript - The Basics - Types, Values & Variables II

By Andrei Cacio

Day I: JavaScript - The Basics - Types, Values & Variables II

  • 1,272