How do you represent a class as a function in JavaScript

Question

Classes are in fact "special functions"

How would something like

class Foo {
  constructor(x) {
    this.x = x;
  }

  foo() {}

}

be translated to just function (ignoring the "hoisting" feature)

There are loads of examples of this already, look at e.g. https://stackoverflow.com/a/51675487/3001761 — jonrsharpe, Oct 25 '21 at 19:22

score 1 · Answer 1 · answered Oct 25 '21 at 19:22

1

// declare the "class"
function Foo (x) {
  this.x = x;
}

// declare the instance method
Foo.prototype.foo = function () {
  return 'i am foo';
}

// create an instance
const f = new Foo(42);

// invoke its methods
console.log(f.foo()); // 'i am foo'

// access its properties
console.log(f.x); // 42

answered Oct 25 '21 at 19:22

ray

26,557
5
28
27

This is pretty straight forward. I was torn between this answer and the other one. The advantage of the other one is it's not `hoisted` which represents a class better. – Archimedes Trajano Oct 25 '21 at 20:16
1

Fair enough. Obviously this wasn't intended as a thorough exploration of classes; just a simplest-possible example of how classes shake out to functions. – ray Oct 25 '21 at 20:48
@ArchimedesTrajano: To make it non-hoisted the only thing you need to change is `function Foo (x) {` to `const Foo = function (x) {`. – Ry- Oct 26 '21 at 07:16

Peter Seliger · Accepted Answer · 2021-10-25T19:42:48.440

0

Non hoisted, (as much as constructor functions based on class syntax are not hoisted,) due to an immediately invoked function expression (IIFE) which serves as module pattern ...

const Foo = (function () {    //  class Foo {
                              //
  function Foo(x) {           //    constructor(x) {
    this.x = x;               //      this.x = x;
  }                           //    }
  function foo() {            //    foo() {
  }                           //
  Foo.prototype.foo = foo;    //    }
                              //
  return Foo;                 //
                              //
}());                         //  }

edited Oct 25 '21 at 19:42

answered Oct 25 '21 at 19:32

Peter Seliger

11,747
3
28
37

1

@ArchimedesTrajano ... *ray hatfield* and me most probably earned the downvotes for stepping into the minefield of answering an anyhow not well received question by providing approaches which are far from a full coverage of all the features that come with real JS *class*es. – Peter Seliger Oct 25 '21 at 20:21
Answers the question anyway on how a class is represented as a function. – Archimedes Trajano Oct 25 '21 at 20:27

score -1 · Answer 3 · answered Oct 25 '21 at 19:23

-1

Well really everything is objects - a class is simply a blueprint for an object that has some methods and some values. It's all objects with features that can either store values or transform values.

A class is something - a function does something. Calling it a special function is if anything unnecessary at best and confusing at worst.

Basically - don't worry about it.

answered Oct 25 '21 at 19:23

polisen

275
1
7

Maybe this is true in other languages, but `typeof class {} === "function"` is pretty fundamental to JavaScript. – Ry- Oct 25 '21 at 19:36
When would you need to define a class as a function? I mean it IS a syntactic sugar for a constructor function but it also technically is an object. Like why would you? – polisen Oct 25 '21 at 19:41

How do you represent a class as a function in JavaScript

3 Answers3