JavaScript: Objects

Class-Free

Objects in JavaScript are class-free, meaning that they are not created via a static class (template) as they are in object-oriented programming languages such as C# or Java. Instead, JS objects are created through a prototypal system (a topic for another post). There is a base prototype object in JavaScript from which all other objects are created.

Literal Notation

Because of this prototypal system, all custom objects are created inline in a given script. Custom JS objects are primarily created through what is called a literal notation, they are ‘literally’ written out line-by-line in the script and are ‘literally’ built in memory as the script executes line-by-line.

Mutable Key/Value Collections

Objects in JavaScript are mutable, meaning they can be altered over time as a script executes and it is used, passed around, and manipulated by the script. They are also keyed collections, meaning JS objects are pretty much dictionaries with keys indicating named properties and their associated values. Due to this, JS object properties can be accessed in two ways, the traditional ‘Dot’ notation as seen in object-oriented programming languages such as C# and Java or through array like notation utilizing index operators (square brackets).

Pass-By-Reference

JS Objects are always passed by reference, meaning as an object is passed from function to function or throughout a script it is only its reference in memory that is being passed around not the actual object. This also means that the object is also not being copied or duplicated in any way as it is being passed around.

'use strict';

// JavaScript Objects
//  1. Mutable: they can be altered at will
//  2. Keyed Collections: keys point to values, other objects, or functions
//  3. Class-free: they are never predefined, no template
//  4. Keys are strings
//  5. Quotes around key strings are optional if the string is not a JS key word and is a proper JS identifier
//  6. Objects can be embedded
//  7. Objects are always passed by reference (never copied)

var emptyObject = {};

var person = {
    first_name: "Tim",       // Quotes optional since the property name string is a valid JS Identifier
    "last-name": "Clark",    // Quotes required since property name string is invalid
    address: {
        street: "143 South Main",
        city: "Salt Lake City",
        state: "Utah",
        zip: "84111"
    }
};

// Retrieval of Object Properties
var firstName = person.first_name;  // . notation can be used due to valid JS Identifier
var lastName = person["last-name"]; // [] bracket notation required due to invalid JS Identifier

// Undefined: retrieving non-existent properties results in the Undefined value
var middleName = person.middle_name; // middleName === undefined [property does not exist]

// TypeError Exception: when retrieving a non-existent property from a non-existent property
var account = person.account;        // Undefined
var balance = person.account.balance; // TypeError
// Avoid error and get back just undefined
var account = person.account && person.account.balance; // Undefined

// Property Updates by assignment
person.first_name = "Freddy";

// Augmentation based on Non-existent Property Assignment
var middle_initial = person.middle_initial; // Undefined
person.middle_initial = "Argyle";
middle_initial = person.middle_initial; // "Argyle"

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#, ASP.net, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s