Javascript Objects

Zoom

Link List

• Objects in JavaScript
• Javascript Objects
• Object.create() In JavaScript
• Instantiation
• JavaScript Object Methods
• The Handbook for Beginning Programmers with Examples in JavaScript by Rex Barzee
• Objects in JavaScript
• JavaScript Function Parameters
• A Beginner's Guide to JavaScript Prototype
• Working with Objects
• Instantiation Patterns in JavaScript
• Object Oriented JavaScript Tutorial #8 - Class Inheritence
• Object.create in JavaScript
• Object.values()
• Object.getOwnPropertyNames()

What is a JavaScript Object?

A JavaScript Object is unordered data in the form of key:"value" or name:"value" pairs. They are the most complex of data types. The data can be referenced by using a reference pointer. All keys/names are strings. Values can be numbers, strings, or methods. If the keys have a space between words, they need to be enclosed in quotation marks.

Example of an Object

Object Initializer Syntax:
var obj {
    property1 : "value",
    property2 : "value",
    property3 : "value"
}

Example:
var menu {
    javascript : "javascript.html",
    objects : "javascript-objects.html",
    JSON : "json.html"
}

Object Creation Functions

• Working with objects
• JavaScript - Multiple ways to create an object

Objects can be created as a single object using an object literal or the keyword new. The third way to create an object is to use an object constructor. (See Instantiation below for the constructor method.)

Object literal method:
var person = {firstName:"John", 
    lastName:"Doe", 
    age:50, 
    eyeColor:"blue"};

Keyword new method:
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Inheritence

Object.create() and Object.prototype are used for implementing inheritence. This allows developers to reuse code. Objects can inherit prototypes, properties and methods from other objects. We then only have to create the new object and then specify the differences.

Example

The function fruits and apple are created. Apple inherits the properties of fruits because it uses the call(). A new instance of apple is created and is specified with the prototype and property of fruits.

Input: 
function fruits() {
    this.name = "fruit 1";
    }
fruits.prototype.color = "green";
    
function apple() {
    fruits.call(this);
}
    
apple.prototype = 
    Object.create(fruits.prototype);
const app = new apple();
    
document.getElementById("inherit").innerHTML 
    = " " + app.name + " is " 
    + app.color + "";

Working Example

Properties

Object properties can be defined by using the prototype and dot methods.

An object property can be referenced with bracket notation or with the dot method

Dot method: 
menu.javascript

Bracket notation: 
menu["javascript"]

Methods

A method is a function or action that is property value of an object. To access a method you call the function like you would a value. Arguments can be passed into the function. When writing a method, sometimes "this" is used to reference parts of an object instead of the key name. For instance, in the object above this.javascript is the same as menu.javascript.

objName.function(arg1, arg2, arg);
menu.function("li", "<a href=""></a>")

Working Example

This example was written with the method as the third key:"value" pair of the object. The method then referenced the other key:"value" pairs and passed in arguments to create the text shown. The actual code may be viewed on the scripts.js page.

Instantiation

To create a new object from a previous object is called instantiation. Basically, you are taking a cookie cutter (constructor) and creating multiple cutouts of the same cookie (object). One way to do this is by starting with a function for the object type.

Initial class to create object:
export class Books {
    constructor(name, author, genre) {
        this.name = name;
        this.author = author;
        this.genre = genre;
    } 
}
    
Create new instances:
var myBook = new Books(
    'Pride and Prejudice', 
    'Jane Austen', 
    'fiction');
var jacksBook = new Books(
    'Marvel Adventures', 
    'Disney', 
    'movies');
var janesBook = new Books(
    'Chemistry for Beginner's', 
    'Chris Hollis', 
    'non-fiction');

Books.prototype.section = null;
myBook.section = "adult fiction";
jacksBook.section = 'teen';
janesBook.section = "adult non-fiction"