Array
University of Oregon
Browse: Home / JavaScript (ES) / Object Basics

Object Basics

User-Defined Objects

Everything in JavaScript is either one of the five primitive values (strings, numbers, Booleans, undefined, and null) or an object.

Objects are ES5’s sixth and final type. ES6 adds a seventh: Symbol.

In addition to built-in objects (arrays, strings, functions, document, Math, Date, RegExp,  …), new objects can be defined by the user.

Learning About Objects

Definitions

An object in JavaScript is a collection of properties.

A property name is a JavaScript identifier or a string literal.

Quotes around a property name are optional if the name would be a legal JavaScript name. So quotes are required around “first-name”, but are optional around first_name.

Property values can be any JavaScript value: strings, numbers, Booleans, arrays,  functions, objects and so on.

If a property’s value is a function, it is known as a method.

Object Literals

The easiest way to create an object is with an object literal (p. 163, J:ABG).

An object literal is a comma-separated list of colon-separated name:value pairs, enclosed within braces {}.

Object literals are a distinguishing feature of the JavaScript language, as they allow objects to be created quickly without the need to define a class.

Example 1

var superman = {
   name: "Superman",
   "real name": "Clark Kent",
   height: 75,
   weight: 235,
   hero: true,
   villain: false,
   allies: ["Batman","Supergirl","Superboy"],
   fly: function(){
        return "Up, up and away!";
     }
};

console.log(superman.hero);       //true
console.log(superman["hero"]);    //true -> associative array syntax

Exercise: Add a getRealName method that returns Superman's real name.

Example 2

var  lotteryNumbers = [4, 8, 15, 16, 23, 42];
var profile = { firstName: "Hugo", 
                lastName: "Reyes", 
                flight: "Oceanic 815", 
                car: "Camaro",
                "CIT Student": true; };

console.log(profile.firstName);      //"Hugo"
console.log(profile["lastname"];     //"Reyes"
console.log(profile.CIT Student);    //*** error ***
console.log(profile["CIT Student"]); //true
console.log(profile.lastName[0]);   //"R"

Note how the lotteryNumbers array lends itself well to storing the sequence of lottery numbers, while the profile object is perfect for storing the key/value pairs of a person’s (Hugo’s) profile.

Example 3

let supers = {
   superman: { realName: "Clark Kent" },
   batman: { realName: "Bruce Wayne" },
   wonderWoman: { realName: "Diana Prince" },
   flash: { realName: "Barry Allen" },
   greenLantern: { realName: "Hal Jordan" },
   martianManhunter: { realName: "John Jones" }
};

console.log(supers.wonderWoman.realName);   // "Diana Prince"
console.log(supers["batman"]["realName"]);  // "Bruce Wayne"
console.log(supers.batman["realName"]);     // "Bruce Wayne"

Objects as Associative Arrays

In computing, an associative array is a data structure that maps keys to values.

Therefore, an associative array (a.k.a. hash table, hash map, symbol table, dictionary, or db record) is a data structure composed of a collection of {key: value} pairs.

this Keyword in Object Methods

When a function is called as a method of an object, its this is set to the object the method is called on.

In the following example, when o.f() is invoked, inside the function this is bound to the o object.

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37
Skip to toolbar