JavaScript Objects and Functions

Dhananjay Kumar [@debug_mode]

Delhi Chapter Lead Microsoft MVP

Mindcracker MVP Telerik Evangelist

http://debugmode.net

FB: Dhananjay.25july@gmail.com

JavaScript Objects

• There are three ways you can create JavaScript Objects

JavaScript Objects

Using Literals Using New Operator

Using Object.Create()

JavaScript Objects

Using Literals

var student = { name: "dj", grade : "z"

};

var studentName = student.name; alert(studentName);

Object literal is an expression

It creates new object each time it appears in the code

A single object literal can create many objects in loop

JavaScript Objects

Using new operator

var student = new Object();var studentArray = new Array();

new operator creates a new object

new operator initialize created object also

new operator invokes a function as give in above code snippet.

Function invoked after new operator is Constructor

JavaScript Objects

Using Object.Create()

var student = Object.create( { name: "dj", grade: 10 } );

It is a static function

It always has two parameters • Prototype• Properties

JavaScript Objects

• There are three ways you can test Properties of JavaScript Objects

JavaScript Objects Properties

in operator hasOwnProperty() method

propertyIsEnumerable() method

JavaScript Objects

in operator var student = Object.create( { name: "dj", grade: 10 } );

var studentProperty = "name" in student alert(studentProperty);

in operator returns true for own property

in operator returns false if there is no property with given name

in operator returns true for inherited property

JavaScript Objects

hasOwnProperty() method var student = { name: "dj", grade: 10 };

var studentProperty = student.hasOwnProperty("name"); alert(studentProperty);

hasOwnProperty() method returns true for own property

hasOwnProperty() method returns false if there is no property with given name

hasOwnProperty() method returns false for inherited property

JavaScript Objects

propertyIsEnumerable () method var student = { name: "dj", grade: 10 };

var studentProperty = student.hasOwnProperty("name"); alert(studentProperty);

propertyIsEnumerable () method returns true for own property which is enumerable

propertyIsEnumerable () method returns false if there is no property with given name

propertyIsEnumerable () method returns false for inherited property

JavaScript Objects

• Deleting Properties : using delete operator

Delete operator returns

true if successfully

deleted

If there is no effect on

operation

JavaScript Objects

Deleting properties var student = { name: "dj", grade: 10 };

var result = delete student.grade; alert(result); var result1 = delete student["grade"]; alert(result1);

It deletes object’s own property

It does not delete inherited property. For example you cannot delete property of student prototype or object it is inheriting from.

Associative Array

Associative Array : Java Script Array can be worked with string index var arrayofStudent = []; var student1 = []; student1["rollnumber"] = 19; student1["name"] = "John"; student1["grade"] = "A"; arrayofStudent.push(student1); console.log(arrayofStudent[0]["name"]);

Associative Array is that we can not traverse through array elements in a loop. 

JavaScript object as Associative Array var student = { name: "dj", grade: 10 };

for (i = 0; i < 10; i++) { student["marks" + i] = 100 * i; }

alert(student.marks8);

In Square bracket you provide property name as string. String is data type so can be manipulated at run time.

With dot you provide property name as identifier. Since they are not a data type so cannot be manipulated at run time.

For-in loop in JavaScript

Functions in JavaScript

var display_message = function (age) { alert("you are " + age + "year old ");

}; display_message(19);

JavaScript Functions

Named Function

Anonymous Function

Functions in JavaScript

You can store it in a variable

You can pass it as parameter of other function

You can use it in an expression

Functions in JavaScript

Pass by Value var greetingmessage = "Hey DJ";

function showmessage(greetingmessage) {

greetingmessage = "I am changing value"; }

showmessage(greetingmessage); alert(greetingmessage);

Pass By Reference

var arrayofname = ["dj"];

function showmessage(arrayofname) {

arrayofname[0] = "dhananjay"; }

showmessage(arrayofname); alert(arrayofname[0]);

Functions in JavaScript

Nested Functions mainfunction(7, 6);

function mainfunction(a, b) {

alert(a);

nestedfunction(88); function nestedfunction(c) {

alert(b); }; };

Nested function can access variable of parent function

Parent function cannot access variable of nested function

Functions in JavaScript

Namespace in JavaScript Global if defined outside

any functionLocal to function and all

nested function , if defined in function

var MyModule = {

//code for module here GetData: function () {

var student = { name: "dj", grade: 10 };

var nameisobjectofstudent = "toString" in student; alert(nameisobjectofstudent);

} };

Functions in JavaScript

Namespace in JavaScript Global if defined outside

any functionLocal to function and all

nested function , if defined in function

var MyModule = {

//code for module here GetData: function () {

var student = { name: "dj", grade: 10 };

var nameisobjectofstudent = "toString" in student; alert(nameisobjectofstudent);

} };

Functions in JavaScript

Namespace in JavaScript Global if defined outside

any functionLocal to function and all

nested function , if defined in function

var studentObject = { name: "dj", marks: 89, findgrade: function (marks) { if (marks > 75) { return "Grade A "; } else { return "Grade B "; } } }

var grade = studentObject.findgrade(99); alert(grade);

Functions in JavaScript

It takes a function as argument

It returns a function as output.

Functions in JavaScript

JavaScript function

Does not do any type checking on argument values

Does not do any checking on number of arguments passed

JavaScript function can be called

1. With exact number of arguments

2. With more number of arguments than specified

3. With less number of arguments than specified

Functions in JavaScript Less Number of Arguments

Functions in JavaScript

Less Number of Arguments

Functions in JavaScript Less Number of ArgumentsHandling undefined

Functions in JavaScript

More Number of Arguments