In Javascript, an Object is a key-value data structure used to store data in pairs, where a unique key is associated with a specific value.

Keys are usually strings, and presented between quotes.

Values can be simple primitives such as strings, numbers, and Booleans, but also more complex structures like other objects or array.

An object is enclosed in curly brackets {}, key and value are indicated with a column key: value, and the various key-value pairs are separated by a comma.

// A simple object
let example = {"key": "value",  "test": 123}

// A more complex one
let forecast = {  
  "datetime": "2025-01-15_10:58:23",
  "location": "Milan",
  "weather": {	
    "temperature": -2,	
    "humidity": "4%",	
    "precipitation": false	    
    },
}

There are two equivalent ways of accessing data from an Object:

// Dot notation
// value = object.key

let test = example.test
// test = 123

// Bracket notation
// value = object['key']

let toast = example['test']
// toast = 123

The same approach is valid for setting a value.

// Dot notation
// object.key = value

example.test = 456
// { 
//  "test": 456,
//  "key": "value"
// }

// Bracket notation
// object['test'] = value

example['test'] = 789
// { 
//  "test": 789,
//  "key": "value"
// }

As seen in the previous example, object can be nested one inside the other. This is a powerful feature that allows building hierarchical data with expressive and structured information. (See for example a typical JSON response from an API)

In order to access nested properties, both dot and bracket notations can be chained. For example:

// Dot notation

let nested = forecast.weather.humidity
// nested = "4%"

// Bracket notation

let roasted = forecast['weather']['temperature']
// roasted = -2

One important aspect to keep in mind is the concept of key uniqueness in an object.

// This is NOT a valid Object, notice the repeated keys "type"
{
  "title": "Ice Age 2",
  "type": "movie",
  "type": "animation",
}

However, a nested object can have a property with the same name.

// This is a valid object

let iceAge = {
  "title": "Ice Age 2",
  "type": "movie",
  "series": {
 	  "title": "Ice Age"
	   "type": "animation"
  },
}

// iceAge.type = "movie"
// iceAge.series.type = "animation"

In the previous example we still have two type keys, however one is for the root object, where "type": "movie", while the other is for the nested object "series".

Reading objects

One of the easiest way to familiarize with javascript objects is actually to read some JSON files! Have a look for example at this link coming from the are.na API. It can be scary at first, but with the help of some pretty printing (native on Firefox, achievable with browsers' plugins on Chrome and Safari) the file text becomes easier to read.

Here's an excerpt:

{
  "id": 1344863,
  "title": "Meme Lore: Garfield That's Not Coffee",
  "created_at": "2021-12-16T23:29:08.210Z",
  "updated_at": "2024-01-24T00:40:18.828Z",
  "added_to_at": "2022-07-20T21:42:59.900Z",
  "published": true,
  "open": false,
  "collaboration": false,
  "collaborator_count": 0,
  "slug": "meme-lore-garfield-that-s-not-coffee",
  "length": 84,
  "kind": "default",
  "status": "closed",
  "user_id": 17641,
  "manifest": {…},
  "contents": […],
  "base_class": "Channel",
  "page": 1,
  "per": 20,
  "collaborators": […],
  "follower_count": 3,
  "share_link": null,
  "metadata": {…},
  "class_name": "Channel",
  "can_index": true,
  "nsfw": true,
  "owner": {…},
  "user": {…}
}

It doesn't look as scary as before right? Just by reading we get to know that are.na structures their channels in this way: with an id, a title, some info about the collaborators and the amount of blocks (probably stored in the property length), etc.

It also provides some more articulated properties, with data about the owner of the channel, various metadata, and last but not least, a list of blocks stored as array in the property contents .

When it comes to JSON and object in general there is no right or wrong way to structure your data. No one enforce you to have an id or a nsfw? property. These are design choices informed both by the developer's idea about their data, as well as technical requirements inherited from the system that has to deal with those informations. (We can imagine for example that are.na stores their channels in a database, and the database requires an ID to identify the connected resources).

Another interesting excercise to play with these pieces of data, is to try and figure out where do these property are used in their website counterpart. Where do they manifest. For example, opening the page Meme Lore: Garfield That's Not Coffee, we can notice the icon nsfw next to the title of the channel, connected to the nsfw? property in the JSON response of the API. We can see the title and the description of the channel. If we look at the page URL, we can see the slug "meme-lore-garfield-that-s-not-coffee". Reading a JSONs we look at websites from the machine perspective. And that is very interesting.

Object Methods

There are useful function in JavaScript to work with Objects. Here are some examples:

Object.keys(iceAge)

// Return a list of keys
// ["title", "type", "series"]

Object.values(iceAge)

// Return a list of values
// ["Ice Age 2", "movie", {"title": "Ice Age", "type":"animation"}]

Object.entries(iceAge)

// Return a list of pairs [key, value]
// [["title", "Ice Age 2"], ["type", "movie"], ["series", {"title": "Ice Age", "type":"animation"}]]

These functions are useful when it comes to iterate with a loop through an Object.