Skip to main content

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.