ListUnit is a type of Unit that only accepts array data type as its value. It ensures that at any point of time the value would always be an array.

It's based on Array. It implements all the Array.prototype methods available in the environment/browser, including polyfills. e.g.: push, pop, join and toString etc. to make working with the stored value a bit easier, when you call these methods they are called on the stored array value instead of ListUnit instance.

It also borrows some static methods from Object like values and entries, and implements them as instance members objectValues and objectEntries, respectively.

See API reference for more details.

Default value


Value data type


ListUnit vs array

ListUnit can not be used as a drop-in replacement for an array. You can not directly assign or access properties like unit[index] = v instead, you have to use unit.set(index, v) and unit.get(index), respectively. See the below comparisons for more clarity.

Apart from that, all the non-mutating methods like map, find, findIndex, etc. work similar to as they would on an array. However mutating-methods have some differences, for one, every mutating method makes the Unit emit a new array instead of mutating the current value.

Also, forEach method has been replaced with forEvery, because the extended Observable class already has a forEach method that is intended for something else entirely. See API reference for more details.

// initialization
const arr = ['🐠']; // an array literal
const unit = new ListUnit({initialValue: ['🐠']}); // value is ['🐠']

arr === unit // false

arr instanceof Array // true
unit instanceof Array // false
Array.isArray(unit) // false

// setting an item
arr[1] = '🐞'
unit.set(1) = '🐞' // this is reactive, creates and dispatches a new array

// pushing an item
unit.push('🐊') // this is reactive, creates and dispatches a new array

// accessing an item at index 0
// or 

// removing an item at index 1
arr.splice(1, 1)
unit.splice(1, 1)
// or

Last updated