null or undefined

100%

null or undefined

✓ Published0🌍 Public

Last edited Sep 24, 2020

Created on Oct 13, 2017

This visualization compares JavaScript’s `null` and `undefined` through code examples, highlighting how destructuring defaults behave differently for each. It shows ES5 and ES6+ patterns where `undefined` triggers default values but `null` does not, and where null causes runtime exceptions without extra guards. The examples reference Douglas Crockford, TypeScript guidelines, and Lodash’s `_.find` to support choosing `undefined` over `null`. The dataset is the code snippets themselves, presented as a markdown document.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 5567358

This visualization demonstrates how SQL handles null values in comparison and assignment operations. It shows the distinct results of various null-checking predicates—including `<=>`, `IS NULL`, `IS NOT NULL`, and `ISNULL`—combined with `IF` logic and the `IFNULL` function. The query executes against a single-row dataset containing the value `1`, then uses `GROUP BY ... WITH ROLLUP` to produce aggregated output, highlighting differences between MySQL’s null-safe equality operator and standard null checks. The gallery example relies on standard SQL execution, with no additional charting or graphics libraries involved.

HHoffmannP

62% match

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring of objects through a side-by-side comparison of original source code and the compiled output. The `index.html` file contains two script blocks: the first shows transpiled ES5 code using `var` declarations and manual property access, while the second shows the original ES6 source with `const` and destructuring assignment. The code logs names from objects to the console, illustrating how ES6 destructuring patterns translate into traditional variable assignments. The visualization uses plain HTML and JavaScript with no external libraries.

AAlsaxian

60% match

Loading thumbnail…

Gist ed016e61300636e5a809

This example presents a JavaScript quiz that tests understanding of type coercion, string concatenation, and array manipulation. The visualization shows a series of code samples with their expected return values and written explanations, demonstrating behaviors like `typeof` returning "number" for `NaN`, string concatenation with numbers, and the effects of `pop()`, `push()`, `unshift()`, `join()`, and `split()`. The data is a static Gist containing plain text code questions and answers, rendered as a linear educational reference. No external libraries or frameworks are used; it relies purely on the raw text structure of the gist.

RRyan-321

58% match

Loading thumbnail…

Untitled

This example demonstrates the results of JavaScript comparison operators on two numeric variables. It shows how the relational operators `==`, `<`, `>`, `!=`, `>=`, and `<=` evaluate to boolean values when applied to `a = 10` and `b = 20`. Each comparison is written to the HTML document using `document.write`, with the output displayed in the browser. The page uses vanilla JavaScript within an HTML script tag, requiring no external libraries or frameworks.

DDebaliena

57% match

Loading thumbnail…

D3 Line - handling null values with .defined()

This example demonstrates how to handle null values in a line chart using D3’s `d3.line()` generator with a `.defined()` filter. The chart renders a single polyline across an SVG canvas, where a missing data point (null) breaks the continuous path into two segments, leaving a gap in the visualization. The code constructs the path data by passing an array of coordinate pairs—including a null entry—to the line generator, then appends the resulting path to the SVG via `d3.select()` and `.attr('d', pathData)`. The stroke is set to a light gray (#ccc) with no fill, and the feature is powered by D3 v7.8.5.

SSubhendu Karmakar

56% match

Loading thumbnail…

Viz - Line - defined

The visualization demonstrates how a line chart can omit undefined data points using a custom defined function. It plots five data pairs, where the point with a NaN value is skipped, causing the line to break rather than interpolate across the missing value. The example uses the viz.js line generator, called via `viz.line()`, with the `.defined()` method checking `!isNaN(d.value)`. The rendering targets an SVG element through D3 v4’s `d3.select("g").call(line)`, producing a single steelblue polyline with gaps where data is invalid.

NNPashaP

56% match

Loading thumbnail…

underscore-d3

This example pairs Underscore.js collection methods with their D3 and vanilla JavaScript equivalents, showing how functions like `each`, `map`, `reduce`, and `sortBy` translate across libraries. It demonstrates D3’s `d3.values`, `d3.entries`, `d3.map`, and `d3.nest` as alternatives for object iteration and grouping, while also highlighting pitfalls like lexicographic sorting and nondeterministic comparators. The code samples use small inline arrays and objects, such as `[1, 2, 3]` and `{one: 1, two: 2, three: 3}`, to illustrate each transformation clearly.

11wheel

56% match

Loading thumbnail…

Babel Interop Defaults might lead to confusion with ES6 Modules and imports/exports

This example shows how Babel’s default interop behavior can make ES6 module imports behave unexpectedly, producing a value where the spec would yield `undefined`. The code defines `export.js` with a default export object, then in `module-b.js` imports a named `x` via `import {x} from './module-a'`. With default Babel settings, `console.log(x)` outputs `8`, because Babel sets both `module.exports` and `exports["default"]`. The example contrasts this with vanilla ES6, where the import would fail, and shows the explicit double export needed for spec-compliant behavior.

RRestuta

56% match