TIL24 -JS - Object

Objects in JavaScript are containers that store data and functionality - an object is a versatile data type of its own

1. Creating Object Literals

An object is created by using the {} notation to designate the object literal

Syntax

let objectName = {};

• above, objectName is an empty object

An object is filled with unordered data, which are organized into key:value pairs separated by ,

> ex)

let pomskyUni = {
  mom: 'husky',
  dad: 'pomeranian',
  gender: 'female'
};

Each of the object's key:value pair is a property of the object

• the key is the property name (is a string data type)
• the value is the property value

For property names with no special characters, whitespaces, or numbers, the '' notation can be omitted. Otherwise, the property name must be enclosed in ''

> ex)

let pomskyUni = {
  mom: 'husky',
  dad: 'pomeranian',
  gender: 'female'
  'favorite snack': 'duck meat',
  'birth year': 2014
};

2. Accessing Object Properties

An object's properties can be accessed in two ways

The . notation

let getGender = pomskyUni.gender;
console.log(getGender);
// Prints: female

The [] notation

let getGender2 = pomskyUni['gender'];
console.log(getGender2);
// Prints: female

• note that, when using the [] notation, the property name is passed in as a string with the '' notation
• When accessing keys(property names) with special characters, whitespaces, or numbers, you must use the [] notation
• You can also input a variable as the key of the object using the [] notation:

let girlOrBoy = 'gender';
console.log(pomskyUni[girlOrBoy]);
// Prints: female

3. Property Assignment

Objects are mutable - You can assign additional properties to an existing object

Two ways to assign properties to an object:

• . notation
• [] notation

There are two results that can happen with property assignment:

• If the assigning property already exists for the object, the existing property value is replaced with the newly assigned value
• If the assigning property doesn't exist for the object, a new property is created with the corresponding property name and value

4. Object Methods

In addition to properties, an object can have methods - methods are functions stored on an object

Just like an object's property, its methods are organized into key:value pairs

• the key is the method name
• the value is an anonymous function expression

Syntax

• key:value function expression:

let objectName = {
  methodName: function() {
    code block;
  };

• new ES6 syntax:

let objectName = {
  methodName () {
    code block;
  };

> in the new ES6 syntax, we can omit the : and the function keyword

Object's property is what it has, method is what it does

5. Nested Objects

Objects themselves can be properties or methods of another object

> ex)

let pomskyUni = {
  gender: 'female',
  'birth year': 2014,
  favorites: {
    'daytime snack': 'duck recipe',
    hobby: 'walking',
    person: 'me'
  }
};

Nested objects are accessed by chaining the . and/or [] operators

>ex)

console.log(pomskyUni.favorites['daytime snack']);
//Prints: duck recipe

6. Pass by Reference

When an object is passed in as an argument into a function, it is passed by reference - the function takes the object and refers to the memory location where the object is stored

• This means calling a function that takes in an object as an argument and runs codes that change the properties of the object, those properties of the object are permanently changed -> if you log the object after calling a function that changes the passed in object's properties, you will see that the object will have the changed properties

> ex)

let object1 = {
  'test no': 1,
  'is changed': false
};
let pbrTest = obj => {
  obj['is changed'] = true;
};
pbrTest(object1);
console.log(object1); 
// Prints: {'test no': 1, 'is changed': true}

• However, reassigning the object variable in a function is not the same - when an object is passed in as an argument to a function that tries to reassign the object variable to a new set of properties, such assignment only happens within the scope of the function only; calling this function does not change the original object

> ex)

let object2 = {
  'test no': 2,
  'is changed': false
}
let pbrTest2 = obj => {
  obj = {
    'test no': 3,
    'is changed': true
  }
  console.log(obj);
}
pbrTest2(object2); 
// Prints: {'test no': 3, 'is changed': true}
console.log(object2);
// Prints: {'test no': 2, 'is changed': false}

7. Iterating through Objects

You can iterate through the elements of an array, which are ordered data, by using the array index

For objects, you can iterate through objects using a special syntax - the for... in syntax

> ex)

let objectName = {
  'key1': {
    'innerObject1': {
      'inner2Property1': 'one',
      'inner2Property2': 'two'
    },
    'innerObject2': {
      'inner2Property1': 'three',
      'inner2Property2': 'four',
      'inner2Property3': 'five'
    }
  },
  'key2': {
    'innerObject1': 'six',
    'innerObject2': 'seven'
  }
};
for (let innerKey in objectName['key1']) {
  console.log(`${innerKey}'s property 1: ${objectName['key1'][innerKey]['inner2Property1']}`);
}
/* Prints: 
innerObject1's property 1: one
innerObject2's property 1: three
*/