📖 Intro to JavaScript Objects
JavaScript is object-oriented, meaning it deals with existing objects within the Web browser such as windows, forms, form fields, images, buttons, etc. Objects in JavaScript are important to understand. Almost anything in JavaScript can be an object. Objects in JavaScript have properties. Accessing object properties is a critical skill in JavaScript.
Types of Objects
JavaScript objects include dates, arrays, regular expressions, functions and a few others. These objects have properties that can describe the object's characteristics. While the string "Bill Brown" is a primitive because "Bill Brown" is always "Bill Brown", if we assign that value to a variable, the variable is mutable because the variable is an object and can be changes or redefined. I can declare a variable 'myFriend' and assign it the value of 'Bill Brown' using var myFriend = "Bill Brown"; Now the object myFriend has properties like length that can be accessed by accessing the property values. It can also be changed by re-declaring the variable with a new value IE: myFriend = "Joe Smith";
While JavaScript variables are objects that contain a single value, an object is a collection of multiple named values. These values are stored as name: value pairs. Just like the name of a variable contains an assigned value, you can have a group of name: value pairs in an object.
Objects can have primitives, other objects and functions as properties. These functions are called methods. Methods are just actions that can be performed on the object.
There are three main ways to create objects in JavaScript. You can use an object literal which is a list of name: value pairs enclosed in curly braces. You can use the new keyword or you can us an object constructor. We'll use the first two methods extensively in this class.
/* Object Literal Method */
var friend = {name: "Bill Brown", email: "bbrown@gmail.com"};
/* Using the 'new' Keyword */
var friend = new Object();
friend.name = "Bill Brown";
friend.email = "bbrown@gmail.com";Parts of an Object
- name
- While you can address objects using generic arrays (i.e. form[1]), it is best to give them a name.
- properties
- Data items that we know about the object such as a name, a color, a size, etc.
The properties of an object depend upon the type of object.
An object property is addressed in JavaScript using dot syntax which places a period or dot between the object and properties, i.e. window.status, image.src, etc. - methods
- Things an object can do. For example a window can be opened, closed or resized; a form can be submitted; text can be selected . . .
Object methods are also addressed using the dot syntax, but methods are always followed by parentheses, i.e.document.write();window.open();etc.
Properties
Object property values can be accessed using the objectName.propertyName syntax. You can also use the 'bracket method' with objectName['propertyName'] syntax. With the bracket method, you can substitute an expression for the propertyName as long as the expression evaluates to the propertyName. This is an advantage if you are trying to programmatically get different property values from an object.
You can add new properties to objects by assigning values to new property names. objectName.porpertyName = "value"; is the syntax used. You can also delete properties using the delete keyword.
/* Create 'friend' Object with 'name' and 'email' Properties */
var friend = {name: "Bill Brown", email: "bbrown@gmail.com"};
/* Create New 'age' Property */
friend.age = 28;
/* Delete 'email' Property from 'friend' Object*/
delete friend.email;Methods
JavaScript methods are properties with functions. In addition to the name: "value" pairs we've seen so far, objects can include names functions as methods in the object. These functions can perform actions on the object. They can be custom to the object or be used from the built in JavaScript function library.
Functions in JavaScript can use a special keyword called this. The this keyword refers to the 'owner' of the object and therefor is used to refer to the object calling the method. It can be very useful in writing functions that use this shortcut. Here's an example of using the this keyword to access the object properties to write (display) them to the screen.
/* Create Object */
var friend = {
name: "Bill Brown",
email: "bbrown@gmail.com",
message: function(){
return "<p>You can email " + this.name + " at " + this.email + "!</p>";
}
};
/* Write to the screen */
document.write(friend.message());
/* Output to Screen */
You can email Bill Brown at bbrown@gmail.com!The example above uses the + sign to concatenate (connect/combine) the string text to the object value (using the this keyword). To access an object method, including built-in methods, just append the object name with the method name (friend.message). You can learn more about JavaScript objects at w3 Schools.