JAVASCRIPT
THE BASICS
Types
Values
Variables
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 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
numbers / booleans / null / undefined
strings are equal if they have the same length
'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
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
JavaScript - The Basics - Types, Values & Variables II
By Raul Matei
JavaScript - The Basics - Types, Values & Variables II
- 1,610