Javascript Map Array Last Item Javascript Map Array Last Item javascript javascript

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:

  1. 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.

  2. 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    }});
  3. If you like to move the callback outside of the map scope (mainly for a better performance), it will be wrong to use row.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){   }));