#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/

Sometimes functions in classes are useful beyond just a class. Even if they do not determine their results compeletly based on the arguments passed in, they usually can be extracted. Though sometimes this functionality is too complex and modifying it is too risky, especially in legacy code. Here is a simple example, in a real work scenario the main function would be much more complicated:

class Car { constructor(name, hp, weight) { this.name = name; this.hp = hp; this.weight = weight; this.setPowerToWeightRatio(); } setPowerToWeightRatio() { this.powerRatio = Math.round((this.hp/this.weight) * 100) + '%'; } // Complex functionality that also uses setPowerToWeightRatio() here } const miata = new Car('miata', 155, 2387); console.log(miata.powerRatio); // 6%

Assuming that calculatePowerToWeightRatio cannot be modified since other parts of the code rely on it, then its functionality can still be extracted. By a collecting its this settings and then returning those:

function powerToWeightRatio(hp, weight) { const collector = { hp, weight }; Car.prototype.setPowerToWeightRatio.call(collector); return collector.powerRatio; } console.log(powerToWeightRatio(1000, 1000)); // 100% console.log(powerToWeightRatio(500, 1000)); // 50%

Notice how you do not even need an instantiated object to extract the function. Just having a reference to the class works. I am calling this using a Collector since I could find no reference to this tactic on the internet (probably because it is very niche). So by using a Collector, the setPowerToWeightRatio method can be used across the code in general without having modified the original one or having copied any code.

Finally, it is best to avoid coding in the way of the original class when possible. At the very least, instead of using built in properties it is more flexible to pass in properties. Additionally, if a value is returned instead of set internally, it will make the method much more flexible without much extra work. The above tactic is used to work with legacy code (e.g. large libraries) that you do not have time to modify in the short term.

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.

In JavaScript code, when checking for a property sometimes a truthy check or undefined check is incorrectly used since they work in most cases. For example, for the truthy check (The correct output should only give "other" as false):

let weight; const car = { name: 'miata', hp: 0, weight, }; console.log('Has "name":', car.name ? true : false); // Has "name": true console.log('Has "hp":', car.hp ? true : false); // Has "hp": false console.log('Has "weight":', car.weight ? true : false); // Has "weight": false console.log('Has "other":', car.other ? true : false); // Has "other": false

For the undefined check:

console.log('Has "name":', car.name !== undefined); // Has "name": true console.log('Has "hp":', car.hp !== undefined); // Has "hp": true console.log('Has "weight":', car.weight !== undefined); // Has "weight": false console.log('Has "other":', car.other !== undefined); // Has "other": false

Instead the in operator should be used directly in this case:

console.log('Has "name":', 'name' in car); // Has "name": true console.log('Has "hp":', 'hp' in car); // Has "hp": true console.log('Has "weight":', 'weight' in car); // Has "weight": true console.log('Has "other":', 'other' in car); // Has "other": false

Using in also ensures that property deletion is separated from reassignment. Since the only way to delete a property is to use the delete keyword explicitly:

delete car.hp; console.log('Has "name":', 'name' in car); // Has "name": true console.log('Has "hp":', 'hp' in car); // Has "hp": false console.log('Has "weight":', 'weight' in car); // Has "weight": true console.log('Has "other":', 'other' in car); // Has "other": false

Finally, it is important to keep in mind in will check all properties in an object including ones inherited from parent objects. Usually this is what is intended, but if not the Object.hasOwnProperty() method can be used

Previously, to declare class fields you had to put them in some kind of method in the class (usually the constructor). For example:

class Car { constructor() { this.name = 'Not Set'; this.hp = 0; } format() { return `${this.name} - ${this.hp}`; } } const defaultCar = new Car(); console.log(defaultCar.format()); // Not Set - 0 const miata = new Car(); miata.name = 'miata'; miata.hp = 155; console.log(miata.format()); // miata - 155

With public instance fields the constructor can be removed as well as some of the boilerplate code:

class Car { name = 'Not Set'; hp = 0; format() { return `${this.name} - ${this.hp}`; } }

This makes the type of the field clearer as well as ensuring the core API of the class is defined at the top. This also makes it less liekly to forget to initialize defaults for fields.

Public instance fields are supported in Node.js 12 and the latest Chrome and Firefox. Other modern browser support should come this year.

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.