Reorder array based on condition in JavaScript?

Let's say we have an array of objects that contains the scores of some players in a card game:

const scorecard = [{
    name: "Zahir",
    score: 23
}, {
    name: "Kabir",
    score: 13
}, {
    name: "Kunal",
    score: 29
}, {
    name: "Arnav",
    score: 42
}, {
    name: "Harman",
    score: 19
}, {
    name: "Rohit",
    score: 41
}, {
    name: "Rajan",
    score: 34
}];

console.log("Original array:");
console.log(scorecard);

Original array:
[
  { name: 'Zahir', score: 23 },
  { name: 'Kabir', score: 13 },
  { name: 'Kunal', score: 29 },
  { name: 'Arnav', score: 42 },
  { name: 'Harman', score: 19 },
  { name: 'Rohit', score: 41 },
  { name: 'Rajan', score: 34 }
]

We also have a variable by the name of selfName that contains the name of a particular player. We need to write a function that sorts the scorecard array in alphabetical order and makes sure the object with name same as selfName appears at the top (at index 0).

Using Custom Sort Function

const scorecard = [{
    name: "Zahir",
    score: 23
}, {
    name: "Kabir",
    score: 13
}, {
    name: "Kunal",
    score: 29
}, {
    name: "Arnav",
    score: 42
}, {
    name: "Harman",
    score: 19
}, {
    name: "Rohit",
    score: 41
}, {
    name: "Rajan",
    score: 34
}];

const selfName = 'Arnav';

const sorter = (a, b) => {
    if(a.name === selfName){
        return -1;
    };
    if(b.name === selfName){
        return 1;
    };
    return a.name 

[
  { name: 'Arnav', score: 42 },
  { name: 'Harman', score: 19 },
  { name: 'Kabir', score: 13 },
  { name: 'Kunal', score: 29 },
  { name: 'Rajan', score: 34 },
  { name: 'Rohit', score: 41 },
  { name: 'Zahir', score: 23 }
]


How It Works

The custom sort function works by checking three conditions:

• If a.name matches selfName, return -1 (moves a before b)
• If b.name matches selfName, return 1 (moves b before a)
• Otherwise, sort alphabetically by comparing names

Alternative: Using Filter and Spread

const scorecard2 = [{
    name: "Zahir",
    score: 23
}, {
    name: "Kabir",
    score: 13
}, {
    name: "Kunal",
    score: 29
}, {
    name: "Arnav",
    score: 42
}, {
    name: "Harman",
    score: 19
}];

const selfName2 = 'Kabir';

function reorderArray(arr, targetName) {
    const target = arr.find(item => item.name === targetName);
    const others = arr.filter(item => item.name !== targetName)
                     .sort((a, b) => a.name.localeCompare(b.name));
    
    return target ? [target, ...others] : others;
}

const reordered = reorderArray(scorecard2, selfName2);
console.log(reordered);

[
  { name: 'Kabir', score: 13 },
  { name: 'Arnav', score: 42 },
  { name: 'Harman', score: 19 },
  { name: 'Kunal', score: 29 },
  { name: 'Zahir', score: 23 }
]

Conclusion

Both approaches successfully reorder arrays based on conditions. The custom sort function is more direct, while the filter-based method offers better readability and separation of concerns.