Underrated JavaScript Array Methods – Part 1

#javascript #beginners #webdev

Check out more articles on my website lindaojo.com

JavaScript Arrays have built-in methods. These methods are unique functions that we apply to our arrays to carry out common manipulations on the array. This helps us save time as we don't have to write common functions from scratch every time.

JavaScript Array Methods are popular, some more than others. We are going to be looking through some methods you might have not heard of.

- copyWithin()

The copyWithin() method shallow copies part of an array to another location in the same array and returns it without modifying its length. Here is an example of this method in action

Syntax – arr.copyWithin(target, start?, end?)

target: the index position at which to copy the sequence to.
The start and end argument is optional.

The start index defaults to zero, while the end index defaults to array.length.

const hearts = ['💜', '🧡', '💙', '🤍', ' 💚'];

// copy to index 0 the element at index 3
console.log(hearts.copyWithin(0, 3, 4));
// expected output: ["🤍", "🧡", "💙", "🤍", "💚"]

// copy to index 1 all elements from index 3 to the end
console.log(hearts.copyWithin(1, 3));
// expected output: ["💜", "🤍", "💚", "🤍", "💚"]

// copy to index 0 the element at index 4
console.log(hearts.copyWithin(0, 4));
// expected output: ["💚", "🧡", "💙", "🤍", "💚"]

- Entries()

Entries() is applied on an Object to return a new Array iterator object that allows you to iterate through the key/value pairs in the array. One could say Entries() converts an object to a nested array.

//Imagine a user fills a form that returns the object below
const allergies = {
  'milk': true,
  'eggs': false,
  'peanuts': false
}

const allergiesArray = allergies.entries();

console.log(allergiesArray);
// expected output: 
 [
    ['milk', true],
    ['eggs', false],
    ['peanuts', true]
];

Now that you see how it works, you might be thinking why should we convert the allergies Object to an Array.

Well, unlike Objects, Arrays can be manipulated using JavaScript Array methods such as .filter() or .map().

Let me show you the importance by returning an array of allergies that the user marked as true.

let result = allergiesArray.filter(([key, value]) => value) // returns [['milk', true], ['peanuts', true]]
                           .map(item => item[0]); // returns ['milk','peanuts']

console.log(result)
// expected output:
['milk','peanuts'] //List of User's allergies

- Fill()

Fill() method changes all elements in an array to a static value, from a start index to an end index. It returns the modified array.

Syntax – array.fill(value, start?, end?)

Start and end are optional. The start index defaults to zero, while the end index defaults to array.length.

const hearts = ['💜', '🧡', '💙', '🤍', ' 💚'];

// fill with 💖 from position 2
console.log(hearts.fill('💖', 2));
// expected output: ['💜', '🧡', '💖', '💖', ' 💖']

//fill the whole array
console.log(hearts.fill(💖));
// expected output: ['💖', '💖', '💖', '💖', ' 💖']