JavaScript Objects #

General notes on objects, including properties and methods (see methods for details on specific methods).

Variables #

Objects can be assigned to variables.

Use {} for object literals.

let someVar = {};

Key-Value #

Keys without spaces or special characters can be presented without quotes.

Value can be anything, including functions.

let someKV = {
    name: "Bob",
    age: 20
};

console #

console is in fact a global JavaScript object. Correspondingly, .log() is a method of that object.

console.log()

Access #

Dot notation #

To access properties, use form <object>.<key>.

For example:

someKV.name;

Bracket notation #

Another way to access properties: bracket notation, a la [].

someKV['name'];

Bracket notation must be used if the key name is not some valid identifier name, such as if it starts with a number or special character.

Bracket notation can also be used to extract a property using a variable rather than a string.

let someKV = {
    name: "Bob",
    age: 20
};

let targetKey = 'name';

console.log(someKV[targetKey]);

Properties #

Assignment #

Use either dot or bracket notation and assignment operator = to perform an assignment.

Assignment can add something new or replace something existing.

let someKV = {
    name: "Bob",
    age: 20
};

someKV.name = 'George'; //replace
someKV.weight = '200'; //adds a new property

Delete #

Properties can be deleted with delete operator.

delete someKV.weight;

Methods #

Functions tied to objects.

Usually follows form: <thing>.<method>()

Different data types have different methods (strings have sting methods, numerics have numeric methods, etc.)

console.log('yo'.toUpperCase())

Creating #

Methods can be added to objects with key-value pairs. Key is the method name, the value is an anonymous function.

let someObj = {
    someMethod: function() {
        ...;
    }
};

With ES6 syntax, colon and function can be omitted:

let someObj = {
    someMethod () {
        ...;
    }
};

Invoke with someObj.someMethod().

Nesting #

Objects can be nested (object in an object in an object…)

let someObj = {
    firstObj: {
        propA: 1,
        propB: 'Z'
    },
    secondObj: {
        propC: 4,
        propD: 'Y'
    }
}

Operators can be chained to extract nested properties or methods:

someObj[FirstObj].propA;

this #

this is a keyword to allow accessing other properties within the same object.

const someObj = {
    some_value: 'blah',
    someMethod() {
        console.log(this.some_value);
    }
}

Without this, that wouldn’t work. this references the original object.

Note: Don’t use this with arrow functions within objects. It gets screwy.

Privacy #

_ before object property usually indicates that the property should not be changed.

Factory Functions #

Sometimes, we want to create many instances of an object. Enter factory functions.

Can take parameters.

Something like, using arrows:

const peopleFactory = (name, age, motto) => {
    return {
        name: name,
        age: age,
        somethingSaid() {
            console.log(motto);
        }
    }
};

// invoke like so
const bob = peopleFactory('Bob', 20, "yippee kai yay");
bob.somethingSaid(); // "yippee kai yay"

Note the return bit.