Code Monkey home page Code Monkey logo

array.prototype.puresplice's Introduction

array.prototype.pureSplice()

Array method to return a new array with a specified number of elements removed. Unlike JavaScript's native array.splice() method, array.pureSplice does not modify the source array. This is important if immutability of data is important to you and/or you are using libraries such as Redux.

##Issues with JavaScript's native splice() Running the code below, using JavaScript's native .splice() method, the original array is actually modified. This could cause unintended side effects if you're not aware of this behaviour. Also, the .splice() method actually returns an array of the elements that you removed, rather than an array without those elements. Again, this is not that useful, IMHO.

var sourceArray = ["wombat", "koala", "emu", "kookaburra"]
var newArray = sourceArray.splice(1, 1);    // Should return 'koala' as the single item in the new array
console.log(JSON.stringify(newArray)); // ["koala"]
console.log(JSON.stringify(sourceArray)); // ["wombat", "emu", "kookaburra"].

##Using pureSplice()

###Syntax

var newArray = sourceArray.pureSplice(start, deleteCount);

start: index at which you want to start dropping elements. Remember, JavaScript array counts are zero-based, so element 1 is actually the second element in the array.

deleteCount: How many elements you want to drop from the array.

###Example Running the same code below, substituting .pureSplice() for .splice(), returns a new array with the specified elements removed. Crucially, the source array is not changed:

var sourceArray = ["wombat", "koala", "emu", "kookaburra"]
var newArray = sourceArray.pureSplice(1, 1);    // Should remove 'koala' from returned newArray
console.log(JSON.stringify(newArray)); // ["wombat", "emu", "kookaburra"]
console.log(JSON.stringify(sourceArray)); // ["wombat", "koala", "emu", "kookaburra"]

##How to use/install Install from npm with:

npm install --save array.prototype.puresplice

Require or import like so for ES6:

import 'array.prototype.puresplice';

or like this for CommonJS:

require("array.prototype.puresplice");

Don't assign the package to any variable when you import/require it. When imported, the package will add the .pureSplice() method directly to JavaScript's Array.prototype.

The index.js is implemented in UMD format, so should also work for AMD/RequireJS, but I've not tested that. You can also add it as a script tag.

##Development Instructions First run npm install to update the dev dependencies, basically the Babel command line tool and its dependences.

The source code is in the src/getsourcearray.js file, and is in ES2015 (aka ES6) format. Run npm run build to have Babel transpile the code to es5 format to the project's main file, i.e. index.js in the root.

The source code uses ES2015's array spread operator, together with JavaScript's native .slice() method (not to be confused with the .splice() method!). I lifted this idea from one of Dan Abramov's free Redux videos on Egghead.

##Tests Tests are built with mocha + chai. Run with npm test.

Tests check that a new array can be returned from a source array with:

  1. A single element removed in the returned array
  2. The source array remaining unchanged.

array.prototype.puresplice's People

Contributors

brownieboy avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.