How can I remove duplicates from an array while keeping its order?

Use a Set, then spread it into a new array:

const values = ["pear", "plum", "pear", "kiwi", "plum"];
const unique = [...new Set(values)];

console.log(unique); // ["pear", "plum", "kiwi"]

A Set stores unique values and iterates them in insertion order, so each value remains at its first position in the input. [S1] This creates a separate result array; it does not remove entries from values.

The shortcut works when your definition of “duplicate” matches Set's value-equality rules. Objects need a little more care.

Set compares objects by identity, not by comparing their properties. Two separately created objects remain distinct even if their contents match. If the same object reference appears twice, Set recognizes the repeat. [S1]

const record = { id: 7, name: "Mina" };
const records = [record, { id: 7, name: "Mina" }, record];
const uniqueRecords = [...new Set(records)];

console.log(uniqueRecords.length); // 2

The first and third entries are references to record, so one is removed. The middle entry is a different object, so it remains despite having matching properties. [S1]

If you want one record per id, decide that this is your duplicate rule and use an approach that compares that field. The Set example does not deduplicate records by their contents.

Try an input with repeats in different positions and compare the full result with the expected array:

const values = ["b", "a", "b", "c", "a"];
const unique = [...new Set(values)];

console.log(unique); // ["b", "a", "c"]

The result keeps each value's first position and omits later occurrences, matching Set's insertion-order behavior. [S1]

For objects, check the two cases separately: repeat the same reference, then include two separately created objects with matching properties. Set removes the repeated reference but retains the separate objects. [S1] These examples help verify your chosen rule; they do not decide whether reference identity or a particular field is right for your application.

You can wrap the Set conversion in a helper:

function uniqueInOrder(values) {
  return [...new Set(values)];
}

const tags = ["news", "how-to", "news"];
const uniqueTags = uniqueInOrder(tags);
// ["news", "how-to"]

The helper returns a new array with the first occurrence of each Set value in iteration order. [S1] For objects, it removes repeated references only; separately created objects with matching properties remain distinct. [S1]

Before using it, state your rule plainly: same value, same object reference, or same chosen field. Use this helper when the first two Set rules match what you mean. If you mean a field such as id, choose an approach that applies that rule and check the resulting order against an example.