TIL25 - JS - Object (Advanced)

1. this Keyword

You can use this keyword to access the properties and methods of the calling object itself.

this keyword doesn't work with arrow functions. It only works with function expressions

> ex)

let user = {
  id: 'applemania',
  name: 'Steve',
  getUserInfo() {
    return `User info. Name: ${this.name}. ID: ${this.id}`;
  }
};
console.log(user.getUserInfo());
// Prints: User info. Name: Steve. ID: applemania

2. Privacy

There may be some object properties that a developer might want to make private, or make unchangeable - For example, you might want the "name" property of a "user" object to be a permanent property that cannot be re-assgined

However, JavaScript doesn't have a built-in privacy feature that can prevent an object property from being re-assigned.

Instead, JavaScript developers use a naming convention that tells how to deal with a property.
--> add _ in front of the property name.

let user = {
  id: 'applemania',
  _name: 'Steve'
};

3. get & set Methods

The get and set methods, or the getter and setter methods, are used in JavaScript to "get" or "set" particular properties of the calling object, which usually are intended by the original developer to be dealt with caution in changing.

the get method

let user = {
  _id: 'applemania',
  _name: 'Steve',
  get userInfo() {
    if (this._id && this._name) {
      return `Currnet user info. Name: ${this._name}. ID: ${this._id}`
    } else {
      return 'System error. User ID and/or user\'s name is missing.'
    }
  }
};
console.log(user.userInfo);
// Prints: Current user info. Name: Steve. ID: applemania

the set method

let user = {
  _id: 'applemania',
  _name: 'Steve',
  set id(newId) {
    if (typeof newId === 'string') {
      this._id = newId;
    } else {
      return 'Must assign a string value to ID.'
    }
  }
};
user.id = 'macworld';
console.log(user._id);
// Prints: macworld

• Note that for getter and setter methods, you don't add parentheses () after the method name when calling them

4. Factory Functions

Up to now, we have only created single objects one by one with specific key:value pairs.

We can use factory functions to create objects that take the common properties designated by the function, but with the parameters passed into the function as their property values.
> This is similar to how classes are used to create object instances

> ex)

let userFactory = (id, name, yearReg) => {
  return {
    id: id,
    name: name,
    yearReg: yearReg
  };
};
let steve = userFactory('applemania', 'Steve', 1976);
console.log(steve);
// Prints: {id: 'applemania', name: 'Steve', yearReg: 1976}

• the userFactory function is used to create "user" objects that have the properties outlined in the factory function with the passed-parameters as their values

Property Value Shorthand

ES6 introduced a shorthand for assigning the properties in a factory function

> ex)

let userFactory = (id, name, yearReg) => {
  return {
    id,
    name,
    yearReg
  };
};

• this version of userFactory function has the same effect as the previous non-shorthand form

5. Destructured Assignment

We often want to access an object's key:value pairs and save them as variables

When assigning an object's property to a variable using the property key as the variable name, you can use a shorthand form - this is referred to as destructured assignment

Taking the following user object:

let user = {
  _id: 'applemania',
  _name: 'Steve'
}

• A normal assignment for the _name property would be:

let _name = user._name;
console.log(_name);
// Prints: Steve

• A destructured assignment woud be:

let {_name} = user;
console.log(_name);
// Prints: Steve

In destructured assignment, you enclose the variable (which is the object's property name) in {} and assign to it the object name (without the .key method call)