JavaScript Objects

Objects are containers that can hold many properties, which are essentially key name and value pairs. Each property can be identified by name, and you can also retrieve the corresponding value using the name. It can help to think of objects as variables, but the key difference is that it can hold multiple name/value pairs. Each property is like a variable assigned to a value, but the difference is a property is connected to an object, while a variable can be standalone. Similar to an array, an object can contain many values, but an object is unordered, meaning the key/value pairs aren't indexed. With an array, you can reference values using the index, but with an object, you reference the value by key or name.

Object literal

An object consists of curly braces that will hold our data, has key/value pairs denoted with a colon, and each pair inside is separated by a comma.

let cat = {pattern: "solid", age: 4, activity: "napping"};

Each property is accessible using dot notation.

cat.pattern

//Output is "solid"

An object can hold all different data types. If a property has a value that is a function, we refer to the function as a method.

Like regular properties, methods belonging to an object can be accessed with dot notation.

Properties can be reassigned using dot notation as well.

cat.pattern = "tuxedo"

//Call the cat object
cat

//Output is 
{pattern: "tuxedo", age: 4, activity: "napping"}

The cat object's pattern has been reassigned to "tuxedo".

Dot notation can be used to add a property to the object.

cat.colors = "black and white"

//Output is 
{pattern: "tuxedo", age: 4, activity: "napping", colors: "black and white"}

Notice how the latest property to be added is at the end of the object.

Objects can hold other objects and methods.

cat.sibling = {pattern: "bi-color", age: 4, activity: "sleeping", colors: "grey and white"}

cat

//Output is 
{pattern: "tuxedo", age: 4, activity: "napping", colors: "black and white", sibling: {pattern: "bi-color", age: 4, activity: "sleeping", colors: "grey and white"}}

Now we can assign that sibling cat object a name.

const whiskers = cat.sibling

whiskers

//Output is 
{pattern: "bi-color", age: 4, activity: "sleeping", colors: "grey and white"}

Then we assign whiskers' sibling, which is cat.

whiskers.sibling = cat

whiskers.sibling

//Output is 

{
  pattern: "tuxedo", 
  age: 4, 
  activity: "napping", 
  color: "black and white", 
  sibling: {pattern: "tuxedo", age: 4, activity: "napping", colors: "black and white", sibling: {pattern: "bi-color", age: 4, activity: "sleeping", colors: "grey and white"}}
}

It's becoming quite nested, but hopefully this conveys how objects contain properties of different types.

Lastly, we'll assign a function as a value of a cat's property.

function meow() {
  return "meow"
}

cat.speak = meow

cat.speak()

//Output is "meow"

cat.speak

//Output is the function definition, not the function invocation

meow() {
  return "meow"
}

If you use dot notation to call a method without invoking it, that is, without parentheses, you'll get the function definition. Remember to use () when you want the value the method returns.

Objects are a mutable data type, meaning they can be changed after being created.