Post on 10-May-2015
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