Skip to main content

JavaScript Classes the Basics

Classes: Basic Class Syntax

What is a JavaScript Class in Object-Oriented Programming (OOP)?​

View Answer:
Interview Response: Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes and have the same syntax and semantics that do not get shared with ES5 class-like semantics. Classes are, in fact, "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

Code Example:

class MyClass {
  // class methods
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

What is the difference between function declarations and class declarations?​

View Answer:
Interview Response: A significant difference between a function declaration and a class declaration is that a function declaration gets hoisted, and class declarations are not. Another difference is that those function declarations get declared at any point in your code.

Code Example:

const p = new Rectangle(); // ReferenceError

class Rectangle {}

////////////////////////////////////

console.log("Square Feet: " + rectSqFt(60,30))
// no error, returns Square Feet: 1800

// Function Declaration
function rectSqFt(height, width) {function gets hoisted / initialized
    let squareFeet = height * width;
    return squareFeet;
}
note

You first need to declare your class and then access it. Otherwise, code like the following throw a Reference Error.

What is a Class expression in JavaScript?​

View Answer:
Interview Response: A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance) name property, though). In a named class expression, it is visible inside the class only.

Code Example:

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

console.log(Rectangle.name);
// output: "Rectangle"

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

console.log(Rectangle.name);
// output: "Rectangle2"

console.log(Rectangle2);
// error, Rectangle2 name is not visible outside of the class

Is it possible to construct a Class in JavaScript on the fly?​

View Answer:
Interview Response: Yes, it is accomplished by returning a class from a function and using the new operator to obtain a new class.

Code Example:

function makeClass(phrase, name) {
  // declare a class and return it
  return class {
    sayHi() {
      console.log(`${phrase}`);
    }
    sayHello() {
      console.log(`${phrase}, ${name}`);
    }
  };
}

// Create a new class
let User = makeClass('Hello', 'Jane');

new User().sayHi(); // Hello

new User().sayHello(); // Hello, Jane

In your opinion, is classical inheritance ever the right choice? If so, when? If not, why?​

View Answer:
Interview Response: Classical inheritance is rarely the best solution, and we can utilize it for a single levels in rare situations.

Can you implement computed names in JavaScript classes?​

View Answer:
Interview Response: Yes, you can implement computed names in JavaScript classes in the same fashion as in Object literals.

Code Example:

// Class Implementation
class User {
  ['say' + 'Hi']() {
    alert('Hello');
  }
}

new User().sayHi();

// Computed property names (ES2015)
let prop = 'foo';
let o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there',
};

Class fields are a new addition to JavaScript. Can you explain their implementation in JavaScript?​

View Answer:
Interview Response: Yes, class fields are a syntax that allows us to add properties to a class. It is implemented by adding a name property to a class and assigning a value to that property. The critical difference between class fields is that we set them on individual objects, not Class.prototype.

Code Example:

class User {
  name = 'John';

  sayHi() {
    alert(`Hello, ${this.name}!`);
  }
}

new User().sayHi(); // Hello, John!

// As you can see: Class.prototype returns undefined
let user = new User();
alert(user.name); // John
alert(User.prototype.name); // undefined

// You can also use more complex expressions and function calls
class User {
  name = prompt('Name, please?', 'John');
}

let user = new User();
alert(user.name); // John

JavaScript classes are known to allow complex expressions and function calls in named class fields. Is there a way to create bound methods to classes without losing “this”?​

View Answer:
Interview Response: Yes, there are two approaches to “binding a method” to its class. They include passing a wrapper function such as setTimeout() or binding the method to the object constructor. We could use other options such as regular function declarations if necessary.

Code Example:

class Button {
  constructor(value) {
    // bind this.value in the constructor
    this.value = value;
  }
  click = () => {
    console.log(this.value);
  };
}

let button = new Button('hello');

setTimeout(button.click, 1000); /// hello, using setTimeout as a wrapper
note

You must use an arrow function as a method in the class, or you lose the value of “this”. Functions and class methods have their own “this”.