eph baum dot dev

← Back to blog

Array.prototype.diff()

Published on 06/29/2014 07:30 PM by Eph Baum

Update - 23 August 2014

A little mea culpa follow up here… I had to write a follow-up post that corrects something I missed here… check it out.

Original article continues

Sometimes in the day to day you find some problem that is just fun to try to solve without a Google (Stack Overflow) search.

Recently the problem I needed to solve was this:

I have a list of ‘feed’ items on a page where a long poll is watching for new ‘feed’ items to add to the DOM. In this case, really, all I want to do is highlight ANY feed item that is newly shown with a green highlight which then fades away.

In this case what I decided to do was ‘diff’ an array of ‘feed’ ids that have already been displayed with an array of ids that represents the items coming from the server. With a fixed number of items on both sides, 20, I know that I need to highlight anything that is new. It seemed to me that simply comparing the two arrays gives me the ids that I need to work with.

Here was my solution:

Array.prototype.diff = function( arr ) { 
  return this.filter( 
    function( val ) { 
      return arr.indexOf( val ) < 0; 
    }); 
};

Essentially what we’re doing here is taking an Array and filtering it with the value of an element of another Array and spitting a new Array back out that tells me exactly what is different.

By way of example:

var index = [ 14, 15, 16, 21, 28 ],
    newIndex = [ 15, 16, 21, 28, 29 ]; 
    
var diffIndex = index.diff( newIndex ); 

console.log( diffIndex ); 

> [ 29] 

var index2 = [ 1, 2, 3, '<3' ], 
    newIndex2 = [ 1, 2, 3 ]; 
    
diffIndex2 = index2.diff( newIndex2 ); 

console.log( diffIndex2 );

> ['<3']

Did my example have to log out as less than three? Of course it did.

Written by Eph Baum

  • Making Brutalist Design Accessible: A Journey in WCAG AA Compliance

    Making Brutalist Design Accessible: A Journey in WCAG AA Compliance

    How I transformed my brutalist blog theme to meet WCAG AA accessibility standards while preserving its vibrant, random aesthetic. Talking about contrast ratios, color theory, and inclusive design.

  • Building Horror Movie Season: A Journey in AI-Augmented Development

    Building Horror Movie Season: A Journey in AI-Augmented Development

    How I built a production web app primarily through 'vibe coding' with Claude, and what it taught me about the future of software development. A deep dive into AI-augmented development, the Horror Movie Season app, and reflections on the evolving role of engineers in the age of LLMs.

  • Chaos Engineering: Building Resiliency in Ourselves and Our Systems

    Chaos Engineering: Building Resiliency in Ourselves and Our Systems

    Chaos Engineering isn't just about breaking systems — it's about building resilient teams, processes, and cultures. Learn how deliberate practice strengthens both technical and human architecture, and discover "Eph's Law": If a single engineer can bring down production, the failure isn't theirs — it's the process.

  • Using LLMs to Audit and Clean Up Your Codebase: A Real-World Example

    Using LLMs to Audit and Clean Up Your Codebase: A Real-World Example

    How I used an LLM to systematically audit and remove 228 unused image files from my legacy dev blog repository, saving hours of manual work and demonstrating the practical value of AI-assisted development.

  • Migrating from Ghost CMS to Astro: A Complete Journey

    Migrating from Ghost CMS to Astro: A Complete Journey

    The complete 2-year journey of migrating from Ghost CMS to Astro—from initial script development in October 2023 to final completion in October 2025. Documents the blog's 11-year evolution, custom backup conversion script, image restoration process, and the intensive 4-day development sprint. Includes honest insights about how a few days of actual work got spread across two years due to life priorities.

  • 50 Stars - Puzzle Solver (of Little Renown)

    50 Stars - Puzzle Solver (of Little Renown)

    From coding puzzle dropout to 50-star champion—discover how AI became the ultimate coding partner for completing Advent of Code 2023. A celebration of persistence, imposter syndrome, and the surprising ways generative AI can help you level up your problem-solving game.