An introduction to javascript

 Javascript has the following data types –
• Numbers
• Strings
• Booleans
• Objects
 Functions
 Arrays
 Date
 RegExp
 Math
• Null
• Undefined
• Error

 Numbers in Javascript are all floats. There is no integer type in here.
According to the spec., they are all double-precision 64-bit format
IEEE 754 values. So you might have to be a little careful with
arithmetic. Watch out for stuffs like these –
• 0.1 + 0.2 = 0.30000000000000004
 For advanced mathematical operations you can use the built-in Math
object –
• var value = Math.sin(3.5); // gets the sine of 3.5
• var d = Math.PI * r * r;

 You can convert an integer to string by using the parseInt() function
–
 var i = parseInt(“124”, 10); // i now contains 124
This function takes the base of the conversion as an optional
second argument which you should always provide. Otherwise
something like this might happen –
 var value = parseInt(“010”); // value now contains 8!
Similarly, you can use parseFloat() to convert strings to float,
which always uses base 10.

 A special value called NaN (Not a number) is returned if the
argument string to parseInt() is non-numeric –
• var value = parseInt(“hello”, 10); // value now contains NaN
// Question – what will be the type of value ?
 NaN is toxic – if you provide it as an input to any mathematical
operation the result will also be NaN –
 var value = NaN + 5; // value is now NaN
You can check for NaN by using the built-in isNaN() function –
isNaN(value); // will return true if value is NaN

 You can check for NaN by using the built-in isNaN() function –
 isNaN(value); // will return true if value is NaN
 Javascript also has some special values denoting Infinity and –
Infinity –
 var infinity = 1 / 0; // infinity now contains Infinity
 var negativeInfinity = -1 / 0;// as described above

 Strings in Javascript are sequence of Unicode characters, where
each character is represented by a 16-bit number. This is a very
good news to anyone who has to deal with internationalization.
 They have some useful properties and methods for manipulation like
length, charAt(), replace(), toUpperCase(), toLowerCase() etc.
 Javascript doesn’t have any Character data-type. So if you want to
represent a single character, you need to use a string of length 1.

 Javascript distinguishes between null, which is a special type of
object that indicates a deliberate non-value, and undefined, which is
an object of type undefined that indicates an uninitialized value.
 Javascript has a boolean type, with possible values of true and false.
Any value can be converted to a boolean according to the following
rules –
 false, 0, the empty string, NaN, null, and undefined all become false
 all other values become true.
Javascript will apply these rules whenever it expects a boolean, but
you can coerce these type conversion by using the Boolean()
function.

 In Javascript, you can declare a variable using the var keyword. If a
variable remains uninitialized, then its type is undefined.
 An important difference from other languages like Java is that in
Javascript, you don’t get block-level scope, only functions have
scope. So if a variable is defined using var inside an if block, it will
be visible to the entire function.
 In Javascript, there is no strong type-checking like Java. You can
declare a variable to hold an integer and then you can assign a
string to that same variable (much like PHP…argh….) –
 var value = 5; value = “Hello”; // No error

 Operators in Javascript behave the same way as Java, except the
plus (+) operator which has some extra features/usage.
 Like Java, you can use it to concatenate two different strings. You
can also use it to convert a string to a number –
 var value = + “123”; // value contains 123, as Number
// What could be the difference with parse functions?
 If you add a string to a number, everything is converted into a string
first –
 var value = “3” + 4 + 5; // value now contains the string “345”;
 var test = 3 + 4 + “5”; // test now contains “75”

 Comparisons in Javascript can be made using >, <, >=, <=, ==, ===,
!= and !== operators. These works for both strings and numbers.
 The == operator performs type coercion if you give it two different
types –
 “dog” == “dog” // true
 1 == true // true!
 If you add a string to a number, everything is converted into a string
first –
 var value = “3” + 4 + 5; // value now contains the string “345”;
 var test = 3 + 4 + “5”; // test now contains “75”

 If either operand is a number or a boolean, the operands are
converted to number if possible.
 Else if either operand is a string, the other operand is converted to a
string if possible.
 If both operands are objects, then Javascript compares internal
references which are equal when operands refer to the same object
in memory.
 For the detailed Abstract Equality Comparison Algorithm, you can
check out section 11.9.3 of ECMAScript Language Specification.

 Given the above definition –
 String comparison can be forced by – ( “” + a == “” + b )
 Numeric comparison can be forced by – ( +a == +b )
 Boolean comparison can be forced by – ( !a == !b )
 Some interesting comparisons –
 null == null.……………………………............// true
 undefined == undefined..…………………….// true
 NaN == NaN…………………………………….// false
 null == undefined……………………..............// true
 new String(“a”) == “a”………………………..// true
 new String(“a”) == new String(“a”).............// false

 Javascript has for, while, do-while loops just like Java. It also has if-
else, switch statements and ternary operator. Switch statements can
compare string values. You can also use an expression in the case
statement.
 The && and || operators use short-circuit logic, which means whether
they will execute their second operand depends on the first. This is
useful for checking for null objects before accessing their attributes –
 var property = Object && Object.getProperty(); // && will return Object if it’s null
Or for setting their default values –
 var name = otherName || “default”;

 Arrays in Javascript are special kinds of objects. The old way of creating an array
is as follows -
 var a = new Array(); a[0] = “dog”; a[1] = “cat”; a[2] = “hen”;
 console.log(a.length); // outputs 3
Or you can use array literal syntax –
 var a = [“dog”, “cat”, “hen”]; // more convenient
 length property returns the highest index plus 1. So the following will output 101
–
 a[100] = “lion”; console.log(a.length);
 You can iterate over an array using this length property, or you can use for….in
construct –
 for(var i in a) console.log( a[i] );

 If you query a non-existent array index, you get undefined –
 console.log(a[90]) // outputs undefined
 Arrays come with a number of useful functions –
 a.push(element1, element2, ….) – pushes one or more item at the end of the array
 a.pop() – removes the last element from the array and returns it
 a.reverse() – reverses the order of the elements in the array (in-place)
and much more useful functions.

 Javascript objects are simply collections of name-value pairs. As
such, they are similar to HashMaps in Java. If a variable is not a
primitive (undefined, null, boolean, number or string), its an object.
 The name part is a string, while the value can be any Javascript
value – including more objects.
 There are two basic ways to create an empty object –
 var obj = new Object();
 var obj = {}; // sets the objects prototype to Object.prototype
 var obj = Object.create(null); // sets null as object prototype
The second is called object literal syntax. It’s also the core of
JSON format and should be preferred at all times.

 Object literal syntax can be used to initialize an object in its entirety –
 var obj = {
name: “Carrot”,
“for” : “Max”,
detail: { color: “Orange”, size: 12 }
};
 Attribute access can be chained together –
 console.log(obj.detail.color);

 Just like Java, an object’s properties can be accessed using the dot
operator -
 Obj.name = “Issa Vai the Guru”;
And using the array-like index –
 Obj[“name”] = “Anwar the Boss”;
Both of these methods are semantically equivalent. The second method has the
advantage that the name of the property is provided as a string, which means it
can be calculated at run-time, though using this method prevents some Javascript
engine and minifier optimizations being applied. It can also be used to set and get
properties with names that are reserved words.

var person = Object.create(null);
Object.defineProperty(person, 'firstName',
{
value: "Yehuda", writable: true, enumerable: true,
configurable: true
});
Object.defineProperty(person, 'lastName',
{
value: "Katz", writable: true, enumerable: true,
configurable: true
})

var config = {
writable: true, enumerable: true,
configurable: true
};
var defineProperty = function(obj, name, value)
{
config.value = value;
Object.defineProperty(obj, name, config) ;
}
var person = Object.create(null);
defineProperty(person, 'firstName', "Yehuda");
defineProperty(person, 'lastName', "Katz");
// or, you can use simple assignements

 Along with the objects, functions are the core components in
understanding Javascript. We can also treat functions as
objects.The most basic function is as follows –
 function add(x, y)
{
var total = x+y;
return total;
}
 If the function doesn’t have any return statement, or uses an empty
return with no value, then undefined is returned.
 You can call the above function with no parameter as well. In such
case, they will be set to undefined.

 You can also pass in more arguments than the function is expecting
–
 console.log( add(2, 3, 4) ); // outputs 5
 Functions have access to an additional variable inside their body
called arguments, which is an array-like objects holding all of the
values passed to that function. Let’s write a function which takes as
many arguments values as we want –
 function avg(){
var sum = 0; for (var i=0; i<arguments.length; i++) sum += arguments[i];
return sum / arguments.length;
}

 What if we want to calculate the average value of an array? We can
re-use the above function for arrays in the following way –
 console.log( avg.apply(null, [2, 3, 4, 5]) ); // outputs 3.5
// has a sister function called call
 In Javascript, you can create anonymous functions –
 var avg = function() { // the rest of the body……… }
This is extremely powerful as it lets you put a function definition
anywhere that you would normally put an expression.

 Like any other languages, you can write recursive functions in
Javascript. However, this creates a problem if the function is
anonymous. How would you call a function without its name? The
solution is using named anonymous functions -
 var ninja = {
yell: function cry(n)
{
return n > 0 ? cry(n-1) + "a" : "hiy";
}
};
console.log( ninja.yell(5) ); // outputs hiyaaaaa

 Javascript doesn’t have classes, so its object-oriented approach
doesn’t match that of other popular OOP languages like Java, C#
etc. Instead, it supports a variation of Object-oriented programming
known as Prototype-based Programming.
 In prototype-based programming, classes are not present, and
behavior reuse (equivalent to inheritance in Java) is accomplished
through a process of decorating existing objects which serves as
prototypes. This model is also known as class-less, prototype-
oriented or instance-based programming.
 Just like Java, every object in Javascript is an instance of the object
Object and therefore inherits all its properties and methods.

 As we have discussed earlier, there is no class statement in
Javascript like C++ and Java. Instead, Javascript uses functions as
classes. Let’s consider a Person object with first and last name
fields. There are two ways in which the name might be displayed : as
“first last” or as “last, first”. Using the functions and objects, here is
one way of doing it –
 function makePerson(first, last)
{
return { first: first, last: last };
}
 function personFullName(person)
{
return person.first + “ “ + person.last;
}

 function personFullNameReversed(person)
{
return person.last + “, “ + person.first;
}
s = makePerson(“Arif Vai”, “the Handsome Guy”);
console.log(personFullName(s)); // Arif Vai the Handsome Guy
console.log(personFullNameReversed(s)); // the Handsome Guy, Arif Vai
 This works, but it’s pretty ugly. You end up with dozens of functions
in your global namespace. What we really need is a way to attach a
function to an object. Since functions are treated as objects, this is
pretty easy.

 function makePerson(first, last){
return {
first : first,
last : last,
fullName : function() {
return this.first + “ “ + this.last;
},
fullNameReversed : function() {
return this.last + “, “ + this.first;
}
}
}
s = makePerson(“Arif Vai”, “the Handsome Guy”);
console.log( s.fullName() ); console.log( s.fullNameReversed() );

 When used inside a function, this refers to the current object. What
that actually means is specified by the way in which you called that
function.
 If you called it using the dot notation or bracket notation on an
object, that object becomes this. If any of these notations wasn’t
used for the call, then this refers to the global object (the window
object). For example -
 s = makePerson("Simon", "Willison")
var fullName = s.fullName;
console.log( fullName() ); // will output undefined undefined

 We can take advantage of this keyword to improve our function in
the following way –
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ‘ ‘ + this.last;
}
this.fullNameReversed = function() {
return this.last + ‘, ‘ + this.first;
}
}
var s = new Person(“Kowser Vai", “the Ice-cream Guy");

 new is strongly related to this. What it does is it creates a brand new
empty object, and then calls the function specified, with this set to that
new object. Functions that are designed to be called by new are called
constructor functions.
 When the code new Person(…) is executed, the following things happen
–
 A new object is created, inheriting from Person.prototype.
 The constructor function Person is called with the specified arguments
and this bound to the newly created object. new Person is equivalent
to new Person (), i.e. if no argument list is specified, Person is called without
arguments.
 The object returned by the constructor function becomes the result of the
whole new expression. If the constructor function doesn't explicitly return an object,
the object created in step 1 is used instead. (Normally constructors don't return a
value, but they can choose to do so if they want to override the normal object
creation process.)

 Every time we are creating a person object, we are creating two new
brand new function objects within it. Wouldn’t it be better if this code was
shared? There are two ways in which code can be shared. The first way
is the following –
function personFullName() {
return this.first + ' ' + this.last;
}
function personFullNameReversed() {
return this.last + ', ' + this.first;
}
this.first = first;
this.last = last;
this.fullName = personFullName;
this.fullNameReversed = personFullNameReversed;
}

 The second way is to use the prototype –
this.first = first;
this.last = last;
}
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
return this.last + ', ' + this.first;
}

 Person.prototype is an object shared by all instances of Person. It
forms a part of a lookup chain (or, prototype chain) : any time you
attempt to access a property of Person that isn’t set, Javascript will
check Person.prototype to see if that property exists there instead.
As a result, anything assigned to Person.prototype becomes
available to all instances of that constructor via the this object. The
root of the prototype chain is Object.prototype.
 This is an incredibly powerful tool. Javascript lets you modify
something’s prototype at anytime in your program, which means you
can add extra methods to existing objects at runtime.

var s = “Issa";
String.prototype.reversed = function()
{
var r = "";
for (var i = this.length - 1; i >= 0; i--)
{
r += this[i];
}
return r;
}
s.reversed(); // will output assi
“This can now be reversed".reversed() // outputs desrever eb won nac sihT

// define the Person Class
function Person() {}
Person.prototype.walk = function(){
alert ('I am walking!');
};
Person.prototype.sayHello = function(){
alert ('hello');
};
// define the Student class
function Student() {
// Call the parent constructor
Person.call(this);
}

// inherit Person
Student.prototype = new Person();
// correct the constructor pointer because it points to Person
Student.prototype.constructor = Student;
// replace the sayHello method
Student.prototype.sayHello = function(){
alert('hi, I am a student');
}
// add sayGoodBye method
Student.prototype.sayGoodBye = function(){
alert('goodBye');
}

var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();
// check inheritance
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true

 A prototype is an object from which other objects inherit properties.
Any object can be a prototype.
 Every object has a prototype by default. Since prototype are
themselves objects, every prototype has a prototype too (There is
only one exception, the defualt Object prototype at the top of every
prototype chain).
 If you try to look up a key on an object and it is not found, JavaScript
will look for it in the prototype. It will follow the prototype chain until it
sees a null value. In that case, it returns undefined.

var man = Object.create(null);
defineProperty(man, 'sex', "male");
var yehuda = Object.create(man);
defineProperty(yehuda, 'firstName', "Yehuda");
defineProperty(yehuda, 'lastName', "Katz");
yehuda.sex // "male"
yehuda.firstName // "Yehuda"
yehuda.lastName // "Katz"
Object.getPrototypeOf(yehuda) // returns the man object

 JavaScript function declarations are allowed inside other functions –
function betterExampleNeeded()
{
var a = 1;
function oneMoreThanA()
{
return a + 1;
}
return oneMoreThanA();
}

 This provides a great deal of utility in writing more maintainable
code. If a function relies on one or two other functions that are not
useful to any other part of your code, you can nest those utility
functions inside the function that will be called from elsewhere. This
keeps the number of functions that are in the global scope down,
which is always a good thing.
 This is also a great counter to the lure of global variables. When
writing complex code it is often tempting to use global variables to
share values between multiple functions — which leads to code that
is hard to maintain. Nested functions can share variables in their
parent, so you can use that mechanism to couple functions together
when it makes sense without polluting your global namespace —
'local globals' if you like. This technique should be used with caution,
but it's a useful ability to have.

 Using inner functions we can use one of the most powerful abstractions
Javascript has to offer – closure. A quick quiz, what does this do –
function makeAdder(a)
{
return function(b)
{
return a + b;
}
}
x = makeAdder(5);
y = makeAdder(20);
console.log( x(6) ); // ?
console.log( y(7) ); // ?

 Here, the outer function (makeAdder) has returned, and hence
common sense would seem to dictate that its local variable no
longer exist. But they do still exist, otherwise the adder function
would be unable to work.
 In actuality, whenever Javascript executes a function, a scope object
is created to hold the local variables created within that function. It is
initialized with any variables passed in as function parameters.
 This is similar to the global object that all global variables and
functions live in, but with a couple of important differences: firstly, a
brand new scope object is created every time a function starts
executing, and secondly, unlike the global object these scope
objects cannot be directly accessed from your code.

 So when makeAdder is called, a scope object is created with one
property: a, which is the argument passed to the function. It then returns
a newly created function.
 Normally JavaScript's garbage collector would clean up the scope object
created for makeAdder at this point, but the returned function maintains
a reference back to that scope object. As a result, the scope object will
not be garbage collected until there are no more references to the
function object that makeAdder returned.
 Scope objects form a chain called the scope chain, similar to the
prototype chain used by JavaScript's object system. A closure is the
combination of a function and the scope object in which it was created.
Closures let you save state — as such, they can often be used in place
of objects.

 What should every Javascript developer know
 Hidden features of Javascript
 Namespacing your Javascript
 Best resources to learn Javascript
 ECMAScript OOP Implementation
 Understanding Javascript prototype 1
 Understanding Javascript prototype 2

An introduction to javascript

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to An introduction to javascript (20)

More from MD Sayem Ahmed (6)

Recently uploaded (20)

An introduction to javascript