Mutable & IMMUTABLE

Types

Mutable types

objects

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 

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

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

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

primitives

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 

primitives are
compared by value

'JavaScript' === 'javascript' //=> false

Values

Values

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

Variables

a 

variable

defines a symbolic name for a value

and allows the value to be referred to by name

in JavaScript

variables

 are declared with the var keyword

var title = "JavaScript - The Basics";

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

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

initialization

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

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

variables

are

untyped

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

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

function fn() { 
  console.log(scope);

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

some programming languages have block scope
which means that code within curly braces
has its own scope

variables declared inside functions

are local variables

var scope = "global";

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

  function fnc() {
    console.log(scope);
  }

  return fnc();
}

fn();  // => local

function parameters

are also 

local variables

& 

are defined

only within the body of the function

function fn(param) {
  console.log(param);
}

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

within the body of a function

a

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

  console.log(scope);
}

fn(); //=> local

hoisting

var scope = "global";
function fn() {
  console.log(scope);

  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);
}

function definitions can be  nested

so that

each function has its own local scope

function fn() { 
  var scope = "local1"; 
  
  function fnc() { 
    var scope = "local2"; 
    
    console.log(scope); 
  } 

  fnc(); 
  console.log(scope); 
}

prints?

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

The Scope Chain

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

which 

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 

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 

function fn() {
  var x = 1;

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