rpivo

When to Use React.PureComponent

If you've used React, then you're going to be familiar with React.Component. It's probably what you're extending every time you create a new stateful component. Here's a class component that does just that:

App.js

import React from 'react';

export default class Parent extends React.Component {
 constructor(props) {

rpivo

Properties of Objects and Their Prototypes

In JavaScript, there is a bit of a mixture between utility methods and enums existing as inherited prototype properties as opposed to utility methods and enums that only exist on the built-in object itself.

For example, Date is a constructable object, but constructed Date instances that inherit the built-in Date prototype object's properties will not have the now property. The now property only exists on (and is only callable from) the global Date object.

const aNewDate = new Date()

Date.now() // fine

rpivo

rpivo

Creating an Object Access Logger With Proxy and Reflect

You can create an access log for a specific object using Proxy and Reflect, which can keep track of all getting and setting of properties on the object.

Proxy is pretty crucial for this pattern, and although it's not necessary to use Reflect in this specific example, Proxy and Reflect were introduced to ECMAScript together and share many methods that complement each other (Proxy.get/Reflect.get, Proxy.apply/Reflect.apply, Proxy.construct/Reflect.construct, etc).

This is a really powerful pattern, and access logging is just one possible use case.

const obj = new Proxy({

rpivo

Measuring Performance of Decimal Truncation Methods

The following operations all result in 2:

// fast, and the least amount of characters
~~2.5

// fast
2.5 | 0

rpivo

Inheritance: Classes vs Functions

The code snippet at the end of this gist shows a three-way inheritance scenario for both classes and functions.

Function example: A inherits from B, which inherits from C
Class example: D inherits from E, which inherits from F

Function A and class D should each have all inherited properties from their respective inheritance chains.

The function example below requires roughly 70% less characters than the class example.

rpivo

Binary, Hexadecimal, & Octal Numbers in JS

// these are safe to use in strict mode
'use strict'

/*
 binary
 preceded by 0b
 string sequence of 0s and 1s

rpivo

Exploring Uniqueness in Symbols

You can make symbols out of pretty much anything.

const str = 'foo'
const num = 1
const bool = true
const arr = []
const obj = {}

rpivo

Hoisting Imports & Exports

There is a common misconception that hoisting means declarations are hoisted or brought to the top of the file, and are therefore available to be used anywhere in the module, but this interesting snippet from MDN says otherwise:

Conceptually [...] a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

With these declarations already in memory, we can use them anywhere in the module, including when importing code, which allows us to declare imports and exports pretty much anywhere (note that I'm not sure why you would want to make a habit out of this, but it's possible to do so):

index.mjs

rpivo

Numeric Separators in JavaScript

You can break up big numbers in JavaScript with the numeric separator _.

const difficultToReadTrillion = 1000000000000 // oof
const easyOnTheEyesTrillion = 1_000_000_000_000 // no problem