Javascript Objects Flashcards
JavaScript Objects
You have already learned that JavaScript variables are containers for data values.
This code assigns a simple value (Fiat) to a variable named car: var car = "Fiat"; // Create and display a variable: Fiat
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car: var car = {type:"Fiat", model:"500", color:"white"};
// Create an object:
// Display "The car type is Fiat":
The values are written as name:value pairs (name and value separated by a colon).
JavaScript objects are containers for named values called properties or methods.
script>
// Create and display a variable:
var car = "Fiat";
document.getElementById("demo").innerHTML = car;
displays:
JavaScript Variables
Fiat
script>
// Create an object:
var car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
/script>
displays:
JavaScript Objects
The car type is Fiat
Object Definition
You define (and create) a JavaScript object with an object literal:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// Create an object:
// Display "John is 50 years old.":
Spaces and line breaks are not important. An object definition can span multiple lines:
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Create an object: // Display "John is 50 years old.":
script>
// Create an object:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// Display some data from the object:
document. getElementById(“demo”).innerHTML =
person. firstName + “ is “ + person.age + “ years old.”;
script>
// Create an object:
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Display some data from the object:
document.getElementById(“demo”).innerHTML =
person.firstName + “ is “ + person.age + “ years old.”;
/script>
Object Properties
The name:values pairs in JavaScript objects are called properties:
Property Property Value firstName John lastName Doe age 50 eye Color blue
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
or
objectName[“propertyName”]
Ex: person.lastName; // Create an object: // Display "John Doe":
Ex: person["lastName"]; //Create an object: // Display "John Doe":
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
or
script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
Object Methods
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
Property Property Value
firstName John
lastName Doe
age 50
eye Color blue
fullName function() {return this.firstName + " " +
this.lastName;}
A method is a function stored as a property.
Show Object person with these property: values and the method for fullName:
var person = {
firstName: "John",
lastName : "Doe",
age: 50,
eye color: Blue,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};Object Methods
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
Property Property Value
firstName John
lastName Doe
age 50
eye Color blue
fullName function() {return this.firstName + " " +
this.lastName;}
A method is a function stored as a property.
Show Object person with these property: values and the method for fullName:
The this Keyword
In a function definition, this refers to the “owner” of the function.
In the example above, this is the person object that “owns” the fullName function.
In other words, this.firstName means the firstName property of this object.
var person = {
firstName: "John",
lastName : "Doe",
age: 50,
eye color: Blue,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};Accessing Object Methods
You access an object method with the following syntax:
objectName.methodName()
Ex: name = person.fullName();
// Create an object: // Display "John Doe" with this...:
The this Keyword
In a function definition, this refers to the “owner” of the function.
In the example above, this is the person object that “owns” the fullName function.
In other words, this.firstName means the firstName property of this object.
If you access a method without the () parentheses, it will return the function definition: name = person.fullName;
// Create an object:
// Display "function() { return this.firstName + " " + this.lastName; }"
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
and
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
Do Not Declare Strings, Numbers, and Booleans as Objects!
When a JavaScript variable is declared with the keyword “new”, the variable is created as an object:
// Declares x as a String object // Declares y as a Number object // Declares z as a Boolean object
var x = new String(); // Declares x as a String object var y = new Number(); // Declares y as a Number object var z = new Boolean(); // Declares z as a Boolean object
Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.
