Javascript Map Array Last Item
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 can achieve the same results
row.map((rank, i, {length}) => ( //last element if(i + 1 === length){ }));