Object Literal vs Object Destructuring

// object literal
const obj = {
  a: 1,
  b: 2
};

// object destructuring
const { a, b } = obj;

When inside a function parameter, the syntax gets a bit more complex.

// you can't do this
function someWrongFunction1({a: 1, b: 2}) {
  // will attempt to evaluate as object destructuring
  // because function parameter is used for variable declaration, object literal will be evaluated as object destructuring (keys as variable names)
  console.log(a, b);
}

// object literal passing
function someFunction1(obj) {
  console.log(obj.a, obj.b);
}

someFunction1({a: 1, b: 2}); // this is passing an argument, not defining a parameter, so it's not object destructuring

// object destructuring
function someFunction2({ a, b }) {
  console.log(a, b);
}

someFunction2({a: 1, b: 2}); // 1 2

Object Behaviors

Object with integer typed keys are automatically sorted in ascending order.

// integer keys
const integerKeyObject = {
  100: "a", 
  2: "b", 
  7: "c"
};

Object.keys(integerKeyObject); // ["2", "7", "100"] 

String typed keys are not sorted.

// string keys
const stringKeyObject = {
  "c": "somestring",
  "a": 42,
  "b": false
};

Object.keys(stringKeyObject); // ["c", "a", "b"] 

.toString()

Has a particular behavior when called on an object:

1. If the this value is undefined, return [object Undefined].
2. If the this value is null, return [object Null].
3. Let O be the result of calling ToObject passing the this value as the argument.
4. Let class be the value of the [[Class]] internal property of O.
5. Return the String value that is the result of concatenating the three Strings [object ", class, and "].

Computed Property Name

Variables or dynamic expressions can be used as a key using [dynamic_key] syntax.

const columns = {
  // dynamic key running the uuid() function
  [uuid()]: {
    value: "some value"
  }
}

In above example, [uuid()] is a dynamic property where the value is returned from running the uuid() function.

Typing Computed Property Name

type ObjWithDynamicKey = {
    [key: string]: "whatever type it can be",
    "hardCodedName": "whatever type it is",
}