a.k.a.

JavaScript as the good Crockford intended

TL;DR

var Person = module.exports;

Person.create = function (p) {
  var person = {
    name: p.name || "Another Jane Doe",
    age: p.age || 0,
  };

  person.creditCard = function () {
    return "****-****-****-" + p.creditCard.slice(-4);
  };

  return person;
};

Person.save = async function (p) {
  return await request({
    url: `/api/person/${p.id}`,
    json: p,
  });
};

I made up the term ‘object-oriented’, and I can tell you I didn’t have C++ in mind

- Alan Kay, OOPSLA ‘97

Newsflash

JavaScript doesn’t have classes.

Why would anyone want
to do classes in JavaScript?

Benefits of JavaScript

Benefits of JavaScript

• Serializable

Benefits of JavaScript

• Serializable
• Duck-Typed

Benefits of JavaScript

• Serializable
• Duck-Typed
• Closures

Benefits of JavaScript

• Serializable
• Duck-Typed
• Closures
• Async

Benefits of JavaScript

• Serializable
• Duck-Typed
• Closures
• Async

Pretty much the same as Go and Rust.

Serializable, Hydratable

{
  name: "John Doe",
  age: 37,
}

JSON, APIs, Database

Duct-Typed

// if is Promise-like
if (o.then) {
  return await o;
}
return o;

Mix and match capabilities.

Closures

function createApiRequester(key, secret) {
  return async function (data) {
    return await request({
      auth: { user: key, pass: secret },
      json: data,
    });
  };
}

Composable, ad-hoc state.

Person.api = createApiRequester(
  "https://example.co",
  "my-user",
  "my-token"
);

await Person.api("/api/person/1");

await person.api("/api/person/1", { name: "AJ" });

Async

await Promise.all([
  //
  apiRequest(opts),
  fs.readFile(opts),
]);

Non-blocking event loop, without mutexes.

Detriments of Classes

• Awkward State (this-ness)
• Inheritance
• General Complexity

Pretty much the same as C#, C++, and Java.

Factories & Value Objects

var Person = module.exports;

Person.create = function (p) {
  var person = {
    name: p.name || "Another Jane Doe",
    age: p.age || 0,
  };

  // ...

  return person;
};

Plain-old functions & JSON.

Static Methods

Person.greet = function (p, other) {
  return `Hello ${other.name}! I'm ${p.name}!`;
};

Attach functions at the package (factory) level.

Member Methods

Person.create = function (p) {
  // ...

  person.greet = function (other) {
    return `Hello ${other.name}! I'm ${person.name}!`;
  };

  // ...
};

Member Methods

Person.create = function (p) {
  // ...

  person.greet = function (other) {
    return `Hello ${other.name}! I'm ${person.name}!`;
  };

  // ...
};

Taints the object (too much like classes).

Realistic Static Method

Person.save = async function (p) {
  return await request({
    url: `/api/person/${p.id}`,
    json: p,
  });
};

await Person.save(p);

For “public” or “static” methods.

Realistic Member Method

Person.create = function (p) {
  let cc = p.creditCard;
  p.creditCard = null;

  // ...
};

Realistic Member Method

Person.create = function (p) {
  let cc = p.creditCard;
  p.creditCard = null;

  // ...
};

person.creditCard = function (expose) {
  if (expose) {
    return cc;
  }
  return "****-****-****-" + cc.slice(-4);
};

Realistic Member Method

Person.create = function (p) {
  let cc = p.creditCard;
  p.creditCard = null;

  // ...
};

person.creditCard = function (expose) {
  if (expose) {
    return cc;
  }
  return "****-****-****-" + cc.slice(-4);
};

If you want truly “private” member data.
(or have data you need to scrub)

Co-opting / Appropriation

prototype !== class

prototype === polyfill