Teach ramda

100%

✓ Published0🌍 Public

Last edited Mar 18, 2016

Created on Mar 18, 2016

This example contrasts two refactorings of the same state-update logic in JavaScript, both using the Ramda library to remove an attribute from a matching object in an array. The first script composes functions like `findIndex`, `propEq`, and `adjust` to locate an object by ID and apply `dissocPath` to delete a nested field. The second script uses `R.when` with `R.propEq` and `R.dissoc` to achieve the same result, then verifies equality with `R.equals`. The code shows how Ramda’s declarative helpers replace manual `map` and `slice` iterations for immutable updates.

AI-generated description

Similar vizzes

Loading thumbnail…

Eloquent JS: Chapter 4 (take 3)

This example demonstrates solutions to the Chapter 4 exercises from *Eloquent JavaScript*, covering range, sum, array reversal, list conversion, and deep comparison. It shows the implementation of functions like `range`, `sum`, `reverseArray`, `arrayToList`, and `deepEqual`, with expected outputs logged via `console.log`. The page uses plain HTML, CSS, and JavaScript without external libraries, rendering results in the browser console rather than as visual graphics. The code highlights recursive approaches, step handling, and in-place array mutation, with a note that the deep comparison exercise was not fully solved.

Eemberix@gmail.com

58% match

Loading thumbnail…

Eloquent JS: Chapter 5

This example displays the output of four JavaScript exercises from Chapter 5 of Eloquent JavaScript, all run in the browser console. It shows array flattening using `reduce`, a custom `loop` function, an `every` predicate implementation with `filter`, and a `dominantDirection` function that uses `countBy` and `characterScript` to classify text direction. The code relies on the standard JavaScript array methods and the predefined `SCRIPTS` dataset. The page renders only static text and styled body text via CSS, with results logged to the console.

Eemberix@gmail.com

57% match

Loading thumbnail…

using reduce for updating nested object vs destructuring

This example contrasts two JavaScript techniques for updating a nested object in response to user interaction, using a simple bar chart built with D3.js. It shows a `reduce` method that iteratively rebuilds the object and a destructuring approach that spreads the previous state, both updating a count property. The data is a small hardcoded array of items, and clicking a button triggers the update, with the resulting chart rendered as SVG rectangles. The visualization highlights the syntactic and structural differences between the two state-management patterns.

66ewis

57% match

Loading thumbnail…

Ramda Title Case

This example demonstrates how to build a text-transformation pipeline using the Ramda functional library, converting a plain string into title case. The visualization shows the step-by-step composition of small, reusable functions, starting with splitting the input on spaces. The code defines a `capitalize` function using `R.converge` to concatenate an uppercased first character with the remaining tail, and then composes a `toTitleCase` function with `R.compose`, `R.join`, and `R.map`. The entire transformation is expressed through pure function composition rather than imperative loops.

66ewis

57% 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…

Eloquent JS: Chapter 4 (take 2)

This example shows the console output from solving several exercises from Chapter 4 of Eloquent JavaScript, focusing on array manipulation functions. The code defines and tests a `range` function that generates numeric arrays, a `sum` function that totals array values, and two reversal functions: `reverseArray` which creates a new reversed array using `unshift`, and `reverseArrayInPlace` which mutates the original array by repeatedly unshifting elements. Written in vanilla JavaScript with no external libraries, the page uses `console.log` to print intermediate results and styled text via CSS.

Eemberix@gmail.com

56% 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

56% match

Loading thumbnail…

arrays

This example demonstrates fundamental JavaScript array operations through console logging, including iteration, filtering, sorting, mapping, and reducing. It shows a custom `range` function, a sorting comparator for numbers, and how to build objects from array entries using `reduce`. The code imports `ascending` and `descending` from D3 to illustrate library-based sorting, and relies on D3 version 7.3.0 for these utilities. The visualization itself is minimal—a single HTML page with a large styled message—while the core content lives in the script’s output.

SSamuele Greco

55% match