Obscure JavaScript Examples

Code from obscurejavascript.tumblr.com in an easy to download format. All of the code can be run in Node.js and most of it in a browser (what can't is noted below). A few posts require libraries and these are found in the node_modules folder and are specified by packages.json. This is a standard NPM layout.

Just like the blog, there may be some examples that do not good follow JavaScript patterns for demonstration purposes.

Example Explanations

Each example corresponds directly to a blog post:

2020

• collector.js: How to convert class specific functions into general ones without modifying the original functions or copying any code.
• immutable.js: How to make objects with objects and related immutable.
• in.js: How to check for property existence in a consistent way.
• newTarget.js: What new.target is and why it can be useful.
• nullishOperator.js: Using a new operator to make default checks handle edge cases while still keeping them simple.
• optionalChaining: How to quickly use deep property lookups without triggering errors with a simple syntax.
• optionalFunctionCalls: The new syntax to make a function call only if the property is callable.
• promiseRace.js: How to get the fastest returned API result or error with Promise.race and a simple example Polyfill for it.
• privateVariables.js: The new syntax of JavaScript private variables compared to the old one.
• privateMethods.js: The new syntax of JavaScript private methods compared to the old one leveraging the new private class field support.
• publicInstanceFields.js: Initialize class fields without constructors.
• uniqBy.js: How to create unique arrays based on a condition in one line with a helper function.

2019

• allSettled.js: Creating a Promise.allSettled function that only is fulfilled once all promises run even if there are errors.
• ansiColors.js: How to use ANSI codes to format CLI text and provide simple UIs like dynamic loading screens. Node.js Only
• backendImports.mjs: How to do backend imports in Node.js. Node.js Only
• capitalizeSentence.js: Capitalizing sentences instead of just one word with Lodash.
• changeObjKeys.js: How to make a function to transform object keys to values in an array of objects.
• classStatic.js: The new way of declaring static methods in classes.
• clearAllTimeouts.js: Two tactics to clear all timeouts globally in an application.
• compact.js: Using a compact function that eliminates falsy values in an array to simplify logic in compination with arrays.
• consoleStringSubstitute.js: Using console.log's built in formatters and inspector to help with debugging.
• decimalOperations.js: How decimals operations can be computed correctly.
• defaultValuesObjectParams.js: How default values can be used for functions taking a single object as configuration instead of a bunch of arguments.
• exponent.js: A specific syntax for exponents.
• invert.js: Inverting keys and values for dual purpose lookup objects.
• keyBy.js: A function to transform arrays of objects into key value pairs for fast searching.
• mapObject.js: The various ways of mapping JavaScript objects.
• metaClass.js: How to automate the construction of JS classes.
• promiseAny.js: How to get the fastest returned API result with Promise.any and a simple example Polyfill for it.
• replayFunction.js: How to recall functions with the last arguments without external variables or libraries.
• spreadArrayAdditions.js: Merging arrays with the spread operator.
• strict.js: An example of why adding 'use strict' to legacy code can cause bugs.
• stringRepeat.js: How String.repeat can be used to easily create nicely formatted console messages.
• swap.js: How to swap variables or parts of data structures without temporary variables using assignment destructuring.
• times.js: How a simple repeater function that accepts a function can be used to simplify nested loops.
• urlObj.js: How the URL object can be used to greatly simplify URL string operations.
• varUsage.js: An explanation of why var is still necessary in some cases even though let exists.
• watchProperties.js: How to watch JS object property changes with code for debugging.

2018

• addCSSRule.js: An example of adding CSS rules directly via JavaScript to reduce DOM manipulations. Browser Only
• arrayDelete.js: The most common ways of doing Array deletes in JavaScript along with the advantages/disadvantages of doing each.
• async.js: How the async function declarations can simplify async code. Node 8+/Modern browsers only
• asyncAndIf.js: How the async helps with conditional logic in asynchronous requests.
• asyncAndLoops.js: How the async function can be used in loops.
• asyncHooks.js: How to track all async operations in Node.js without altering the original code. Node 8+ only
• autoReloadTester.js: The file used to demonstrate automatic script reloading without a framework for backend code. Node.js Only
• checkLocalStorageMemory.js: How to check the current webpage local storage usage programmatically.
• classInheritance.js: How the class syntax simplifies inheritance
• clearArraySameReference.js: How to clear an array and keep the same reference.
• computedPropertyNames.js: Examples of how Object Literal Computer Property Names can be useful.
• conformsTo.js: A generic way to do structured object validation.
• console.js: The most useful ways the JS console can be used (beyond simple string logging)
• countBy.js: Generic counting via a simple callback pattern.
• customArrayOrder.js: How JavaScript's simple object construction and array usage combine to make a very simple custom ordering algorithm.
• customIterable.js: How custom Iterables are implemented in JavaScript.
• deepFlatten.js: How to implement deep array flattening in JavaScript.
• destructParams.js: How destructuring can be used for function parameters to simplify multi value callback returns.
• duplicateKeyChecks.js: An easy tactic to do duplicate key checks in JS and how to extend that to do duplicate format checks.
• eNotation.js: JavaScript's Exponential Notation and how it makes reading and working with very large or very small numbers much easier.
• es6Class.js: A comparison of classes with and without the class keyword in JavaScript.
• externalLoopExtraction.js: How to extract features in a function that has a loop with passing in a callback.
• functionName.js: How to get class and function names in JavaScript which is useful for debugging and exploring 3rd party libraries.
• getFirstKey.js: A quick an efficient way to get the first key of an object in JavaScript.
• getValue.js: How to get values from complex objects quickly and safely.
• iifeReplace.js: When and how IIFEs can be replaced by a simple block scope.
• intersection.js: How to discover common array elements across arrays with objects.
• intl.js: Formatting numbers in JavaScript via the native Intl object.
• lockObject.js: The 2 ways of locking objects in JavaScript.
• lookupTable.js: A simple lookup table used to reduce large nested loop performance issues.
• lookupTableAbstracted.js: How to abstract the lookup table creation
• mathMax.js: Math.max and how it can be used to simplify algorithms.
• memoize.js: How to memoize any function in JavaScript that is determined solely based on its parameters.
• naturalStringSort.js: A simple way to implement natural looking string sorts.
• nodeEnvironmentVariables.js: Single setting and config files with Node.js environment variables.
• noDeletion.js: When variables cannot be removed in JS.
• once.js: Restricting function calls to once.
• orderBy.js: Generic multi-property ordering in JavaScript.
• parallelAsyncAwait.js: How promises can work with parallel async calls.
• rounding.js: How toFixed can be used to implement rounding and its other uses.
• setObject.js: How to create objects from property paths.
• size.js: A generic way to find the size of multiple types.
• stringNormalize.js: How to deal with string characters that only appear as one character, but count as 2.
• jsShorthand.js: Shorthand conversion syntaxes and the slightly longer and more consistent versions of them.
• sleep.js: How to create a non-callback function for doing arbitrary waiting.
• spreadArgs.js: How the spread operator can be used to simplify dynamic function calls.
• taggedStringReplace.js: The second argument of String.indexOf and how it is useful beyond performance optimization.
• uniqify.js: A simple one line method to make arrays unique without libraries.
• valueOf.js: How any object can act like a number via the valueOf property. Newer syntax added since the 2017 post and a much better introduction.
• zipObject.js: How Zip Object works and why it is useful for debugging.

2017

• arrayFrom.js: Array.from and how it simplifies multiple types of array conversions.
• arrayMove.js: Move elements in arrays without having to create lots of variables and logic.
• callBind.js: How call and bind can be used to make this based functions easier to work with and can make them borrowable.
• circularReferenceA.js: How Node.js shows circular references and strategies to deal with them. Node.js Only
• conditionalToHash.js: Simplify and automating logic with hashes.
• constructor.js: How the constructor property in ever JS object is useful.
• defaultFunctionParameters.js: How specifying parameter defaults for functions can significantly reduce needed syntax.
• destructuringAssignment.js: Assigning to multiple variables by mapping directly to an object.
• findAsyncInOrder.js: A quick pattern to find a set of async items that can be easily switched to other forms.
• findIndex.js: How findIndex can be useful compared to find functions in some cases.
• fluentInterface.js: An explanation of fluent interfaces and how repeater methods can be added to them.
• forOf.js: What for...of loops are.
• getterSetterAutomation.js: How to automate getters and setters for functions.
• getterIssue.js: How assignment operations in JavaScript can fail due to assignment operation overwrites.
• hasDecimals.js: A quick way to check for decimals for all types.
• infinity.js: Infinity and JS calculation error handling.
• import.js: How the ES6 import and export statements work. Browser Only
• jsonsExtraCharacters.js: How JSON supporting extra characters can mess with JavaScript. JSFiddle here: https://jsfiddle.net/jacobfriesen/cxgv37x4/1/
• letAndConstUsage.js: When to use let and const in JS.
• makeImmutable.js: How to make any object in JavaScript immutable.
• mapObject.js: An example of the Map object and how it can be useful compared to plain objects
• nodeExec.js Executing external system commands in Node.js. Node.js Only
• newImplementation.js: Demonstrating how new works with a polyfill-like implementation.
• notification.js: Demonstrating the Notification API. Browser Only
• observable1.js: A demonstration of Observable API simplification with a click event. Event is simulated in Node.js.
• observable2.js: A demonstration of Observable API abstraction centered around click events. Extented from observable1.js. Browser Only
• partialModuleImports.js: The syntax of the new style of module imports in ES6 and how they can be reduced to standard ES6 syntax. Node.js Only
• preciseAnimations.js: How to make JS animations precise via self adjusting timers. Browser Only
• protoVsPrototype.js: The difference between __proto__ and prototype and their usage.
• promiseAll.js: Easily managing multiple concurrent async requests using Promise.all.
• promisify.js: How util.promisify can be used to transform async functions into promises.
• reflect.js: How the ES6 Reflect API can be used as a single interface for many general JS operations.
• replaceThisParameter.js: How to transform this based interfaces into parameter-only ones. The tactic works in any environment, but the examples are Browser only.
• restProperties.js: How Rest Properties can be used to simply object operations Node 8+.
• regex.js: A demonstration of simple regex expressions and combining them.
• removeWhitespace.js: A demonstration of quick whitespace replacing.
• ruby.js: How close to Ruby syntax JS can get without parsing a source string. Technically, Node.js only, but just replace global with window and it will work with very modern browsers.
• setObject.js: How the set object can be useful.
• splitLimit.js: Split and the usefulness of the limit property.
• spread.js: The spread syntax in JavaScript and how it simplifies function cals and array operations.
• templateLiteral.js: An easier way of doing multiple line strings are replaces.
• throw.js: Examples of throws, Error based objects and how they relate to stack traces.
• typeCoercion.js: When automatic type coercion can make code more readable.
• unique.js: How simple unique value checking is implemented in JavaScript including with a callback.
• valueOf.js: How to specify an Objects value when used in numeric operations and how it can be useful.
• webWorker.js: A simple example of how Web Workers make interfaces responsive when doing complex operations. Browser Only

2016

• applyApiCalls.js: How Array.apply can be used as a general pattern to add more functionality to base API calls.

• assignTo.js: A function to drastically reduce syntax for asynchronous object property updates.

• at.js: A function to reduce the time to get values from potentially empty deep objects.

• attempt.js: A function to simplify try and catch. See the corresponding blog post for why this is useful.

• bitwise.js A simple example of when bitwise operations can lead to large performance advantages.

• callLater.js: A function to store functions to be called later.

• callbackWith.js: A way to simplify unit tests by making a function that provides a quick way to mock out functions that call calbacks. Also includes an argsAtSync utility.

• compose.js: A function used to simplify sequences of functions.

• curry.js: A function that only gets called when passed all arguments otherwise it returns a curry.

• extendLodash.js: How to extend Lodash with details for chaining and how it is used across imports.

• flatMap.js: A map function that allows multiple values or no values to be returned for each array element. Allows returns that are shorter than the original array.

• functionToString.js: About the Function.toString method and how it can be used for debugging and function regeneration.

• generator.js: How to significantly reduce the number of callbacks for asynchronous operations by using generators.

• getPagePosition.js: How to get an HTML elements position in the page no matter where it is. Browser Only

• getters.js: Getters and Setters similar to other Object Oriented Languages in JavaScript.

• groupBy.js: An array of object grouping function and what it can be applied to.

• identity.js: How the identity function can be useful.

• intersection.js: A function that returns the common elements of 2 array, gives an example of where this is useful.

• is.js: How a function to check object type is useful.

• objectTypeAndEquality.js: When objects with identical properties and printouts are not equal.

• observable.js: How to treat data that arrives over time in an array like fashion.

• [objectFreeze.js]((http://obscurejavascript.tumblr.com/post/152213315637/constants-and-objectfreeze-in-javascript): How to use const and Object.freeze to create completely immutable objects.

• objOf.js: A shorthand way to create objects with dynamic property names in pre-es6 JavaScript.

• oneLineForLoop.js: An explanation of for loop structure by using one line for loops only.

• mapJoin.js: Using the abstraction of splitting then mapping then joining to simplify string set manipulation.

• mapValues.js: Object traversal operations (mapValue and mapKeys) that iterate through objects like Array.map.

• maxDate.js: Using one line of code to find the maximum date.

• negate.js: How a simple closure based negate function can simplify code.

• mixins.js: A simple way to implement mixins in JavaScript.

• nonMutatedLists.js: A simple way to make list operations not mutate their lists.

• multiLineJoinString.js: Less cumbersome syntax for multi-line strings in ES5 or less environments.

• lazyObject.js: Creating objects that can create more objects or can just be used with no instantiation.

• propertyMap.js: A function to group properties from a set of objects. Also has a tactic to avoid array.push in maps.

• proxy.js: How to change JavaScript syntax on given objects via the Proxy API.

• proxyNumberValidation.js: How to implement JS type checking without setters by using the Proxy API.

• publishSubscribeAutomation.js: How to use an abstracted publisher to implement more advanced publish-subscribe patterns.

• replace3rdArg.js: How to use the little known ability of String.replace to accept callbacks.

• returnWrap.js: How a return wrapper function can be used to merge objects that chain.

• reverseLater.js: Return a function that calls the passed in callback with reversed arguments.

• sealAndPreventExtensions.js: The difference between the various methods to make objects constant in JavaScript.

• selfRegeneration.js: How an object can regenerate itself. This is useful when the object constructor is lost.

• seriesGeneration.js: Simplifying series generation via Functional Programming principles.

• stoppingForEachLoops.js: How to stop forEach loops without using an exception and a better strategy.

• stub.js: A simple one function method of stubbing functions including asynchronous ones.

• stringify.js: How to use stringify to pretty print JavaScript objects in a customizable way.

• tap.js: How to use the tap and thru methods to customize chained behavior and make debugging much easier.

• timing.js: The various ways of timing function calls in JavaScript. Starting with the oldest methods.

• quickObj.js: A recursive function to quickly create high depth objects for unit and other tests.

• void.js: Uses of the void keyword. Best understood in conjunction with the blog post in this case.

• zipObj.js: A function that maps a list of keys to a list of values. This shows an example of why that is important.

• argumentParameterBinding.js: A demonstration of a little known arguments object quirk.

• arrowFunctions.js: How to implement arrow functions in pre ES6 JavaScript.

• beforeAndAfter.js: A before function with an extension into an after one.

• bind.js: Bind and an example of it in JavaScript.

• chainify.js: How to build a generic chaining method that can add chaining to any object.

• circularReference.js: Circular references and potential issues with them. Does not go into all the details, more of an overview.

• circularReferencePositives.js: Positives of circular references.

• class.js: Classes in ES6 and how to create a close equivalent.

• clone.js: How to deep copy objects in JavaScript.

• const.js: The const keyword in ES6 and how to create a close equivalent.

• debounce.js: Create a wrappped function so that the function it wraps is only called after it stops being triggered every n milliseconds.

• defer.js: Run a function after all processing is done in the current callstack.

• dependencyInversion.js: Screwed up the monad post. So just the dependency inversion part will be kept.

• floatingPointArithmetic.js: A simple algorithm strategy for reliably calculating decimal based numbers.

• flow.js: This is used to string functions that use each others results in a chain.

• functionDecompilation.js: Function decompilation, Angular.js and simplified dependency injector for it.

• functionExpressionProperties.js: How properties on object can be used to simplify code. Specifically, with named Function Expressions.

• generator.js: How to implement a relatively close equivalent of generators in pre ES6 JavaScript.

• genericChaining.js: An explanation of a simple generic pattern for creating chainable objects.

• interatedAsyncCalls.js: How to solve a seemingly wierd issue while passing state to multiple asynchronous calls in JavaScript.

• iterator.js: A simple implementation of the ES6 iterator abstraction in non ES6 JavaScript (without an Iterable implementation).

• lazyFunctionDefinition.js: Caching values without using conditionals. This is useful for calls that need to be made multiple times.

• mapObject.js: An implementation of the map object in ES6 in less than ES6 JavaScript.

• mapOrRemove.js: A function used to filter and modify objects.

• mapsThirdArgument.js: How the 3rd argument in map() can be used to operate on multiple array elements at once.

• memoize.js: A way to automatically cache function calls.

• nonMutatingAssign.js: Showing the implementation of a function similar to Lodash assign and how to not mutate with it.

• oneLineRandomText.js: How to generate short random text codes in JavaScript in one line using no library functions.

• sortsAndNan.js: What NaN return values do to JavaScript's default sort.

• templateStrings.js: Evaluating strings with expressions in JavaScript similar to ES6 templates.

• let.js: The ES6 let statement and how to emulate close aproximations.

• monad.js: Defining a chainable specification of operations.

• multiIf.js: Making complex conditionals more readable by using an expression and chaining conditions.

• multicore.js: Multicore node.js code. Node.js Only

• omit.js: Return an object with properties removed with no side effects.

• primitiveCoercion.js: A brief explanation of automatic primitive coercion in JavaScript.

• promise.js: Create an object that represents future state.

• undefined.js: An explanation of the undefined type.

• repl.js: A REPL of JavaScript in JavaScript using streams. Node.js Only

• server.js: A 4 line http server using connect.js and serve-static.js Node.js Only

• setObject.js: An implementation of the set object in ES6 in less than ES6 JavaScript.

• stream.js: A simple example of streams Node.js Only

• symbol.js: Implementing ES6 Symbols in pre ES6 syntax.

• thisKeyword.js: An attempt of defining all the possible ways that the this context is defined.

• throttle.js: Create a wrappped function so that the function it wraps is called at most every n milliseconds.

• trim.js: The trim string function and polyfills for trimLeft and trimRight.

• typedArray.js: A simple demonstration of the differences between Array and a Typed Array.

• where.js: Code for the JavaScript where function.

• unionAndIntersection.js: Code for the intersection and union array manipulation functions and the unifyling function.

• variableChaining.js: How variable chaining can create globals and how global creation can be avoided.

• zip.js: How to use a function that automatically structures raw array data.

2014

• assign.js: How to use and implement a function that merges objects.
• autoExecutingRecursionFunctions.js: How to create functions that can be called without parenthesis. Or other helpers.
• bracketFreeCall.js: How to create functions that can be called without parenthesis. Or other helpers.
• caseForLinting.js: Example of why linting should be used in JavaScript. See blog post for more info.
• chaiAndParenFree.js: How Chai.js uses bracket (parent) free calls.
• cleanSwitches.js: A cleaner way of long decision branches.
• cleanCallbacks.js: A clean way of ordering JS callbacks using an object.
• comprehensions.js: A quick way to do list operations in JS, list comprehensions. Commonly, used in other scripting languages.
• computedProperties.js: A proposal for computed property literals in JavaScript and how to implement a near equivalent.
• constant.js: How to implement real constants in JavaScript.
• curry.js: How to implement a function that splits a multi argument function into a series of single argument ones.
• date.js: JavaScript date comparions.
• decorators.js: How to implement decorators in JS using closures.
• explicitBooleanConversion.js: Using explicit Boolean conversion to save time.
• fibonacci.rb: A fibonacci sequence in Ruby. Syntax emulated in ruby.js.
• flatten.js: How to write a simple array flattening function.
• fold.js: A useful higher order function explained.
• functionExpressionsVsDeclarations.js: A subtle difference between function expressions and declarations.
• functionalInheritance.js: How functional inheritance works.
• constant.js: An explanation of the potiential issues of not using new for object instantiations and a way to combat it.
• multipleInheritance.js: One way to implement multiple inheritance.
• new.js: The pitfalls of not using new before object initializations and an alternative.
• nodePolyglot.js: How to use Bash in combination with Node.js to make the script executable without a node command across multiple OSs. Node.js Only
• objectInitializerShorthand.js: An implementation of JS.next's object initializer shorthand.
• once.js: An implementation and usage example of a once function.
• pluckAndUnique.js: How pluck and unique functions are
• private.js: Private Variables in JavaScript and their uses.
• prototypalInheritance.js How Prototypal Inheritance works.
• psuedoClassicalInheritance.js How Psuedoclassical Inheritance works.
• range.js: A range operator in JavaScript.
• restParameters.js: Implementing JS.next's rest parameters in vanilla
• ruby.js: A close aproximation to Ruby's syntax in JavaScript.
• rubyMethodSyntax.js: How to use ruby math method like syntax in JS.
• spread.js: JS.next spread and a close alternative.
• stringInterpolation.js: Implementing string interpolation.
• super.js: Implementing super in JavaScript (using functional inheritance).
• superThatIsEfficient.js: Implementing super in JavaScript in a more efficient way. Specifically, using PsuedoClassical Inheritance.
• trackingJSStatistics.js: Building a simple function call tracker.
• toStringFunctionTriggers.js: Calling functions by using the '+' operator.
• withEmulation.js: Emulating the JS with statement via a function.

2013

• arrayInstantiations.js: A compact way to declare pre-initialized arrays in JS.
• batman.js: The weird behavior of Array.join demonstrated.
• chaining.js: Chaining self invoking function calls to shorten code.
• defaults.js: A much better way to do default values in JS.
• erlang.js: Emulating Erlang in JS.
• expressions.js: Using expressions to simplify code in JS.
• functionCallInheritance.js: How Function.call() can be used to create inheritance in JS.
• functionConstructor.js: How the Function constructor works.
• functionDeclerationOperations.js: How function declerations (not just calls) can actually be used in arithmetic operations.
• innerFunctionTesting.js: How to test inner functions in JS.
• metaprogramming.js Using metaprogramming to simplify stuff in JS. Browser Only
• multipleValueChecking.js: A good way to check multiple values at once in JS.
• multipleReturnValues.js: A good way to return multiple variables in JS.
• labeledLoops.js: Did you know that JavaScript has labeled loops?
• listOperatorMagic.js: How to expliot JSs list operator to shorten code.
• obscureIntegers.js You should see it for yourself.
• obscureStrings.js You should see it for yourself.
• overloadingArrayOperators.js: What is possible by overloading array operators in JS. This led me to discover how to run functions paranthesis free. Node.js Only
• overloadingFunctions.js: How to make overridable functions in JS.
• partials.js: How to create partials and some applications.
• perl.js: Emulation perl in JS.
• recursion.js: Recursion without making a recursive call. I'm not joking.
• scheme.js: Emulating scheme in JS.