chris bailey

Storing Complex Data In Javascript Objects

The Object constructor creates an object wrapper for the given value. If the value is null or undefined, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.

When called in a non-constructor context, Object behaves identically to new Object().

- mdn

Objects are a different way to store information. They’re like arrays, but the content is accessed via key rather than index number. Objects are better used when storing things like information for a specific person; here’s an example of both with the same info:

// array
var person1 = ['chris', 33, 'Detroit'];

// object
var person2 = {
	name: 'Chris',
	age: 33,
	city: 'Detroit'
};

Both contain the same information; the object has a verbose syntax that allows us to assign things based on a key. There are two ways to retrieve the data; bracket notation which is similar to arrays person2["name"]. We use the key value rather than index number and dot notation person2.name, which is shorter and more straightforward. A couple of caveats with dot notation are the key can not start with a number or contain spaces, and you can not use a variable for looking up a key in dot notation. Both will return the exact value of “Chris.”

We also can easily create a new empty object with the new Object(); method.

Updating Data

This is the same concept as changing a value in an array. It can be done through either bracket or dot notation.

var person = {
	name: 'Chris',
	age: '33',
	city: 'Detroit'
};

// bracket notation
person['age'] += 1; // adds 1 to age making it 34

// dot notation
person.city = 'Grand Rapids'; // changes city from "Detroit" to "Grand Rapids"

person; // {name: "Chris", age: 34, city: "Grand Rapids"}

Data

Arrays can hold many types of data. Strings, numbers, arrays, objects, and so on can all be stored inside.

var person = {
	name: 'Chris',
	age: 33,
	city: 'Detroit',
	friends: ['Toni', 'Kevin'],
	pet: {
		name: 'Addy',
		breed: 'Goldendoodle',
		age: 9
	}
};

Nested Arrays and Objects

Both can be stored with each other, objects in arrays or in objects. This is useful for many applications be it having an array of store blog posts that are objects or an object having an array of tags for the blog post.

var posts = [{
        title: "Dogs are the best",
        author: "Chris",
        tags = ["animals", "dogs"]
    },
    {
        title: "Cats are the worst",
        author: "Chris",
        tags = ["animals", "cats"]
    },
];

posts[0].title; // "Dogs are the best"
posts[0].tags[1]; // "dogs"

Adding Methods to Objects

We can add functions to keys in an object; when doing this, they are referred to as methods. Not many changes from what we do with stand-alone functions; we need to call the object’s name before, like so: obj.add(1 + 2) . An example would be console.log(), where the console is an object and log is a method (function).

var doMaths = {
	add: function (x, y) {
		return x + y;
	},
	subtract: function (x, y) {
		return x - y;
	}
};

doMaths.add(1, 2); // 3
doMaths.subtract(2, 1); // 1