#object orientation

Lunarobjectix

[PT: Lunarobjectix]

An objectum/objectix attraction label specifying the attraction to the moon/moons

Made using @Speaksleazy's objectix flag redesign[link] as a template (genuinely love their objectum flag redesigns)

[ID: Two flags, each with seven vertical stripes. The stripes are the same width except for the middle one, which is wider than the others. The left three stripes are a gradient of dark gray to gray, the middle stripe is light gray, and the right three stripes are a gradient of light blue to gray-blue. The left flag has a green symbol of a cube in the centre, with a light gray octagon on one side of the cube. The right flag doesn't have the symbol. End ID] courtesy of @radiomogai

Private variables have always been possible in JavaScript, but before the new syntax they required somewhat cumbersome steps to use. For example:

function Car(name, hp) { const privateVariable = 'test1'; this.name = name; this.hp = hp; // Note this will not appear in inherited copies of this object. this.print = function() { console.log(`${this.name} (${this.hp}) - secret: ${privateVariable}`); } } const miata = new Car('miata', 155); console.log(miata.name); // miata console.log(miata.hp); // 155 console.log(miata.privateVariable); // undefined miata.print(); // miata (155) - secret: test1

Basically, private variables can be created in a scope that is no longer available and used via a closure. Now with the # syntax, this is much more straightforward:

class Car { #privateVariable = 'test1'; constructor(name, hp) { this.name = name; this.hp = hp; } print() { console.log(`${this.name} (${this.hp}) - secret: ${this.#privateVariable}`); } } const miata = new Car('miata', 155); console.log(miata.name); // miata console.log(miat2.hp); // 155 console.log(miata.privateVariable); // undefined miata.print(); // miata (155) - secret: test1

This is currently supported in Node.js 12 and Chrome by default. It will likely be in other browsers soon since it is now part of the JS standard.

If the below code blocks do not show up properly due to a recent Tumblr change. View them directly at https://obscurejavascript.tumblr.com/

Just like private variables, private methods have always been possibly in JavaScript though there syntax is even more cumbersome:

function Car(name, hp) { function getSecret() { return 'test 1'; } this.name = name; this.hp = hp; // Note this will not appear in inherited copies of this object. this.print = function() { console.log(`${this.name} (${this.hp}) - secret: ${getSecret()}`); } } const miata = new Car('miata', 155); console.log(miata.name); // miata console.log(miata.hp); // 155 console.log(miata.getSecret); // undefined miata.print(); // miata (155) - secret: test1

In other words functions only available in a scope no longer accessible need to be referenced. Unlike with private class fields, there is no direct equivalent to using # in modern browsers like this documentation describes. Though something very similar can be done:

class Car { #getSecret = function() { return 'test 1'; } constructor(name, hp) { this.name = name; this.hp = hp; } print() { console.log(`${this.name} (${this.hp}) - secret: ${this.#getSecret()}`); } } const miata = new Car('miata', 155); console.log(miata2.name); // miata console.log(miata2.hp); // 155 console.log(miata.getSecret); // undefined miata2.print(); // miata (155) - secret: test1

Basically, just use a private class field and assign a function to it directly. That function even has access to the current class this as long as a normal function is used and not an arrow function. Since this uses a private field, this is currently supported in Node.js 12 and Chrome by default. It will likely be in other browsers soon since it is now part of the JS standard.

If the below code blocks do not show up properly due to a recent Tumblr change. View them directly at https://obscurejavascript.tumblr.com/

new.target is a property of an object corresponding to the current instance scope. This is useful to check whether an object was created with new or not. Firstly, not instantiating with new can have confusing outcomes:

'use strict'; function Car() { return this; } Car.prototype.setName = function(name) { this.name = name; }; Car.prototype.getName = function() { return this.name; }; const miata = new Car(); miata.setName('miata'); console.log(miata.getName()); // miata const ferrari = Car(); ferrari.setName('ferrari'); // TypeError: Cannot read property 'setName' of undefined

Basically, when not using new the class function is called like a normal function and does not instantiate an object. So this is undefined. If the return is removed, the result will still be the same since using new will always return an instance of an object.

Anyways, I did not use the new class syntax deliberately. When it is used instead an error will be thrown when Car is called without using new:

class Car { setName(name) { this.name = name; } getName() { return this.name; } } const miata = new Car(); miata.setName('miata'); console.log(miata.getName()); // miata const ferrari = Car(); // TypeError: Class constructor Car cannot be invoked without 'new'

Which is one reason to use the new syntax. But in some cases you will encounter legacy code not in the class syntax that may need to be used that cannot be refactored easily (e.g. complex logic with no tests). So new.target can be used to add that much less confusing class error message without having to convert everything:

function Car() { if (!new.target) { throw(new TypeError("Class constructor Car cannot be invoked without 'new'")); } } Car.prototype.setName = function(name) { this.name = name; }; Car.prototype.getName = function() { return this.name; }; const miata = new Car(); miata.setName('miata'); console.log(miata.getName()); // miata const ferrari = Car(); // TypeError: Class constructor Car cannot be invoked without 'new'

This way JS provides a way of replicating the more strict nature of the class syntax while maintaining strict backwards compatability with the old function syntax based class creation.

Unfortunately, since this is undefined in the above case when called without new the name of the class cannot be automatically determined. So it must be manually given for each legacy syntax class this is done for.

new.target works in all modern browsers

Sometimes when defining very similar objects, it can make sense to generate them all at once. For example here is how 3 classes of similar functions can be generated from an array and a single class definitions:

const classTypes = ['A', 'B', 'C']; for (let type of classTypes) { global[`class${type}`] = class { [`describe${type}`]() { return `A class of type ${type}`; }; } } const objA = new classA(); console.log(objA.describeA()); // A class of type A const objB = new classB(); console.log(objB.describeB()); // A class of type B const objC = new classC(); console.log(objC.describeC()); // A class of type C

global should be whatever the top level value (or object) that you want to attach the classes too. So window for browsers. In most cases, method names would remain the same across all classes, but I wanted to demonstrate that like everything else, those can have a unique name directly input.

I could not find a direct compatibility table of the support for those dynamic method names, only general support tables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions#Browser_compatibility). So instead I verified the above works manually with window in the latest Chrome, Firefox, Safari and MS Edge in addition to Node 10+ with global.

One part of JavaScript that flew by me last year was that static methods for classes finally have wide browser support. This makes the syntax for methods called on a class object itself instead of instantiated version of it much more obvious. Here is what it looked like before:

class Money { constructor(value) { this.baseValue = value; } toString() { const rounded = Math.round(this.baseValue * 100) / 100; // For example purposes, no internationalization is done return `$${rounded}`; } // This value will be used in any calculation valueOf() { return this.baseValue; } } // Static method Money.subtract = function subtract(money1, money2) { return new Money(money1 - money2); }; const revenue = new Money(2145.2267); const costs = new Money(1000); console.log(`Revenue: ${revenue}`); // $2145.23 console.log(`Costs: ${costs}`); // $1000 console.log(`Profit: ${Money.subtract(revenue, costs)}`); // Profit: $1145.23

Note how valueOf makes the calculations easier. If you are unfamiliar with that, you can checkout my post on that. Anyways, with the static keyword, that can now be moved directly into the class:

class Money { constructor(value) { this.baseValue = value; } toString() { const rounded = Math.round(this.baseValue * 100) / 100; // For example purposes, no internationalization is done return `$${rounded}`; } // This value will be used in any calculation valueOf() { return this.baseValue; } static subtract(money1, money2) { return new Money(money1 - money2); } }

For certain objects preventing modification is very important. For example, with error message ids. In my last post I talked about patterns to prevent duplicates, this post focuses on preventing any modifications to an object once constructed.

Firstly, to prevent reassignment (generally less important) just use const:

const errorMessageIds = {};

Though it is the modification of the object keys and values that is the main concern. Object.seal will make the object read only except for property values which can be edited:

const obj = { property1: 'value1', property2: 'value2', property3: 'value3' }; const sealedObj = Object.seal(obj); // Errors are only ignored for demonstration purposes. try { delete sealedObj.property1; } catch (e) { console.log(e); } // TypeError: Cannot delete property 'property1' of #<object> .... try { sealedObj.property4 = 'value4'; } catch (e) { console.log(e); } // TypeError: Cannot add property property4, object is not extensible sealedObj.property3 = 'value3 EDITED'; console.info(sealedObj); // { property1: 'value2', // property2: 'value2', // property3: 'value3 EDITED' }

Object.freeze does the same, but does not allow properties to be edited. Which is why this one will be used in almost all cases of making an object immutable:

const frozenObj = Object.freeze(obj); try { frozenObj.property1 = 'value2'; } catch (e) { console.log(e); } // TypeError: Cannot assign to read only property 'property1' of object '#<object>' ...

The class syntax is just a syntactic helper to reduce the amount of boilerplate in JavaScript when using class like patterns. Unlike some other ES6 features, it does not introduce new functionality. Firstly, here is how to simulate an object that is generated from another without the keyword:

function Api(location) { this.location = location; // When the function is explicity named, easier to follow stack traces are given. this.run = function run(callback) { const data = { '/location1': ['location1', 'data'], '/location2': ['/ocation2', 'data'] }; setTimeout(() => { this.onDataRecieved(data[this.location], callback) }, 500); }; this.onDataRecieved = function onDataRecieved(data, callback) { callback(data); }; } const location1Api = new Api('/location1'); location1Api.run(function(data) { console.log('Retrieved: ', data); // Retrieved: [ 'location1', 'data' ] });

This works, but takes quite a bit of manual work in the Api class definition. For example every function is defined with a long assignment that uses the name twice because named functions give better stack traces. There is also nothing direct in the syntax that indicates this is a class instead of a normal function; You have to actually read through the code.

Classes do the same thing as the above, but reduce a lot of syntax:

class Api { constructor(location) { this.location = location; } run(callback) { const data = { '/location1': ['location1', 'data'], '/location2': ['/ocation2', 'data'] }; setTimeout(() => { this.onDataRecieved(data[this.location], callback) }, 500); } onDataRecieved(data, callback) { callback(data); }; }

Unlike a Function Declaration, classes are not hoisted to the top of the file before running. Other than that, the class keyword is literally just a syntax shortener for the previous way of defining classes in JavaScript. For example, since class is actually just a type of instantiable object like functions are, properties can be attached to it. This is the equivalent of static properties in other languages:

Api.myClassProperty = 'test';

ES6 Classes now have standard support across all modern browsers (except IE 11), so transpilers usually do not need to be used for them in most situations.