Objects and Classes

Question 1

Compute property name ("x" + (21 * 2)), set it to true

Answer 1

const obj = {
  ["x" + (21 * 2)]: true // x42
};

Question 2

Symbols As Property Names

Answer 2

myPropSymbol = Symbol("description");

anotherObj = {
  [myPropSymbol]: "Hello, symbol!",
};

Question 3

How to perform deep copy of an object

Answer 3

myObjCopy = structuredClone(myObj);

Question 4

How to delete property

Answer 4

delete anotherObj.counter;

Question 5

How to determine if property is in the object (all methods and how they differ)

Answer 5

"favoriteNumber" in myObj;
- The in operator will check not only the target object specified, but if not found there, it will also consult the object’s [[Prototype]] chain

myObj.hasOwnProperty("coolFact");
- By contrast, hasOwnProperty(..) only consults the target object. - object.hasOwnProperty(..) is defined as a built-in on Object.prototype, which by default is “inherited by” all normal objects.

Object.hasOwn(myObj, "favoriteNumber");
- hasOwn is invoked as a static helper external to the object value instead of via the object’s [[Prototype]], making it safer and more consistent in usage (ES2022)

Question 6

Types of descriptors

Answer 6

• Data descriptor is a property that has a value, which may or may not be writable.
• Accessor descriptor is a property described by a getter-setter (get(), set()) pair of functions.

Question 7

Descriptor properties and what they do

Answer 7

• The enumerable attribute controls whether the property will appear in various enumerations of object properties, such as Object.keys(..), Object.entries(..), for..in loops, and the copying that occurs with the ...object spread and Object.assign(..). Most properties should be left enumerable, but you can mark certain special properties on an object as non-enumerable if they shouldn’t be iterated/copied.
• The writable attribute controls whether a value assignment (via =) is allowed. To make a property “read only”, define it with writable: false.
• The configurable attribute controls whether a property’s descriptor can be re-defined/overwritten. A property that’s configurable: false is locked to its definition, and any further attempts to change it with Object.defineProperty(..) will fail. A non-configurable property can still be assigned new values (via =), as long as writable: true is still set on the property’s descriptor.

Question 8

How to set a data descriptor on an object

Answer 8

Object.defineProperty(anotherObj, "fave", {
  value: 42,
  enumerable: true,     // will be seen in for of loop
  writable: true,       // can be changed
  configurable: true    // can always be re-defined/overwritten, false to prevent that.
});

Question 9

What are different levels of preventing object modifications. Describe methods and what operations they block.

Answer 9

Object.preventExtensions(myObj);
- new properties cannot be added,
- its prototype cannot be re-assigned.

Object.seal(object1);
- Same as above and:
- existing properties cannot be removed,
- their enumerability and configurability cannot be changed

Object.freeze(object1);
- Freezing an object prevents extensions and makes existing properties non-writable and non-configurable.

Question 10

How prototype chain interitance works in JS

Answer 10

Missing methods are looked up in obects along along the [[Prototype]] chain

Not to confuse [[Prototype]] with a public property named prototype.

Question 11

List some properties inherited from Object.prototype

Answer 11

• constructor
  
  • \_\_proto\_\_
  • toString()
  • valueOf()
  • hasOwnProperty(..)
  • isPrototypeOf(..)

Question 12

How to create object with specified Object.prototype

Answer 12

myObj = Object.create(differentObj);
emptyObj = Object.create(null);

Question 13

[[Prototype]] vs prototype

Answer 13

• [[Prototype]] is an internal property of an object that links it to another object (its prototype), forming a prototype chain.
• The prototype property, on the other hand, is a property of a constructor function and is used to define the prototype object for instances created using that constructor.

Question 14

How to inherit from another class, what to remember about (with class keyword).

Answer 14

An explicitly defined subclass constructor must call super(..) to run the inherited class’s initialization, and that must occur before the subclass constructor makes any references to this or finishes/returns.

class Teacher extends Person {
  constructor(subject, grade) {
    // Without `super()`, `this` would be undefined and cause error!
    super(first, last, age);
  }
}

Question 15

How to define private fields in JS class

Answer 15

#ID = null;

Question 16

How to define static field in JS class

Answer 16

static origin = new Point2d(0, 0);

Question 17

List all possible this invocation contexts

Answer 17

Implicit Context Invocation
point.init(3, 4);

Default Context Invocation
const init = point.init;
init(3, 4);

Explicit Context Invocation

// Assign point as the this context
init.call(point, 3, 4);
// or (same effect):
init.apply(point, [3, 4]);

New Context Invocation

var anotherPoint = new point.init(3, 4);

Question 18

Describe this Implicit Context Invocation

Answer 18

const point = {
  init(x, y) {
    this.x = x;
    this.y = y;
  },
};

point.init(3, 4);

Question 19

Describe this Default Context Invocation

Answer 19

• When there’s no implicit context (point.), nor any other kind of this assignment mechanism, the default context assignment occurs.
• Default context:
  
  • For strict mode: undefined
  • For non-strict mode, the default context is the global object - JS defines it as globalThis, which in browser JS is essentially an alias to window, and in Node it’s global.

const init = point.init;
init(3, 4);

Question 20

Describe this Explicit Context Invocation

Answer 20

const point = {
  // Implementation
};

const init = point.init;

// Assign point as the this context
init.call(point, 3, 4);
// or (same effect):
init.apply(point, [3, 4]);

Question 21

Describe this New Context Invocation, list all the steps involved.

Answer 21

var anotherPoint = new point.init(3, 4);

In a sense, the new keyword hijacks a function and forces its behavior into a different mode than a normal invocation. Here are the 4 special steps that JS performs when a function is invoked with new:
- Create a brand new empty object, out of thin air.
- Link the [[Prototype]] of that new empty object to the function’s .prototype object.
- Invoke the function with the this context set to that new empty object.
- If the function doesn’t return its own object value explicitly (with a return .. statement), assume the function call should instead return the new object (from steps 1-3).

Question 22

How to force specific this in function (all the methods)

Answer 22

Lexical this:
const self = this;

Arrow function - The primary point of the => function being added to JS was to give us “lexical this” behavior without having to resort to const self = this.

Bind:
this.clickHandler.bind(this)

Explicit
- foo.call(this, args...)
- foo.apply(this, [args])