looppa

Simple functional script to loop array, strings, numbers, objects, Map and Set. Looppa will always returns a function to map your primitives

looppa(collection:any)(function(value:any, key:string|number, index:number) {}):array

Installation

npm i looppa -S

Usage

import looppa from 'looppa';

// normalize null and undefined
const nullCollection = looppa(null)(); // []
const undefinedCollection = looppa(undefined)(); // []

// arrays will be left untouched
const array = looppa(['foo', null, undefined])(); // [['foo', 0], [null, 1], [undefined, 2]]

// numbers to array
const numbers = looppa(0, 4)(n => n * 2); // [2, 4, 6, 8]

// strings to array
const string = looppa('ciao')(); // [['c', 0], ['i', 1], ['a', 2], ['o', 3]]

// objects to array
const obj = looppa({ foo: 'bar', buz: 'baz' })(); // [['foo', 'bar'], ['buz', 'baz']]

// Map to array
const myMap = new Map();
myMap.set('foo', 'bar');
myMap.set('buz', 'baz');
const map = looppa(myMap)(); // [['foo', 'bar'], ['buz', 'baz']]

// Set to array
const mySet = new Set();
mySet.add('foo');
mySet.add('bar');
const map = looppa(mySet)(); // [['foo', 'foo'], ['bar', 'bar']]

With React.js

This script is really handy if you need to deal with React loops

<div>
  <h1>Array</h1>
  <ul>
    {looppa([1, 2, 3])(number => (
      <li>{number}</li>
    ))}
  </ul>

  <h1>Numbers</h1>
  <ul>
    {looppa(0, 5)(number => (
      <li>{number}</li>
    ))}
  </ul>

  <h1>Letters</h1>
  <ul>
    {looppa('ciao')(letter => (
      <li>{letter}</li>
    ))}
  </ul>

  <h1>Object</h1>
  <ul>
    {looppa({ foo: 'bar', baz: 'buz' })((value, key) => (
      <li>{key}, {value}</li>
    ))}
  </ul>

  <h1>Map</h1>
  <ul>
    {looppa(new Map().set(1, 'bar'))((value, key) => (
      <li>{key}, {value}</li>
    ))}
  </ul>

  <h1>Set</h1>
  <ul>
    {looppa(new Set().add('foo').add('bar'))(value => (
      <li>{value}</li>
    ))}
  </ul>
</div>

check the demo