JavaScript: Objects, Destructuring Assignment

◄Page 11►

Objects, Destructuring Assignment

JavaScript Try an Object Red Wolf Eurasian Wolf

Introduction

This page explains how to implement objects within JavaScript. Learn to create an object, assign an object, access properties and methods in an object. See the next page for prototypes and inheritance. Prototypes and inheritance often apply to objects.

Objects

Objects include properties and methods, similar to real animals, people, devices, machinery and other items we encounter in the real world. For example a wolf object could include the color property and run() method. Method run() might animate the wolf.

Object Assignment

You can assign one value to an object. Variables are also considered objects.

Multiple Values

You can assign multiple values to an object. Objects include the ability to contain many properties. Assign properties with multiple techniques. For example the following line of code assigns two properties to a wolf object. Assign multiple properties within brackets. A colon separates the name of an attribute and the value of an attribute; attribute:value. A comma separates attribute:value pairs.

Dynamic Variable Assignment

You can also assign objects with dynamic variables and values, as follows.

let wolf2 = new Object();
wolf2.name = "Arctic Wolf";
wolf2.color = "White";

Object Access

Access properties in an object with a dot. In the above example, wolf2.color equals White.

Onclick Code

The boxes onclick event handlers include onclick="showWolf('w',createWolfGray())" and onclick="showWolf('w2',createWolfArctic())">. The ID, w, identifies the aqua box and the ID, w2, identifies the blue box.

Create Gray Wolf

The following function creates an object with properties name and color for a Gray Wolf. The function applies a set of name:value pairs, within brackets, to a variable.

/**
 * Create Gray Wolf
 * with name and color
 * properties
 * @returns wolf object.
 */
function createWolfGray(){
let wolf = {name:"Wolf",color:"Gray"};
return wolf;
}

Create Arctic Wolf

The following function creates an object with properties name and color for an Arctic Wolf. The function creates a new object, then dynamically assigns properties with values, to that object.

/**
 * Create Arctic wolf
 * with name and color
 * properties.
 * @returns wolf2 object.
 */
function createWolfArctic(){
let wolf2 = new Object();
wolf2.name = "Arctic Wolf";
wolf2.color = "White";
return wolf2;
}

Object Methods

The keyword this is the current object, while operating inside a particular object. When operating outside an object, access its method with the object's variable name, then a dot.

Create a Method

Create a method within the Gray Wolf object as follows. The keyword, this, accesses the object's name and color properties, from within the wolf3 object's assignName() method.

function createWolfMethod(){
let wolf3 = {

// Object includes
// properties
// name, color:
name:"Wolf",
color:"Gray",

// Object includes
// method 'assignName':
assignName: function(sName, sColor) {
this.name = sName;
this.color = sColor;
} 
// End object
// definition with
// semi-colon:
};

return wolf3;

}

Call a Method

Within the red box, assign new a name and color with method wR.assignName('Red Wolf','Brown'). Apply the dot to access methods and properties on the wR variable, which represents a wolf.

The following JavaScript executes when you tap the red box.

onclick="
let wR = createWolfMethod(); 
wR.assignName('Red Wolf','Brown'); 
showWolf('w3',wR)"

JavaScript Defined Objects

See the section titled Data Types, page six, for a set of JavaScript defined objects. Create new JavaScript defined objects with the name of the object, such as new Symbol('sym'), new String(), new Number() or new Boolean().

Create dynamically defined objects with let obj = new Object();

JavaScript Classes

See the section titled Classes, page seventeen, for a JavaScript class tutorial. Create new JavaScript classes with new className(), where className represents the name of a user or browser defined class.

Named Objects

The next page explains how to implement, duplicate and extend named objects.

Destructuring Assignment

Under development

Summary

This page explained how to implement objects within JavaScript. You learned to create an object, assign an object, access properties and methods in an object. See the next page for prototypes and inheritance. Prototypes and inheritance often apply to objects.

See the objects.js source file for this page.

Learn JavaScript

JavaScript's the foundation of Web developer and Website design skills. This free and unique JavaScript tutorial includes some new or seldom used, but useful features.

Tags