Understanding JavaScript Objects

In this tutorial you will learn JavaScript Objects, objects creation, adding properties and methods to objects and accessing objects properties and methods.

In addition to being an interpreted scripting language, JavaScript is considered an object-based programming language. JavaScript is all about objects. Windows and buttons, forms and images, links and anchors are all objects. Real world examples for objects are like a book, a student, or a ball. Objects are like nouns.

Every object also has propertiesor attributes.; each property is a different piece of information about the object. A book is described as the book is with name “Java script”, with 650 pages, and price is 400/-. The object is made up of a collection of these properties or attributes. Properties are like adjectives.

Every object can have methods, which are actions that can be performed on it. The book is read, its pages can be turned forward and backward, and it can be opened or closed by the reader.Methods are like verbs.

For many methods, you also need to provide some more specific information, called an argument, between the parentheses. Some methods require numerous arguments, whereas others don’t require any. Providing one or more arguments for a method is referred to as passing arguments.

JavaScript supports several types of objects, as follows:

• 1. User-defined objects defined by the programmer.
• 2. Core or built-in objects, such as Date, String, and Number.
• 3. Browser objects, the BOM.
• 4. The Document objects, the DOM.

Properties of the window Object:

window.closed
window.document
window.history
window.length
window.location
window.name

Methods of the window Object:

alert(text)
close()
confirm()
prompt(text, defaultInput)
open(url, name, [options])

Creating Objects

An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where key is a string (also called a “property name”), and value can be anything.

An empty object (“empty cabinet”) can be created using one of two syntaxes:

Example:

let student= new Object(); // "object constructor" syntax
let student= {}; // "object literal" syntax

Literals and properties

We can immediately put some properties into {...} as “key: value” pairs:

Example:

let student= { // an object
name: "Gopal", // by key "name" store value "Gopal"
division:10,
section:"A",
age: 15,

displayName:function(){
alert(this.name);
}

};

Note:We can also use multiword property names, but then they must be quoted as “First Name”: “Rama”

Accessing Object's Properties

To access or get the value of a property, you can use the dot (.), or square bracket ([]) notation. The dot notation is easier to read and write, but it cannot always be used. If the name of the property contains spaces or special characters, you cannot use the dot notation; you'll have to use bracket notation.

Example:

 
let student = { 
name: "Gopal", 
division:10,
section:"A",
age: 15,
"year of joining":2012
};

document.write(student.name);// Prints: Gopal
document.write(book["year"]);// Prints: 2000

The square bracket notation offers much more flexibility than dot notation. It also allows you to specify property names as variables instead of just string literals.

Example:

let student = { 
name: "Gopal", 
division:10,
section:"A",
age: 15,
"year of joining":2012
};

let key =prompt("Enter any property name to get its value");
document.write (person[key]);// Outputs: Gopal (if enter "name")

Setting Object's Properties

You can set the new properties or update the existing one using the dot (.) or bracket ([]) notation.

Example:

let student = { 
name: "Gopal", 
division:10,
section:"A",
age: 15,
"year of joining":2012
};
// Setting a new property
student.country="India";
document.write(student.country);// Prints: United States

student["email"]="gopal@mail.com";
document.write(student.email);// Prints: gopal@mail.com

// Updating existing property
student.age=30;
document.write(student.age);// Prints: 30

student ["name"]="Krishna";
document.write(student.name);// Prints: Krishna

Deleting Object's Properties

You can remove properties from an objectwith the delete operator. Deleting is the only way to actually remove a property from an object. Setting the property to undefined or null only changes the value of the property. It does not remove property from the object.

Example:

let student = { 
name: "Gopal", 
division:10,
section:"A",
age: 15,
"year of joining":2012
};
// Deleting property
deletestudent.age;
document.write(student.age);// Prints: undefined

Calling Object's Methods

You can access an object's method the same way as you would access properties—using the dot notation or using the square bracket notation.

Example:

let student = { // an object
name: "Gopal", // by key "name" store value "Gopal"
division:10,
section:"A",
age: 15,

displayName:function(){
alert(this.name);
}

};

student.displayName();// Outputs: Gopal
student["displayName"]();// Outputs: Gopal