Objects: The Basics

Objects

• this

  this in arrow function refers to this in surrounding the function

• Optional chaining ?.

Symbol type

• Symbol() Two symbols with the same description are not equal

• Hidden properties

  • In an object literal: need []

  • Are skipped by for...in

• Global symbols

  • Symbol.for("id")

  • Symbol.keyFor(sym)

Iterables

Make any object usable in a for...of loop

• Symbol.iterator

funcName[Symbol.iterator] = () => {
  return {
    current: this.from,
    last: this.to

    next() {
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
      } else {
        return { done: true };
      }
    }
  }
}

• String is iterable

• Calling an iterator explicity

let str = "Hello";

let iterator = str[Symbol.iterator]();

while (true) {
  let result = iterator.next();
  if (result.done) break;
  console.log(result.value);
}

• Iterables and array-likes Different, array-likes can be not iterable

• Array.from

let arrayLike = {
  0: "hello",
  1: "world",
  length: 2,
};
let arr = Array.from(arrayLike);
console.log(arr);

Object.keys, values, entries

Object.keys

Object.keys(obj);
// Return [key1, key2,...]

Object.values

Object.values(obj);
// Return [value1, value2, ...]

Object.entries

Object.entries(obj);
// Return [[key1, value1], [key2, value1], ...]

Object.fromEntries

const array = Object.entries(obj);
Object.fromEntries(array);
// Return the object from array

Transforming objects

let originalObj = Object.fromEntries(
    Object.entries(initialObj).map(entry => [entry[0], entry[1]]);
);

Destructuring assignment

Array destructuring

let arr = ["Khoa", "Tu"];
let [word1, word2] = arr; // word1 = "Khoa", word2 = "Tu"

The rest ...

let [word1, word2, ...rest] = []; // rest is a new array of the rest element

Default values

let [name = "Guest", surname = "Anonymous"] = ["Julius"];
// name="Julius" (from array)
// surname="Anonymous" (default used)

Object destructuring

let { field1, field2 } = obj;
let { field1: f1, field2: f2 } = obj;
let { value1 = val1, value2 = val2, field } = obj;
let { field1, ...rest } = obj;

Nested destructuring

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: [1, 2],
  extrat: true
};

// Destructuring
let {
  size: {
    width,
    height
  },
  items: [item1, item2],
  title: "Menu" // not present in the object
} = options;

Date and time

• Date before 01/01/1970 has negative timestamp

• Autocorrection

• Benchmarking: date1.getTime()-date2.getTime() is faster than date1-date2

• Date.parse from a string:

  • The string format should be: YYYY-MM-DDTHH:mm:ss.sssZ

  • Shorter variants are also possible: YYYY-MM-DD, YYYY-MM, YYYY

JSON methods, toJSON

• JSON.stringify: to string

• JSON.parse: to object

• JSON supports following data types:

  • Objects

  • Arrays

  • Primitives:

    • strings

    • numbers

    • boolean

    • null

• JSON skips some object properties:

  • Function

  • Symbolic keys and values

  • Properties that store undefined

• Limitation: there must be no circular references

let room = {};
let meetup = {};
meetup.place = room; // meetup references room
room.occupiedBy = meetup; // roon references meetup
JSON.stringify(meetup); // Error

• Full syntax

let json = JSON.stringify(value[, replacer, space])

• Excluding and transforming: replacer

function replacer(key, value) {
  console.log(`${key}: ${value}`);
  return key === "a_field_we_want_to_exclude" ? undefined : value;
}

• Formatting: space

JSON.strignify(user, null, 2); // format 2 space

• Custom toJSON() method

• JSON.parse

JSON.parse(str, [reviver]);

• Using reviver

JSON.parse(str, function (key, value) {
  // A date string may not be a Date object so we have to
  // update it to a Date object
  if (key == "date") return new Date(value);
  return value;
});

Object properties configuration

Property flags and descriptors

Propety flags

Object properties, besides a value, have three special attributes:

• writable

• enumerable

• configurable

Method Object.getOwnPropertyDescriptor allows to query the full information about a property

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

To change the flags, we can use Object.defindProperty

Object.defineProperty(obj, propertyName, descriptor);
Object.defineProperty(user, "name", {
  value: "John",
});

Object.defineProperties help an object to define multiple properties

Object.defineProperties(obj, {
  prop1: descriptor1,
  prop2: descriptor2,
  // ...
});