Safe assignment (?=) alternative for promises

BlobKat — Thu, 22 Aug 2024 18:51:10 +0000

Promise.prototype.safe = function(){
  return this.then(
    res => [null, res],
    err => [err, null]
  );
}

const [err, res] = await fetch("https://blobk.at/").safe()

New post title here...

BlobKat — Fri, 10 Mar 2023 09:19:33 +0000

Write your post content here...

JS prototypes are slow ... ?

BlobKat — Tue, 08 Nov 2022 16:19:25 +0000

On a project I'm working on, I came across a strange requirement (which I'll explain in a bit) and most importantly, it needed to be performant. After some testing I concluded that going with the obvious native faster solution wasn't actually the faster solution...

To best explain the requirement, let's bring in the traditional example of cars

class Car{
  constructor(topSpeed, color, name){
    this.position = 0
    this.topSpeed = topSpeed
    this.color = color
    this.name = name
  }
}
let firstCar = new Car(110, 'red', 'Honda Civic')

Unfortunately, as simple and elegant as this looks, it may not be the best idea. Can you see why? Well when I want to implement logic, the Honda's engine may work differently from a Ford, and so I would be forced to write a really large switch statement for each car type.

No problem! This kind of problem has been addressed before, just create a HondaCivic class that extends the Car class.

class Car{
  constructor(topSpeed, color, name){
    this.position = 0
    this.topSpeed = topSpeed
    this.color = color
    this.name = name
  }
}
class HondaCivic extends Car{
  constructor(color){
    super(110, color, 'Honda Civic')
  }
  startUp(){
    //Logic to start our honda
  }
}

Another problem arises, if we wanted to track 1000+ honda civics, we would have 1000+ times the name 'Honda Civic' in memory, as well as any other properties of the Honda civic family. If you've ever used function-style constructors before, you'd know there's a simple solution to that too:

class Car{
  constructor(color){
    this.position = 0
    this.color = color
  }
}
class HondaCivic extends Car{
  startUp(){
    //...
  }
}
//Instead of defining name & topSpeed on instances
//we define it on the prototype
HondaCivic.prototype.name = 'Honda Civic'
HondaCivic.prototype.topSpeed = 110

let firstCar = new HondaCivic('red')
console.log(firstCar.topSpeed == 110) //true

The big issue

Now let's say we want to test our car around a track

function testCar(car){
  let seconds = 0
  //run car around a 100km track while counting seconds
  while(car.position < 100 * 1000){
    car.position += car.topSpeed
    seconds++
  }
  return seconds
}

Now, don't get me wrong, this function works fine and performs about as good as you can get, or does it?
Let's time how fast js can execute this function

Neat! I'm sure no one would need to race their car 150 million times per second around a track
Let's try adding more cars

class FordMondeo extends Car{...}
FordMondeo.prototype.topSpeed = 120
FordMondeo.prototype.name = 'Ford Mondeo'
class BmwM4 extends Car{...}
...

After we've added 4 cars and we've tested them all, we go back to our Honda civic and run the function again

What??

When we ran our test earlier, we got 156 million ops/s, now we only get 110. What happened?
Earlier, the testCar function was optimized to recieve exclusively HondaCivic objects. Now that we've tested a bunch of more cars, the Javascript engine can no longer be sure what car the function will recieve.
As such, it no longer knows for sure that the car we're testing has the same properties with the same type. But hang on, all the cars we tested did have the same properties and even the same types.
Well, that's the magic of optimizations, we never know for sure what's going on under the hood or why it does something that way. There may be a reason, or it may just be a silly mistake from V8's developers. ¯\(ツ)/¯

The solution

Enough explaining and complaining, is there a way to get around this so fundamental issue?
As it turns out, yeah and it's really simple:

Avoid needing multiple classes: don't use the prototype

What if, instead of creating a new class with different properties & methods, we put them in an object, a CarDefinition that we can attach to each car?

class Car{
  constructor(definition, color){
    this.props = definition
    this.position = 0
    this.color = color
  }
}
const HondaCivic = {name: 'Honda Civic', topSpeed: 110}

let firstCar = new Car(HondaCivic, 'red')
console.log(firstCar.props.topSpeed == 110) //true

Now that we only use 1 class Car for all types of cars, testCar will stay optimized, as it should.
But, you may complain, I don't want to have to access .props every time, I'm a programmer, and programmers are lazy
Don't worry, I got you covered. Let's add some getters for a shortcut

class Car{
  constructor(definition, color){
    this.props = definition
    this.position = 0
    this.color = color
  }
  get topSpeed(){return this.props.topSpeed}
  get name(){return this.props.name}
}
const HondaCivic = {name: 'Honda Civic', topSpeed: 110}

let firstCar = new Car(HondaCivic, 'red')
console.log(firstCar.topSpeed == 110) //true

Now, we can use our object just as before, without having to worry about props

Performance of getters

Now our example seems a bit more complex, we've got an extra object props and every time we want to get a property, we'll actually be implicitly calling the getter trap. Shouldn't this make our code actually much slower than before? Well, turns out here most Javascript engines are actually smart and inline our function.
When a function is inlined, it's basically removed, and replaced with its contents. Javascript will essentially optimize our code to something like this:

class Car{
  constructor(definition, color){
    this.props = definition
    this.position = 0
    this.color = color
  }
  //These 2 functions are "inlined"
  //get topSpeed(){return this.props.topSpeed}
  //get name(){return this.props.name}
}
const HondaCivic = {name: 'Honda Civic', topSpeed: 110}

let firstCar = new Car(HondaCivic, 'red')

let _this = firstCar
//Note how our getter access was replaced with the actual function body
console.log((_this.props.topSpeed) == 110)

Typically, the engine will decide whether or not a function can be inlined depending on how big it is, and what variables it accesses. After some testing, I could confirm that all major browsers will inline our little getter. 👍

Final test

Typical approach

class Car{
  constructor(color){
    this.position = 0
    this.color = color
  }
}
class HondaCivic extends Car{}
HondaCivic.prototype.topSpeed = 110
HondaCivic.prototype.name = 'Honda Civic'
class FordMondeo extends Car{}
FordMondeo.prototype.topSpeed = 120
FordMondeo.prototype.name = 'Ford Mondeo'
class BmwM4 extends Car{}
BmwM4.prototype.topSpeed = 130
BmwM4.prototype.name = 'BMW M4'
class Lamborghini extends Car{}
Lamborghini.prototype.topSpeed = 160
Lamborghini.prototype.name = 'Lamborghini'
class AnotherCar extends Car{}
AnotherCar.prototype.topSpeed = 999
AnotherCar.prototype.name = 'run out of ideas'

let firstCar = new HondaCivic('red')

function testCar(car, trackLength){
  let seconds = 0
  //run car around a 100km track while counting seconds
  while(car.position < trackLength){
    car.position += car.topSpeed
    seconds++
  }
  return seconds
}

testCar(firstCar, 100000)
testCar(new FordMondeo('grey'), 100000)
testCar(new BmwM4('green'), 100000)
testCar(new Lamborghini('blue'), 100000)
testCar(new AnotherCar('white'), 100000)

Test case:

testCar(firstCar,100000)

Result 110-111 million ops/s

Our solution

class Car{
  constructor(definition, color){
    this.props = definition
    this.position = 0
    this.color = color
  }
  get topSpeed(){return this.props.topSpeed}
  get name(){return this.props.name}
}
const HondaCivic = {topSpeed: 110, name: 'Honda Civic'}
const FordMondeo = {topSpeed: 120, name: 'Ford Mondeo'}
const BmwM4 = {topSpeed: 130, name: 'BMW M4'}
const Lamborghini = {topSpeed: 160, name: 'Lamborghini'}
const AnotherCar = {topSpeed: 999, name: 'run out of ideas'}


let firstCar = new Car(HondaCivic, 'red')

function testCar(car, trackLength){
  let seconds = 0
  //run car around a 100km track while counting seconds
  while(car.position < trackLength){
    car.position += car.topSpeed
    seconds++
  }
  return seconds
}

testCar(firstCar, 100000)
testCar(new Car(FordMondeo, 'grey'), 100000)
testCar(new Car(BmwM4, 'green'), 100000)
testCar(new Car(Lamborghini, 'blue'), 100000)
testCar(new Car(AnotherCar, 'white'), 100000)

Test (same):

testCar(firstCar,100000)

Result: 156 million ops/s

DEV Community: BlobKat