Skip to content

Instantly share code, notes, and snippets.

Avatar

Glad Chinda gladchinda

View GitHub Profile
@gladchinda
gladchinda / deep-link-from-browser.js
Created Aug 21, 2021 — forked from diachedelic/deep-link-from-browser.js
Deep link to a native app from a browser, with a fallback
View deep-link-from-browser.js
View jsds-sets-maps-objects.md

JS Data Structures — Maps and Sets

The way, in which data is structured, plays a vital role in being able to efficiently perform certain operations on the data or solve certain problems in relation to the data. For example you can delete any item from a doubly linked list in constant time, whereas that could take linear time if the list is represented as an array. Also, searching for the presence of a key in an array of keys can be done more efficiently (in logarithmic time) when the array is sorted than when not sorted.

Some very popular programming languages like Java and Python provide lots of useful data structure implementations out of the box, as part of their standard library; whereas the ubiquitous "JavaScript" programming language appears to be pretty lean in that regard. However, like most programming languages, JavaScript ships with some very basic data types — such as arrays, strings, objects, sets, maps, etc.

Keyed Collections

Prior to the ECMAScript 2015 specification updates (_

View display-price.js
{
displayPrice: (function() {
const PRICE_CACHE = [];
return function _displayPrice(eventIndex) {
if (!PRICE_CACHE[eventIndex]) {
const tickets = this.ticketsByEvent[eventIndex];
if (tickets && tickets.length > 0) {
tickets.sort((a, b) => a.price - b.price);
View function-initialization.md

Function with one-off initialization

Background

You have been asked to implement a new feature (with JavaScript) for an application that involves fetching some particular kind of data (on demand) from a third-party service — say GitHub profiles of some popular open source contributors. In no time, you were able to come up with a pretty straightforward implementation — a function named fetchGithubProfile with a signature like so: (username: string) => Promise<GithubProfile>.

Later on, you realized that it will be better if the application does not trigger new HTTP requests for profiles that have been fetched before, and so you decided to implement some form of caching — to keep things a bit simple, let's say you decided to use a JavaScript Map with a type like so: Map<string, GithubProfile>.

Initial Implementation

View multiConsumablePromiseFactory.js
function multiConsumablePromiseFactory(getPromiseFn, skipWaitingFn) {
let _this, _promise, _controller, _signal;
function _reset() {
_this = _promise = _controller = _signal = undefined;
}
function _skipWaiting() {
if (_controller instanceof AbortController) {
typeof skipWaitingFn === 'function' && skipWaitingFn.call(_this);
@gladchinda
gladchinda / useObjectState.js
Last active Dec 25, 2020
A custom React hook for managing state as an object.
View useObjectState.js
import { useState, useEffect, useRef, useCallback } from 'react';
const OBJECT_TYPE = '[object Object]';
const $type = Function.prototype.call.bind(Object.prototype.toString);
const $has = Function.prototype.call.bind(Object.prototype.hasOwnProperty);
export default function useObjectState(objectState) {
const mounted = useRef(true);
const [state, setState] = useState(() => {
View checkout-connect-vue.js
/* eslint-disable */
import { createApp } from 'vue';
import { connect } from 'redux-vuex';
import App from './App.vue';
var onCheckoutReady = (function __once__(fn) {
if (typeof fn === 'function') {
let _invoked = false;
View checkout-connect-react.jsx
/* eslint-disable */
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
var onCheckoutReady = (function __once__(fn) {
if (typeof fn === 'function') {
let _invoked = false;
View getValueFromPath.js
function getValueFromPath(object, path) {
const OBJECT_TYPE = '[object Object]';
const $type = Function.prototype.call.bind(Object.prototype.toString);
// Ensure that path is a string, default to an empty string if not provided.
// Replace bracket notation occurrences on path with dot notation.
// Split path (to array) using the `.` delimeter, discard empty elements.
path = (path ? String(path) : String())
.replace(/\[((?:['"])?)([^[\]]*)\1\]/g, function __replacer__($, $$, key) {
return `.${Number(key) || String(key)}`;
View fibonacci_generator.js
// A generator function for generating the first n number(s)
// of the Fibonacci sequence.
// Yields numbers as BigInt.
function* fibonacci(n) {
let i = 0;
n = (Number.isInteger(n) && n > 0) ? n : Infinity;
for (; i < 2 && i < n; i++) {
yield 1n;