Objects

Question 1

What function prevents data mutation of an object?

Answer 1

Object.freeze(obj);

Question 2

How do you make a new object, using an existing object as the prototype of the newly created object?

Answer 2

let obj = Object.create(proto, [descriptors])

Example:
let animal = {
  eats: true
};

// create a new object with animal as a prototype
let rabbit = Object.create(animal);

Technically, we can get/set [[Prototype]] at any time. But usually we only set it once at the object creation time and don’t modify it anymore. Changing a prototype “on-the-fly” with Object.setPrototypeOf or obj.__proto__= is a very slow operation as it breaks internal optimizations for object property access operations.

Question 3

Can inherited properties of an object be overwritten?

Answer 3

Yes!

Question 4

What is a JavaScript object?

Answer 4

An object is a collection of properties, and a property is an association between a name (or key) and a value. The object can contain any data types (numbers, arrays, object etc.)

Question 5

Describe abstraction

Answer 5

Refers to only showing essential details and keeping everything else hidden
Users of the classes should not worry about the inner details of those classes and should not directly interact with other classes’ data
If classes are entangled, then on change creates a ripple effect that causes many more changes
Creating an interface through which classes can interact ensures that each piece can be individually developed

Question 6

What is the difference between encapsulation and abstraction

Answer 6

Abstraction is about hiding unwanted details while giving out the most essential details, while Encapsulation means hiding the code and data into a single unit e.g. class or method to protect the inner working of an object from the outside world. In other words, Abstraction means extracting common details or generalizing things.

Question 7

What is polymorphism and what is the difference between static and dynamic polymorphism?

Answer 7

Polymorphism is the ability to call the same method on different objects and have each of them respond in their own way.
Dynamic:
-Occurs during the runtime of the program (when it is being executed)
-Describes when a method signature is in both a subclass and a superclass
-The methods share the same name but have different implementation
-The subclass that the object is an instance of overrides that of the superclass
Static:
-Occurs during compile-time rather than during runtime
-Refers to when multiple methods with the same name but different arguments are defined in the same class
-Despite the methods having the same name, their signatures are different due to their different arguments

Question 8

What will this print:
function Foo(){
    console.log(this);
}

Answer 8

It prints the window object because this is a global object. Whatever parent scope is, it will be inherited by the child.

Question 9

let obj1 = {name: 'GreenRoots'};
let obj2 = {name: 'GreenRoots'};

obj1 == obj2 // ???
obj1 === obj2 // ???
Object.is(obj1, obj2); // ???

Answer 9

They all return false because non-primitive data types are passed by reference (unlike primitive types that are passed by value).
Hence both obj1 and obj2 the value at the different memory locations that they are created on.

Question 10

What will this return in strict mode and non-strict mode?
function f1() {
  return this;
}

Answer 10

Non-strict:
// In a browser:
f1() === window; // true
// In Node:
f1() === globalThis; // true

Strict:
f1() === undefined; // true

Question 11

Describe Object Oriented Programming.

Answer 11

OOP is based around the concept of “objects”. These are data structures that contain data fields — known in JavaScript as “properties” — and procedures — known as “methods”.
Some of JavaScript’s in-built objects include Math (used for methods such as random , max and sin ), JSON (used for parsing JSON data), and primitive data types like String , Array , Number and Boolean .
Whenever you rely on in-built methods, prototypes or classes, you are essentially using Object-Oriented Programming

Question 12

What are the 4 main principles of Object Oriented Programming?

Answer 12

Encapsulation, abstraction, inheritance, and polymorphism

Question 13

What are prototypes?

Answer 13

Prototypes are the mechanism by which JavaScript objects inherit methods and properties from one another.

Question 14

let obj = {
   3: "test"
}
What do these return?
console.log(obj[3]);
console.log(obj["3"]);

Answer 14

They both access the same property, return “test”

Question 15

How do you determine if there is a property in an object?

Answer 15

“key” in object
Returns true or false
The left side of in there must be a property name. That’s usually a quoted string.

If we omit quotes, that means a variable, it should contain the actual name to be tested.

let user = { age: 30 };
let key = "age";

alert(key in user);
or
alert(“age” in user);

Question 16

How do we make a clone of an object?

Answer 16

Object.assign(dest, [src1, src2, …])

Example:
let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);

Keep in mind if a property is an object, you will l have the same problem of copying a reference. To fix that, we should use a cloning loop that examines each value of user[key] and, if it’s an object, then replicate its structure as well. That is called a “deep cloning”.

Question 17

function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); // What’s the result?

Answer 17

If in strict mode….Error: Cannot read property ‘name’ of undefined

Below works because user.ref() is a method. And the value of this is set to the object before dot .

function makeUser() {
  return {
    name: "John",
    ref() {
      return this;
    }
  };
}

let user = makeUser();

alert( user.ref().name ); // John

Question 18

What kind of type(s) can be object property keys?

Answer 18

String and symbol

Question 19

How can you check if a property of an object is inherited or not?

Answer 19

hasOwnProperty()

Example:
function Phone() {
  this.operatingSystem = 'Android';
}
const myPhone = new Phone();

console.log(myPhone.hasOwnProperty('operatingSystem'));
// true

Question 20

How can you can confirm if a particular object serves as the prototype of another object?

Answer 20

isPrototypeOf()

Example:
const rodent = {
  hasTail: true
};
function Mouse() {
  this.favoriteFood = 'cheese';
}

Mouse.prototype = rodent;
const ralph = new Mouse();

console.log(rodent.isPrototypeOf(ralph));
// true

Question 21

What do you get when you use the constructor property on an object?

Answer 21

It returns a reference to the constructor function that created that object in the first place.

Example:
function Longboard() {
  this.material = 'bamboo';
}

const board = new Longboard();console.log(board.constructor);

// function Longboard() {
//   this.material = 'bamboo';
// }

If an object was created using literal notation, its constructor is the built-in Object() constructor function!

Question 22

How do you confirm an object’s prototype?

Answer 22

Object.getPrototypeOf()

Question 23

Let’s say we want a Child object to inherit from a Parent object. Why shouldn’t we just set Child.prototype = Parent.prototype

Answer 23

Objects are passed by reference. This means that since the Child.prototype object and the Parent.prototype object refer to the same object – any changes you make to Child’s prototype will also be made to Parent’s prototype! We don’t want children being able to modify properties of their parents!

On top of all this, no prototype chain will be set up. What if we want an object to inherit from any object we want, not just its prototype?

Question 24

What does instanceof operator do?

Answer 24

The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.

Question 25

What types can a prototype be?

Answer 25

A prototype can be either an object or null. Other types are ignored

Question 26

True or false: The for..in loop iterates over both its own and its inherited properties.

Answer 26

True!
If want just own properties, could do something like this:
let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  \_\_proto\_\_: animal
};

for(let prop in rabbit) {
  let isOwn = rabbit.hasOwnProperty(prop);

  if (isOwn) {
    alert(`Our: ${prop}`); // Our: jumps
  } else {
    alert(`Inherited: ${prop}`); // Inherited: eats
  }
}

Question 27

What types of object to primitive conversions are there and name some examples?

Answer 27

1) string: when we're doing an operation an an object that expects a string
// output
alert(obj);

// using object as a property key
anotherObj[obj] = 123;

2) number: For an object-to-number conversion, like when we’re doing maths
// explicit conversion
let num = Number(obj);

// maths (except binary plus)
let n = +obj; // unary plus
let delta = date1 - date2;

// less/greater comparison
let greater = user1 > user2;

3) default: when operator not sure what type to expect. With the exception of working with Date object, the default conversion works the same way as number.

// binary plus uses the "default" hint
let total = obj1 + obj2;

// obj == number uses the "default" hint
if (user == 1) { ... };

Question 28

What is a mixin?

Answer 28

A mixin is a technique that takes the properties and methods from one object and copies them over to another object. In other words: a mixin is an technique that provides some useful functionality, but is not meant to be added to the prototype chain.

Question 29

What is Object.assign()?

Answer 29

Object.assign() is a method that copies an object’s own (non-inherited) properties from one or more source objects into a target object, then returns the updated target object.

Object.assign() does not create and return a new object; it directly modifies then returns the same target object that was passed in! As such, values of existing properties will be overwritten, while properties that don’t exist in the source object will remain intact.

Question 30

What is a factory function and how does it compare to a constructor function?

Answer 30

A factory function is a function that returns an object, but isn’t itself a class or constructor. Using a factory function, we can easily create object instances without the complexity of classes and constructors! Factory functions don’t implicate prototypal inheritance and don’t use the ‘new’ operator.

function Basketball(color) {
  return {
    color: color,
    numDots: 35000
  };
}

Question 31

What is a functional mixin?

Answer 31

A factory function creates objects. It is invoked as normal function, not with the new operator. Functional mixins take things a bit further by accepting a mixin as an argument, copies properties and methods from the mixin, and returns a new object.

Example:
function CoffeeMaker(object) {
  let needsRefill = false;

  return Object.assign({}, object, {
    pourAll: function () {
      needsRefill = true;
    },
    isEmpty: function () {
      return needsRefill;
    }
  });
}

Question 32

How do you destructure an object?
How do you assign a property to a variable with another name?
How do you set a default value?

Answer 32

Assign a property with a colon. Add default value with an equality sign.

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title); // Menu
alert(w); // 100
alert(h); // 200

Question 33

What is the difference between for..in and for..of?

Answer 33

Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

let list = [4, 5, 6];

for (let i in list) {
console.log(i); // “0”, “1”, “2”,
}

for (let i of list) {
console.log(i); // “4”, “5”, “6”
}

Another distinction is that for..in operates on any object; it serves as a way to inspect properties on this object. for..of on the other hand, is mainly interested in values of iterable objects. Built-in objects like Map and Set implement Symbol.iterator property allowing access to stored values.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
console.log(pet); // “species”
}

for (let pet of pets) {
console.log(pet); // “Cat”, “Dog”, “Hamster”
}

Question 34

What is ‘this’?

Answer 34

this is the object that the function is a property of