JAVASCRIPT

THE BASICS


Types

Values

Variables


II

Types


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


in JavaScript they can be categorized as

primitive / object

mutable / immutable

types

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 

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


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 

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

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";

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


NEVER

forget to declare a variable without var keyword

it leads to many bugs

initialization


if an initial value is not specified 

with the var statement the variable is


undefined

until the code stores a value in it

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

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

variables

are

untyped


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() { 
  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 are not visible outside of the block

in which they are declared



JavaScript doesn't have it

but it has

function scope

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() {
    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

local variable

takes precedence over a

global variable

with the same name


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

  console.log(scope);
}

fn(); //=> local


hoisting

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

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"; 
    
    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 

&
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);
    })();
  })();
}
prints?
fn(); //=> 6

if no property was found 

in the scope chain
then the variable
 is not in scope 
&
a 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


Made with Slides.com