DEV Community: Raj

Remove Duplicate Elements from JavaScript Array

Raj — Sun, 30 Jun 2024 02:41:27 +0000

Removing duplicate elements from a JavaScript array is a common task that developers often need to perform. JavaScript offers several methods to achieve this, each suitable for different scenarios.

1. Remove Duplicates Using the `Set` Object

The Set object lets you store unique values of any type, whether primitive values or object references. Converting an array to a Set removes all duplicate elements.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

2. Remove Duplicates Using the `filter()` Method

The filter() method creates a new array with all elements that pass the test implemented by the provided function. By checking the index of each element, duplicates can be filtered out.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.filter((value, index, self) => self.indexOf(value) === index);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

3. Remove Duplicates Using the `reduce()` Method

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It can be used to accumulate unique elements in an array.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = numbers.reduce((accumulator, value) => {
    if (!accumulator.includes(value)) {
        accumulator.push(value);
    }
    return accumulator;
}, []);

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

4. Remove Duplicates Using `forEach()` Method

The forEach() method executes a provided function once for each array element. By using an auxiliary object to track unique elements, duplicates can be removed.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [];
let seen = {};

numbers.forEach(value => {
    if (!seen[value]) {
        uniqueNumbers.push(value);
        seen[value] = true;
    }
});

// Output: [1, 2, 3, 4, 5]
console.log(uniqueNumbers);

Removing duplicate elements from a JavaScript array can be achieved using various methods. Whether you prefer the simplicity of the Set object, the flexibility of filter(), the power of reduce(), or the combination of map() and filter(), JavaScript provides multiple ways to handle this common task effectively. Each method offers unique advantages, so you can choose the one that best suits your specific needs.

Add Elements to JavaScript Array

Raj — Mon, 24 Jun 2024 10:07:20 +0000

Adding elements to a JavaScript array is a fundamental operation that developers frequently perform. JavaScript provides multiple methods to accomplish this task, each suitable for different scenarios.

1. Add Elements to the End of an Array - Using `push()` Method

The push() method adds one or more elements to the end of an array and returns the new length of the array.

Example:

let fruits = ['apple', 'banana'];
fruits.push('orange');

// Output: ['apple', 'banana', 'orange']
console.log(fruits);

Adding Multiple Elements

let fruits = ['apple', 'banana', 'orange'];
fruits.push('grape', 'mango');

// Output: ['apple', 'banana', 'orange', 'grape', 'mango']
console.log(fruits);

2. Add Elements to the Beginning of an Array - Using `unshift()` Method

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Example:

let vegetables = ['carrot', 'potato'];

vegetables.unshift('tomato');

// Output: ['tomato', 'carrot', 'potato']
console.log(vegetables);

Adding Multiple Elements

let vegetables = ['tomato', 'carrot', 'potato'];

vegetables.unshift('cucumber', 'pepper');

// Output: ['cucumber', 'pepper', 'tomato', 'carrot', 'potato']
console.log(vegetables);

3. Add Elements At Specific Position of an Array - Using `splice()` Method

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. This method can be used to add elements at any position in the array.

Example:

let animals = ['dog', 'cat', 'rabbit'];

// Adds 'hamster' at index 1
animals.splice(1, 0, 'hamster');

// Output: ['dog', 'hamster', 'cat', 'rabbit']
console.log(animals);

Adding Multiple Elements:

let animals = ['dog', 'hamster', 'cat', 'rabbit'];

animals.splice(2, 0, 'parrot', 'turtle');

// Output: ['dog', 'hamster', 'parrot', 'turtle', 'cat', 'rabbit']
console.log(animals);

4. Add Elements in form of Array - Using `concat()` Method

The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

Example:

let numbers1 = [1, 2, 3];
let numbers2 = [4, 5, 6];

// Combines both arrays
let combined = numbers1.concat(numbers2);

// Output: [1, 2, 3, 4, 5, 6]
console.log(combined);

Adding Single Element:

let combined = [1, 2, 3, 4, 5, 6];
let moreNumbers = combined.concat(7);

// Output: [1, 2, 3, 4, 5, 6, 7]
console.log(moreNumbers);

5. Add Elements to the Array using Spread Operator (`...`)

The spread operator (...) allows an iterable such as an array to be expanded in places where zero or more arguments are expected. This can be used to add elements to an array in a concise manner.

Example:

let letters = ['a', 'b', 'c'];
let moreLetters = ['d', 'e', 'f'];

// Combines both arrays
let allLetters = [...letters, ...moreLetters];

// Output: ['a', 'b', 'c', 'd', 'e', 'f']
console.log(allLetters);

Adding Single Element:

let letters = ['a', 'b', 'c'];
let newLetters = [...letters, 'g'];

// Output: ['a', 'b', 'c', 'g']
console.log(newLetters);

6. Add Elements using `Array.prototype.reduce()` Method

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. It can also be used to accumulate values into an array.

Example:

let initialArray = [1, 2, 3];

// Starts with [4, 5] and adds each
// element of initialArray
let addedElements = initialArray.reduce((acc, val) => {
    acc.push(val);
    return acc;
}, [4, 5]); 
console.log(addedElements); // Output: [4, 5, 1, 2, 3]

7. Add Elements using `Array.prototype.slice()` Method

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). This can be used to add elements to arrays by combining slices.

Example:

let weekdays = ['Monday', 'Tuesday', 'Wednesday'];
let addedDay = [...weekdays.slice(0, 2), 'Thursday', ...weekdays.slice(2)];

// Output: ['Monday', 'Tuesday', 'Thursday', 'Wednesday']
console.log(addedDay);

Conclusion

Adding elements to a JavaScript array can be done in several ways, each serving different purposes and scenarios. Whether you need to add elements at the beginning, end, or any specific position in the array, JavaScript provides versatile methods to accomplish these tasks.

DEV Community: Raj

Remove Duplicate Elements from JavaScript Array

1. Remove Duplicates Using the Set Object

2. Remove Duplicates Using the filter() Method

Example:

3. Remove Duplicates Using the reduce() Method

Example:

4. Remove Duplicates Using forEach() Method

Example:

Add Elements to JavaScript Array

1. Add Elements to the End of an Array - Using push() Method

Example:

Adding Multiple Elements

2. Add Elements to the Beginning of an Array - Using unshift() Method

Example:

Adding Multiple Elements

3. Add Elements At Specific Position of an Array - Using splice() Method

Example:

Adding Multiple Elements:

4. Add Elements in form of Array - Using concat() Method

Example:

Adding Single Element:

5. Add Elements to the Array using Spread Operator (...)

Example:

Adding Single Element:

6. Add Elements using Array.prototype.reduce() Method

Example:

7. Add Elements using Array.prototype.slice() Method

Example:

Conclusion

1. Remove Duplicates Using the `Set` Object

2. Remove Duplicates Using the `filter()` Method

3. Remove Duplicates Using the `reduce()` Method

4. Remove Duplicates Using `forEach()` Method

1. Add Elements to the End of an Array - Using `push()` Method

2. Add Elements to the Beginning of an Array - Using `unshift()` Method

3. Add Elements At Specific Position of an Array - Using `splice()` Method

4. Add Elements in form of Array - Using `concat()` Method

5. Add Elements to the Array using Spread Operator (`...`)

6. Add Elements using `Array.prototype.reduce()` Method

7. Add Elements using `Array.prototype.slice()` Method