Javascript Map Array Last Item
Try something like:
row.map((rank, i, row) => {
if (i + 1 === row.length) {
// Last one.
} else {
// Not last one.
}
})
Old answer:
const rowLen = row.length;
row.map((rank, i) => {
if (rowLen === i + 1) {
// last one
} else {
// not last one
}
})
As LeoYuan answered, this is the correct answer, but it can be a bit improved.map
accepts a function with a third parameter, which is the iterated array itself.
row.map((rank, i, arr) => {
if (arr.length - 1 === i) {
// last one
} else {
// not last one
}
});
or in a bit shorter version, using an object destructuring (thanks Jose from the comments):
row.map((rank, i, {length}) => {
if (length - 1 === i) {
// last one
} else {
// not last one
}
});
Using an arr.length
instead of row.length
is a better and correct approach for several reasons:
When you mix scopes, it may lead for an unexpected bugs, especially in a poorly written or poorly designed code. In general, it is always a good way to avoid mixing between scopes when possible.
When you like to provide an explicit array, it will work as well. E.g.
[1,2,3,4].map((rank, i, arr) => { if (arr.length - 1 === i) { // last one } else { // not last one } });
If you like to move the callback outside of the
map
scope (mainly for a better performance), it will be wrong to userow.length
as it is out of scope. E.g. in the OP case:const mapElement = (rowIndex, state, toggled, onClick) => { return (rank, i, arr) => { let lastIndex = arr.length - 1; return [element(rowIndex, i, state, rank, toggled, onClick, lastIndex)]; }; }; map = ranks.map((row, r) => row.map(mapElement(r, state, toggled, onClick)));
Fewer lines of code with the same results
row.map((rank, i, {length}) => (
//last element
if(i + 1 === length){
}
));
A slight improvement on the accepted answer:
const lastIndex = row.length - 1;
row.map((rank, i) => {
if (i === lastIndex) {
// last one
} else {
// not last one
}
})
This removes the arithmetic from inside the loop.