Category: App Services

Reference types represent objects in JavaScript. They are the closet things to classes. Reference values are instances of reference types.

An object is an unordered list of properties consisting of a name (always a string) and a value. When the value of a property is function, it is called a method.

It helps to think of JavaScript objects as nothing more than hash tables;

—–object——-

|name|value|

|name|value|

Objects can be created using the new operator with a constructor. A constructor is simply a function uses new to create an object. By convention, constructors in JavaScript begin with a capital letter to distinguish them from non-constructor functions. For example;

var object = new Object();

Reference types don’t store the object directly into the variable. It holds a pointer to the location in memory where the object exists. This is the primary difference between objects and primitive values. When you assign one variable to another, each variable gets a copy of the pointer and both reference the same object in memory.

var object = new Object();
var object1 = object;

—-Variable Object—-                                   Memory

|object|——|————->                Pointer1

|object1|—-|————–>                Pointer1

JavaScript is a garbage-collected language, so we don’t need to worry about memory allocations when using reference types. However, the best practice is to deference objects that are no longer required so that garbage collector can free up that memory. The best way to do so;

var object1 = new Object();
//do something
object1 = null;		//dereference

You can add or remove properties from objects; for example;

var object = new Object();
var object1 = object;
object.customProperty = “Awesome!”;
console.log(object1.customProperty);	//returns “Awesome”

The property that’s added to object variable is accessible on object1. The reason, same pointer.

Object type is one of a handful built-in reference types that JavaScript provides. The other builtin types are;

Array =  An ordered list of numerically indexed values

Date = A date and time

Error = A runtime error

Function = A function

Object = A generic object

RegExp = A regular expression

Each of these built-in reference types can be instantiated using new;

var items = new Array()
var now = new Date()
var error = new Error("something bad happend")
var func = new Function("console.log('hi');")
var object = new Object();
var re = new RegExp("\\d+");

Several built-in reference types have literal forms. A literal is a syntax that allow us to define a reference value without explicitly creating an object, using the new keyword.

Object literal

To create an object, we define the properties of new object inside braces. For example;

var book = {
name: "My favorite book",
year: 2014
};

Another format for creating the object if there are spaces in properties;

var book = {
"name": "My favorite book",
"publish year": 2014
};

When using object literal, the JavaScript engine implicitly creates a new Object(). This is true for all reference literals.

Array literal

Array literal can be defined in a similar way;

var colors = ["red","green","blue"]
console.log(colors[0])

This code is equivalent to the following;

var colors = new Array("red","green","blue")
console.log(colors[0])

Function literal

The best approach is to define functions using their literal form. Creating functions is much easier and less error prone using this literal form;

function reflect(value) {
return value;
}

We can create same function using function constructor;

var reflect = new Function("value", "return value;");

Using function constructor is typically discouraged given the challenges of maintaining, reading and debugging a string of code rather than actual code. There is no good way to debug these functions because these are not recognized by JavaScript debuggers. They are like a black box in your application.

Regular Expression literals

Regular expression literal form is;

var numbers = /\d+ /g;

Constructor equivalent is;

var numbers = new RegExp(“\\d+”, “g”);

When using RegExp constructor, patterns are passed as string. Any back-slashes need to be escaped. That’s why \d is used in literal and \\d is used in the constructor above.

Regular expression literals are preferred over the constructor form except when regular expression is being constructed dynamically from one or more strings.

Functions as an exception, there is no right or wrong way to instantiate built-in types.

Property Access

Properties are name/value pairs that are stored on an object. Properties can be accessed by dot notation or bracket notation with a string;

with dot notation;

var array = [];
array.push(12345);

with bracket notation the name of the method is enclosed in square brackets;

var array = [];
array["push"](12345)

This syntax is useful when we want to dynamically decide which property to access. For example, bracket notation allows us to use a variable instead of the string literal to specify the property to access;

var array = [];
var method = "push";
array[method](12345)

bracket notation allows you to use special characters in the property names. dot notation is easier to read and can be seen more frequently in applications.

How to identify reference types

The easiest reference type to identify is function type. Typeof operator on a function should return its type “function”.

function reflect(value) {
return value;
}
console.log(typeof reflect);		//returns “function”

On all other reference types, typeof operator returns “object”. This is not helpful. To solve this, there is another JavaScript operator, instanceof. This operator takes an object and a constructor as parameters. When the value is an instance of the type that constructor specifies, instanceof return true; otherwise, returns false.

var items = [];
var object = {}
function reflect(value) {
return value;
}
console.log(items instanceof Array);		//true
console.log(object instanceof Object);		//true
console.log(reflect instanceof Function);		//true

Every object is actually an instance of an Object because every reference type inherits from Object. The instanceof operator can identify inherited types.

console.log(items instanceof Array);		//true
console.log(items instanceof Object);		//true
console.log(object instanceof Object);		//true
console.log(object instanceof Array);		//false
console.log(reflect instanceof Function);		//true
console.log(reflect instanceof Object);		//true

How to Identify Arrays (Special Case)

Instanceof operator can identify arrays. There is an exception though. JavaScript values are passed back and forth between frames in the same web page. Each web page has its own global context i.e. its own version of Object, Array and all other built-in types. As a result, when we pass an array from one frame to another, instanceof doesn’t work because the array is actually an instance of Array from a different frame.

ECMAScript 5 introduced Array.isArray() that solves this problem.It identifies the value as an instance of Array regardless of the value’s origin.

var items = [];
console.log(Array.isArray(items));	//returns true

The Array.isArray() method is supported in most browser and in Node.js. This method doesn’t support IE 8 and earlier.

There are five primitive types; Number, String, Boolean, null and undefined. Their values are stored directly in the variable for a given context. We can use typeof operator to identify primitive types with exception of null, which must be compared directly against the special value null.

color1 = "red"
color2 = color1
color2 = "green"
Inspect type of variables;
typeof(color1)		//string
typeof(color2)		//string
typeof(10)		//number
typeof(true)		//Boolean
typeof(undefined)	//undefined

This is tricky value type.

typeof(null)		//object

This has been acknowledge by TC39 as an error, the committee that design and maintain JavaScript.

The best way to determine if a value is null is to compare it against null directly;

value = null
value === null	//true
value = false	//false
value === null
“10” == 10	//true
“10” === 10	//false

When you use the double equals, the string “10” and the number 10 are considered equal because the double equals converts the string into a number before it makes the comparison. The triple equals operator doesn’t consider these values equal because they are two different types.

console.log(undefined == null)		//true
console.log(undefined === null)		//false

Null is a data type that has a single value null. When you’re trying to identify null, use triple equals so that you can correctly identify the type.

Strings, numbers and Booleans primitive types have methods. The null and undefined types have no methods. Strings, in particular have numerous methods.

var name = "Shahzad Khan"
var lowerName = name.toLowerCase()	//convert to lowercase
var firstLetter = name.charAt(0)		////get first character
var middleOfName = name.substring(2,5)	//get character 2-4
s.length		//return number of characters
var count  =10
var fixedCount = count.toFixed(2)	//convert to “10.0”
var hexCount = count.toString(16)	//convert to “a”
var flag = true;
var stringFlag = flag.toString()		//convert to “true”

Primitive values are not objects though they have methods.

“Not a number” is used in cases where an arithmetic operation produces a result that is not a number.

a = 9/undefined		//display NaN
typeof a			//display number

Equality operator (>, <, ==, !=, >=, <=) return Boolean as their result.

var f = 10
var t = 20
f != t		//return true

The undefined data type is returned when we access a property on an object that does not exists or use it before it is declared or before it is assigned a value;

typeof(z)		//variable is not declared

There are some values in these types which evaluates to true and some evalues to false;

false, 0 (zero), “” (empty string), null, undefined, NaN (technically NaN is not true/false. It can only be detected with isNaN function)

To test this;

0 == false

All other values represent true values.

When evaluating the value of variables in conditional statement we do this;

var a = null
if (a == undefined || a == null)
{ a = 1;
}

It is possible to simple write

var a = null
if (!a) {
a = 10
}

Likewise, if a variable has a value, we can write something like;

If (a){
console.log(a)
}

This shortcut is useful and extensively used in JavaScript code.

JavaScript is a dynamically typed language. In a statically typed language, the compiler can perform type checking, if a variable is defined to store an integer. JavaScript variables derive their types based on the values they are assigned at run-time. Variables can change their type if they are assigned a new value.

As a result, it is not possible to perform static type checking in JavaScript.

Consider this example;

function add(v1, v2) { 
return v1 + v2 
}

If we invoke this function as;

add(1,1)		//return 2

This is expected result. We can also invoke this function as;

add("1",1)		//return 11

This is unexpected because JavaScript has performed string concatenation between number and the string. This is one of the reasons why the typeof operator is so important. It allows the function to be rewritten as;

function add(v1, v2) {
    if (typeof v1 === "number" && typeof v2 === "number") {
    return v1 + v2;
} else {
    throw "both argumens must be number";
    }
}

Now try to pass arguments;

add(“1”,1)		//return “both arguments must be number

On a side note, using the “+” operator on different data types produces a variety of random results;

{} + []		//return 0
[] + {}		//return object
Even using the “+” operator on the same data types produce meaningless results;
[] + [] 		//return empty string
{} + {}		//return object array