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.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 class interitance works in JS

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

~~~
class Point2d {
#ID = null;
}

Question 16

How to define static field in JS class

Answer 16

~~~
class Point2d {

static origin = new Point2d(0, 0);

}
```

Question 17

List this invocation methods:

Answer 17

• Implicit Context Invocation
• Default Context Invocation
• Explicit Context Invocation
• New Context Invocation

Question 18

Describe this Implicit Context Invocation

Answer 18

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

// invoke the init(..) function with this referencing point
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.

```javascript
const init = point.init;
init(3, 4);
~~~

Question 20

Describe this Explicit Context Invocation

Answer 20

```javascript
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 context (all the methods)

Answer 22

Lexical this:
var context = this; // sometimes called self

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

Bind:
this.clickHandler.bind(this)