Objects

 

Chapter: 31

Introducing Objects

JavaScript Objects

JavaScript variables are containers for data values. Objects are variables too, but they can contain many values.

Think of an object as a list of values that are written as name:value pairs, with the names and the values separated by colons.
Example:

var person = {
name: "John", age: 31,
favColor: "green", height: 183
};

JS

These values are called properties.

JavaScript objects are containers for named values.

JavaScript Objects

In reference to an object, color, height, weight and name are all examples of:

nouns

properties

variables

methods

Object Properties

You can access object properties in two ways.

objectName.propertyName
//or
objectName['propertyName']

JS

This example demonstrates how to access the age of our person object.

var person = {
name: "John", age: 31,
favColor: "green", height: 183
};
var x = person.age;
var y = person['age'];

JS

JavaScript's built-in length property is used to count the number of characters in a property or string.

var course = {name: "JS", lessons: 41};
document.write(course.name.length);

JS

Objects are one of the core concepts in JavaScript

Object Properties

What built-in property is used to count the number of characters in an object's property?

write

length

size

width

Object Methods

An object method is a property that contains a function definition.

Use the following syntax to access an object method.

objectName.methodName()

JS

As you already know, document.write() outputs data. The write() function is actually a method of the document object.

document.write("This is some text");

JS

Methods are functions that are stored as object properties.

Chapter: 32

Creating Your Own Objects

The Object Constructor

In the previous lesson, we created an object using the object literal (or initializer) syntax.

var person = {
name: "John", age: 42, favColor: "green"
};

JS

This allows you to create only a single object.
Sometimes, we need to set an "object type" that can be used to create a number of objects of a single type.
The standard way to create an "object type" is to use an object constructor function.

function person(name, age, color) {
this.name = name;
this.age = age;
this.favColor = color;
}

JS

The above function (person) is an object constructor, which takes parameters and assigns them to the object properties.

The this keyword refers to the current object.
Note that this is not a variable. It is a keyword, and its value cannot be changed.

The Object Constructor

Fill in the blanks to create a constructor function:

function movie(title, director) {

this.title =

;

this.director =

;

}

Creating Objects

Once you have an object constructor, you can use the new keyword to create new objects of the same type.

var p1 = new person("John", 42, "green");
var p2 = new person("Amy", 21, "red");

document.write(p1.age); // Outputs 42
document.write(p2.name); // Outputs "Amy"

JS

p1 and p2 are now objects of the person type. Their properties are assigned to the corresponding values.

Creating Objects

What keyword is used for creating an instance of an object?

make

var

new

inst

Creating Objects

Consider the following example.

function person (name, age) {
this.name = name;
this.age = age;
}
var John = new person("John", 25);
var James = new person("James", 21);

JS

Access the object's properties by using the dot syntax, as you did before.

Understanding the creation of objects is essential.

Chapter: 33

Object Initialisation

Object Initialization

Use the object literal or initializer syntax to create single objects.

var John = {name: "John", age: 25};
var James = {name: "James", age: 21};

JS

Objects consist of properties, which are used to describe an object. Values of object properties can either contain primitive data types or other objects.

Using Object Initializers

Spaces and line breaks are not important. An object definition can span multiple lines.

var John = {
name: "John",
age: 25
};
var James = {
name: "James",
age: 21
};

JS

No matter how the object is created, the syntax for accessing the properties and methods does not change.

document.write(John.age);

JS

Don't forget about the second accessing syntax: John['age'].

Chapter: 34

Adding Methods

Methods

Methods are functions that are stored as object properties.

Use the following syntax to create an object method:

methodName = function() { code lines }

JS

Access an object method using the following syntax:

objectName.methodName()

JS

A method is a function, belonging to an object. It can be referenced using the this keyword.
The this keyword is used as a reference to the current object, meaning that you can access the objects properties and methods using it.

Defining methods is done inside the constructor function.

For Example:

function person(name, age) {
this.name = name;
this.age = age;
this.changeName = function (name) {
this.name = name;
}
}

var p = new person("David", 21);
p.changeName("John");
//Now p.name equals to "John"

JS

In the example above, we have defined a method named changeName for our person, which is a function, that takes a parameter name and assigns it to the name property of the object.
this.name refers to the name property of the object.

The changeName method changes the object's name property to its argument.

Methods

The "this" keyword in the method means:

The current object

The name of the web page

The name of the given method

Methods

You can also define the function outside of the constructor function and associate it with the object.

function person(name, age) {
this.name= name;
this.age = age;
this.yearOfBirth = bornYear;
}
function bornYear() {
return 2016 - this.age;
}

JS

As you can see, we have assigned the object's yearOfBirth property to the bornYear function.
The this keyword is used to access the age property of the object, which is going to call the method.

Note that it's not necessary to write the function's parentheses when assigning it to an object.

Methods

Please associate the "testData" constructor function below with a method called "mymethod":

function testData (first, second) {

this.first = first;

this.second = second;

this.checkData =

;

}

Methods

Call the method as usual.

function person(name, age) {
this.name= name;
this.age = age;
this.yearOfBirth = bornYear;
}
function bornYear() {
return 2016 - this.age;
}

var p = new person("A", 22);
document.write(p.yearOfBirth());

JS

Call the method by the property name you specified in the constructor function, rather than the function name.

Methods

In order to use the object's properties within a function, use:

The "this" keyword

The "var" keyword

The function's name

Just the name of the property

Practice:

Adding Methods

A store manager needs a program to set discounts for products.
The program should take the product ID, price and discount as input and output the discounted price. However, the changePrice method, which should calculate the discount, is incomplete. Fix it!

Sample Input
LD1493
1700
15

Sample Output
LD1493 price: 1700
LD1493 new price: 1445

Notes: Comment down your answer. 

The first input is the product ID, the second is the price before discounting, and the third is discount percentage.
So after discounting the new price will be 1700-(0.15*1700) = 1445.

Chapter: 35

Module 5 Quiz

An object's properties are similar to variables; methods are similar to:

properties

operators

conditionals

functions

What is the result of the following expression? var myString = "abcdef"; document.write(myString.length);

Complete the expression to create an object constructor, taking into account that "height" and "weight" are properties and "calculate" is a method for the given object:

function mathCalc (height, weight) {

this.height =

;

this.weight =

;

this.sampleCalc =

;

}

Code Project:

Contact Manager

Contact Manager

You are working on a Contact Manager app.
You have created the contact object constructor, which has two arguments, name and number.
You need to add a print() method to the object, which will output the contact data to the console in the following format: name: number
The given code declares two objects and calls their print() methods. Complete the code by defining the print() method for the objects.

Note: Solve the project and comment down your answer.  

Notice the space after the colon, when outputting the contact data.