js-map-accessor

Javascript map accessor []

A proposed extension to bracket notation accessors in Javascript.

The map accessor allows accessing properties and calling methods on nested objects with a simple syntax.

Examples

Property access

Map a property from each object in an array to a new array:

players = [
    {id: 1, mood: 'happy'},
    {id: 2, mood: 'sad'},
    {id: 3}
];

players[].mood;
 
> ['happy', 'sad', undefined];

Access properties deeply nested inside arrays:

arr = [{
    a: [
        { b: { c: 10 } },
        { b: { c: 15 } }
    ]
}, {
    a: [
        { b: { c: 20 } },
        { b: { c: 25 } }
    ]
}];

arr[].a[].b.c;
 
> [[10, 15], [20, 25]]

Access an index within a multidimensional array:

arr = [
    { a: [{ b: 10 }, { b: 15 }] },
    { a: [{ b: 20 }, { b: 25 }] },
    { a: [{ b: 30 }, { b: 35 }] }
];

arr[].a[1].b; 
 
> [15, 25, 35]

Method calls

Call a method in each object in an array:

Player = function() {
    this.mood = 'sad';
};
Player.prototype.setMood = function(mood) {
    this.mood = mood;
    return this.mood;
};
 
players = [new Player(), new Player()];

players[].setMood('happy');
 
players.mood
 
> ['happy', 'happy'];
 

Call native methods on each object in an array:

arr = [{
    a: [1, 2]
}, {
    a: [1, 2]
}];
 

arr[].a.push(3);
 
arr[].a 
 
> [[1,2,3], [1,2,3]];

Map accessor call

Call map on nested properties in an array:

arr = [
    { a: [{ b: 10 }, { b: 15 }] },
    { a: [{ b: 20 }, { b: 25 }] }
];

arr[].a[].b[]((n, i) => i + n * 2);
 
> [
    { a: [{ b: 20 }, { b: 31 }] },
    { a: [{ b: 42 }, { b: 53 }] }
]

Call each function in an array, with arguments:

fnArr = [
    (a, b) => a + b, 
    (a, b) => a - b
];

fnArr[](15, 8); 
 
> [23, 7]
 

Set properties

Set each property in each object in an array:

arr = [{ a: 0 }, { a: 0 }];

arr[].a = 42;
 
arr[].a; 
 
> [42, 42];

Set each property in a multidimensional array:

arr = [{
    a: [0, 0]
}, {
    a: [0, 0]
}];
 

arr[].a[][] = 42;
 
arr[].a;
 
> [[42, 42] [42, 42]]

Requirements

A browser supporting JS Proxies. Recent versions of Chrome, Firefox and Edge.

How to use

• Install the map accessor babel plugin
• Test without babel plugin: Use ['_mapAccessor'] instead of [].

Issues

• See issues or report one