In javascript Creation phase and Execution phase

In javascript Creation phase and Execution phase. First phase is Creation phase.

In that phase create memory space for every variable and function that you write in your code.
So when the execution phase will run it can find it in memory.

And when the execution phase run it compile line by line and execute the code.Execution phase run single threaded Synchronous manner that means always execute single line at a time in order.

What is the difference between == and === operator

Firstly

 "==" 

this equality check operator try to Coercion the two value

like

 3 == '3' 

in this case == operator try convert ‘3’ in number thats why

 3 == '3'  return true;

another example

 1 < 2 < 3 

what might you think the result will be ? result is true.
On the other hand

 3 < 2 < 1 

resutl also true. You may be confuse ……..
let see what is going here…

firstly example 1

 "1 < 2 < 3" 

this

 < 

comparison operator Associativity is left-to-right so this

'<'

comparison operator Associativity is left-to-right so

 1 < 2 

execute first and result true

then

 true < 3;

here true is going to convert number and converted result is 1

then

 1 < 3 

result is true.

But on the other hand

 '===' 

Strict Equality operator dont compare in this fashoine.

It just compare the value without convert or Coercion.

Like

 3 == '3' return true;

but

 3 === '3' return false;

So main difference between

 "==" 

and

 "==="

this

 "==" 

convert the value

and this

 "===" 

dont convert the value

Code to interface not in implementation

This principle is really about dependency relationships which have to be carefully managed in a large app. – Erich Gamma

The interface represents “what” the class can do but not “how” it will do it, which is the actual implementation.

When you program to interface not implementation your code become more decouple and easy to maintenance.

For example….

 
class Mysql
{
    protected $db = null;

    public function connect($dsn, $user = '', $pass = '')
    { 
        $this->db = new PDO($dsn, $user, $pass);
    }

    public function query($query)
    {
        return $this->db->query($query);
    }
}

Here Mysql fully depend on PDO class. MySql tightly couple with PDO and it is hard to test with unit testing. Now use this class to interact with other class

 
class Book {

    private $database = null;

    public function __construct() {
        $this->database = new Mysql();
        $this->database->connect('mysql:host=localhost;dbname=oop', 'root', '');
    }

    public function getAll()
    {
       $books = $this->database->query('SELECT * FROM books ORDER BY id DESC');
       print_r($books);
    }
}

$user = new Book();
$user->getAll();

This books class also have some porblem

  • Book class fully dependent with Mysql class and it is hard to unit test.
  • If you need another model or class you have to write this mysql connection code again which is against the law DRY(dont repeat your self).
  • If you need another database or change database credential then you have to modify all class which is difficult to maintenance.
  • There is no need to know about database connection and query related work by Book class which is against (SOLID) single responsibility principle.
    So what is the solution

Solution is dependency injection or inversion which is SOLID D. Find out the dependency of the class and inject those dependency through method.

 
class Book {

    private $database = null;

    public function __construct(Mysql $database) {
        $this->database = $database;
    }

    public function getAll()
    {
        $books = $this->database->query('SELECT * FROM books ORDER BY id DESC');
        print_r($books);
    }
}



$database = new Mysql();
$database->connect('mysql:host=localhost;dbname=oop', 'root', '');
$user = new User($database);
$user->getUsers();

After refactor the class now we can easily inject the database connection and book class does not worry about the database connection related work so it is fully single responsible. And easily test this class. But there is a problem and it is Book class only work with MySql Class.Solve this problem we can use Dependency inversion principle

 
interface DB
{
    public function connect($dsn, $user = '', $pass = '');
    public function query($query);
}

class Mysql implement DB	
{
    protected $db = null;

    public function connect($dsn, $user = '', $pass = '')
    { 
        $this->db = new PDO($dsn, $user, $pass);
    }

    public function query($query)
    {
        return $this->db->query($query);
    }
}

we can also write others database connection class which also implement DB interface.

 

class Sqlite implements DB
{
    protected $db = null;

    public function connect($dsn, $user = '', $pass = '')
    {
        $this->db = new PDO($dsn);
    }

    public function query($query)
    {
        return $this->db->query($query);
    }
}

Here come our main focus that is code to interface not to implementation

 


class Book
{

    private $database = null;

    public function __construct(DB $database)
    {
        $this->database = $database;
    }

    public function getAll()
    {
        $books = $this->database->query('SELECT * FROM books ORDER BY id DESC');
        print_r($books);
    }
}


$database = new Mysql();
$database->connect('mysql:host=localhost;dbname=oop', 'root', '');
$book = new Book($database);
$book->getAll();

Now we can easily inject any database connection and query related class which implement DB interface.

Immutability in Javascript…..

The string type (primitive type) value is immutable that means you cannot change

its value without reassign. No string method can change its value its only create another one. In example

 
var stringLiteral = 'I am string literal and I am immutable';

//Firstly using method
console.log(stringLiteral.slice(5,11));
//it will print string"

console.log(stringLiteral);
//"I am string literal and 
//I am immutable its value remain unchange

//and secondly we can not add method in string literal

stringLiteral.prop = "I am new method";

console.log(stringLiteral.prop); // ->; undefined

But the String object, which is created by using the new String() constructor, is mutable, because it is an object and you can add new properties to it

 
var stringObject = new String('I am string literal and I am mutable');

// on the others side 
// we can add a new property in string object

stringObject.newProp = "Within string object i am a new property ";

console.log(stringObject.newProp);
// Within string object i am a new property

var newStringObject = stringObject;

stringObject.newProp = "I am mutable";

console.log(newStringObject.newProp); 
// I am mutable

Hoisted concept in javascript

Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting. Variables in JavaScript are in a sense “hoisted” or lifted to the top of the function or statement. However, variables that are hoisted will return a value of undefined. So even if you declare and initialize after you use or refer to this variable, it will still return undefined.

 
/**
 * Example 1
 */

console.log(x === undefined); // true

var x = 3;

/**
 * Example 2
 */

// will return a value of undefined

var myvar = "my value";
 
(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

One Important things to remember is Only function declaration gets hoisted to the top and not the function expression.

 

/* Function declaration */ 

HoistedFun(); // "I am hoisted" 

function HoistedFun() {
    console.log("I am hoisted");
} /* Function expression */ 

FunctionExp(); // TypeError:FunctionExp is not a 

function var FunctionExp = function() {
 console.log("Hoisetd");
};

Block scope, Function Scope, Lexical Scoping in Javascript

Function Scope means that any variable which is defined within a function is visible within that entire function not out side of the function.

 function funScope () {
  var iAmLocalScope = "I am Local";
  console.log("Function local scope: " + iAmLocalScope);
}

funScope();

console.log(iAmLocalScope);
// -> "ReferenceError: iAmLocalScope is not defined

Block Scope, a variable scope is limited by the block where it is declared in. A block is usually means between {} curly braces or loop variables for(;;){}.It is not possible to create a block scope in javascript. And here the example

var i = 1; // <--- In here first i is define and initialize to 1

for (var i = 0; i < 10; i++) {
   // <-- Here also define the same variable i with block for loop{}
}

console.log(i); // <-- 10

 //if block scope exist then i value
//should print here 1 instead of 10.

But This behavior changes, when using the let declaration introduced in ECMAScript 2015.

 

var i = 1; // <--- In here first i is define and initialize to 1

for (let i = 0; i < 10; i++) {}
// <- using by let local scope create within block scope

console.log(i); // <-- Thats why i value is 1 instead of 10

Lexical Scoping(Static Scoping or Closure) : If a child function define and call within a parent function scope then child function can access all the local variable within the parent function scope even if the parent function has returned

var adder = function (loc) { 

  return function (summand) {
    loc += summand;
    console.log(loc);

  };
}; 
// <- we call the annonymous function      
//    and assign the returned function to adder 

var inner = adder(1); // -> Now local variabe loc == 1

inner(5); //-> Now local variabe loc == 6
inner(4); //->Now local variabe loc == 1

Javascript Data types

According to ECMAScript standard Javascript has seven data types. Six data types that are primitives and one is non primitive

This are the primitive datatype

  1. Boolean. true and false.
  2. null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.
  3. undefined. A top-level property whose value is undefined.
  4. Number. 42 or 3.14159.
  5. String. “Howdy”
  6. Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.

And non primitive is Object

The undefined value behaves as false when used in a Boolean context but in numeric context it behave like NaN

var myVal;

console.log(typeof myVal);//"undefined"
// In boolean context

if(!myVal) console.log("I am undefined");//"I am undefined"

// In numeric context

console.log(myVal * 4);//NaN

what is statement and expression in javascript ?

Expression and Statement are very important component in javascript language.
Expression : Expression always create  value and can be set wherever a value is expected like function arguments or value assigning  in a variable.

val
2+val
fun("3","2")

Statement : In javascript statement perform action. Loop and if statement are example  of statement. Javascript wherever expect statement you can put expression but you can not put statement  where expression expect .

This is statement

 if(true){}

This is expression(function as expression)

function(){return true;}

So you can put expression in where statement is require

if(function(){return true;}){}

But you can not put statement in where expression is require

function(if(true){}){};

In next article i will describe why this two things are very important.