Advanced Javascript Tutorial

Each variable have identifier (name) , data type and scope.

 

1. Variable Identifier

Variable identifier (name) can use any alpha-numeric character, underscore and dollar sign. It must start with _ , $ or alpha sign,

Never start identifier with number, for example: var 5x;

Some valid identifiers:

_name

__name

firstname

$first_name

first-name

firstName

firstName3

 

God and bad examples: 01var_identifier.js

When nameing variables, don't use reserved keywords.

 

 

2. Data Type

Loose typing or dynamic typing

Unlike other languages in Javascript one variable can hold many data types: It can be number, string, etc.

So you dont need to declare variable like string x; . Just type var x; where var can be any data type.

This concept is known as loose typing.

 

Javascript have 6 variable types:

• number: 5 , 5.23
• string: 'some text' , "some text"
• boolean: true | false
• object: [ 12, 'text' ] -Array is object data type
• object: { year:1971 , color:'blue' }
• function
• undefined

 Primitive data types are: number, string and boolean.

 

Use typeof to detect which data type variable has:

x=5;
type=typeof x;
console.log(type); //number

 

Data types example: 03var_data_types.js

If we omit var we'll get the same data types: 03var_data_types_novar.js

 

 

 

 Primitive or Object data type

When we use object method for primitive data type JS parser execute process as following:

Process of using variable as an Object
 *  1. converts primitive data type into Object
 *  2. method execute operation
 *  3. object is destroyed and variable becomes primitive again

Example of automatic conversion string into Object: 05var_string_object.js

 

So, when we want to apply some methods on primitive data type it is better to create an object.

 

var name = 'john';    //string

var name_obj = new String('john');    //object

 

var year = 1971;    //number

var year_obj = new Number(1971);    //object

 

Creating object with String() , Number() : 04var_primitiveToObject.js

 

 

Operators applied to different data types

"name" + 5   //name5

"5" + 3 + 2  //532

2 + 4 + "5"  //65

"33" - 2   //31

"20"  /  2   //10

"5"  *  4   //20

 

Converting data types

toString , parseInt, parseFloat, Number, ToBoolean

 var strValue = "1";

var numValue = 0;

var boolValue = !!strValue; // converts "1" to a true

boolValue = !!numValue; // converts 0 to false

 

 

 3. Global and local variable scope

global var - can be used inside and outside function

local var - can be used inside function only

 

Outside function every variable is global. That means we can use it outside and inside function.

var x=5; //global variable
y=8; //global variable too
    

function fja() {
    
    console.log('in function x='+x);
    console.log('in function y='+y);
}

fja();

console.log('out of function x='+x);
console.log('out of function y='+y);

Example: 10var_local_global_outside_function.js

 

 

Inside function variable defined with var is local. If var is omitted then variable becomes global.

function fja() {
    var x=5; //local variable
    y=8; //becomes global when function is called with fja()
    
    console.log('local x='+x);
    console.log('local y='+y);
}

fja();

//console.log('global x='+x); //ReferenceError: x is not defined
console.log('global y='+y);


Example: 12var_local_global_inside_function.js

 

 

More complex example is when function is called inside another function:

 

function fja() {
    var x=5; //local variable
    y=8; //global variable when function is called with fja()
    
    console.log('in fja x='+x);
    console.log('in fja y='+y);
}


function fja2() {
    fja(); //transfer y from fja into fja2

    //console.log('in fja2 x='+x); //ReferenceError
    console.log('in fja2 y='+y);
}

fja2(); //transfer y from fja2 into global scope

//console.log('global x='+x); //ReferenceError: x is not defined
console.log('in global y='+y);

 

Example: 13var_local_global_inside_function2.js

 

 Also let mention that global variable inside function must be before return statement because return breaks all further execution inside that function.

 Example with return statement: 14var_local_global_return.js

 

 

Global variable

Each variable in global scope is global variable.

In browser each gloabal variable is assigned to window object, and in NodeJS is assigned to global object.

 

In browser (client-side) javascript global variable is defined by:

•  c = 13;
• window.c = 13;

 

BROWSER

var a = 5; //global var

b = 8; //global var too

 

function() {

   c = 13;  //global var

   window.d = 21;  //global var

}

 

Example: 16var_global_browser.js

 

In NodeJS (server-side) javascript global variable is defined by:

• global.a = 13;

 

NodeJS

var a = 5; //global var

b = 8; //global var too

 

function() {

   c = 13;  //global var

   global.d = 21;  //global var

}

 

Example: 16var_global_node.js

 

 

 

 

 

5. Variable Lifetime

Global variables live as long as your application (your window / your web page) lives.

Local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.