Pro JS for Web Dev Notes – Aaron Yang | UI/UX Designer, User Researcher, Website Developer / Mon, 07 Sep 2020 01:54:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.2.2 /wp-content/uploads/2021/02/cropped-Logo_AY_-favicon-1-32x32.png Pro JS for Web Dev Notes – Aaron Yang | UI/UX Designer, User Researcher, Website Developer / 32 32 204485775 Objects /objects/ /objects/#respond Mon, 31 Aug 2020 00:46:19 +0000 /?p=691 Read More »Objects]]> Types of Properties

According to ECMA-262, properties are internal-only attributes. We can use [[]] to indicate an internal attribute, like [[Enumerable]]. They are not accessible in JavaScript.

Data Properties

PropertiesDescriptionDefault
[[Configurable]]Indicates if the property may be redefined.true
[[Enumerable]]Indicates if the property will be returned in a for-in looptrue
[[Writable]]Indicates if the property’s value can be changedtrue
[[Value]]Contains the actual data value for the property.assigned value when created
Data Properties

Example 1

let person = {
  name: "Aaron Yang"
};

This object has a property called “name” with a value of “Aaron Yang.” You can change it as you want.

Example 2

let person = {};
Object.defineProperty(person, "name", {
  writable: false,
  value: "Aaron Yang"
});
console.log(person.name);   // "Aaron Yang"
person.name = "Emily";      // since the writable property was set to false, you cannot change this value
console.log(person.name);   // "Aaron Yang"

Example 3

let person = {};
Object.defineProperty(person, "name", {
  configurable: false,
  value: "Aaron Yang"
});
console.log(person.name);    // "Aaron Yang"
delate person.name;          // Since the property [[Configurable]] was set to false, you cannot change or delete it.
console.log(person.name);    // "Aaron Yang"

If a property was defined as nonconfigurable, any attempt to call Object.defineProperty() and change any attribute other than writable causes an error.

let person = {};
Object.defineProperty(person, "name", {
  configurable: false,
  value: "Aarn"
});

// Throws an error
Object.defineProperty(person, "name", {
  configurale: true,
  value: "Aaron;
});

Accessor Properties

PropertiesDescriptionDefault
[[Configurable]]Indicates if the property may be redefined.true
[[Enumerable]]Indicates if the property will be returned in a for-in looptrue
[[Get]]Indicates if the property’s value can be changedundefined
[[Set]]Contains the actual data value for the property.undefined
Data Properties
// Define object with pseudo-private member 'year_'
// and public member 'edition'
let book = {
  year_: 2017,
  efition: 1
};

Object.defineProperty(book, "year", {
  get() {
    return this.year_;
  },
  set(newValue) {
    if (newValue > 2017) {
      this.year_ = newValue;
      this.edition += newValue - 2017;
    }
  }
});
book.year = 2018;
console.log(book.edition);  // 2

Create an Object

Create an object and add properties and methods to it:

let person = new Object();
person.name = "Aaron Yang";
person.age = 34;
person.job = "Designer";
person.sayName = function() {
  console.log(this.name);
};

Another way of creating an object:

let person = {
  name: "Aaron Yang",
  age: 34,
  job: "Designer",
  sayName() {
    console.log(this.name);
  }
}

Enhanced Object Syntax

Property Value Shorthand

let name = "Matt";
let person = {
  name: name
};
console.log(person);   // { name: "Matt" }

A better version

let name = "Matt";
let person = {
  name
};
console.log(person);   // { name: "Matt" }

Minifiers will preserve property names between scopes to prevent breaking references.

function makePerson(name) {
  return {
    name
  };
}

let person = makePerson("Aaron");
console.log(person.name);    // Aaron

Computed Property Keys

const nameKey = "name";
const ageKey = "age";
const jobKey = "job";

let person = {};
person[nameKey] = "Aaron";
person[ageKey] = "34";
person[jobKey] = "Designer";

console.log(person);    // { name: "Aaron", age: 34, job: "Designer" }
const nameKey = "name";
const ageKey = "age";
const jobKey = "job";

let person = {
  [nameKey] = "Aaron";
  [ageKey] = "34";
  [jobKey] = "Designer";  
};  

console.log(person);    // { name: "Aaron", age: 34, job: "Designer" }

Concise Method Syntax

An object with function:

let person = {
  sayName: function(name) {
    console.log(`My name is ${name}`);
  }
};

A shorthand version:

let person = {
  sayName(name) {
    console.log(`My name is ${name}`);
  }
};

Also applicable to the getter and setter:

let person = {
  name_: "",
  get name() {
    return this.name_;
  },
  set name(name) {
    this.name_ = name;
  },
  sayName() {
    console.log(`My name is ${this.name_}`);
  }
};

person.name.= "Aaron";
person.sayName();    // My name is Aaron
]]> /objects/feed/ 0 691