Most Important Javascript Methods

With "Why nobody did told me this before?" in mind (when I was a begginer), I want to show methods from Javascript that I have most satured usage on day-in-day development process.

1. The map() method

Let's say we have an array of objects representing people with their names and ages, and we want to create a new array containing only their names:

const people = [
  { name: 'Alice', age: 32 },
  { name: 'Bob', age: 24 },
  { name: 'Charlie', age: 45 }
];

const names = people.map(function(person) {
  return person.name;
});

console.log(names); // Output: ['Alice', 'Bob', 'Charlie']

In this example, we use map() to transform each element of the people array into a string representing the person's name. The map() function returns a new array with these strings.

2. The filter() method

Let's say we want to filter out all the people who are under the age of 30:

const youngPeople = people.filter(function(person) {
  return person.age < 30;
});

console.log(youngPeople); // Output: [{ name: 'Bob', age: 24 }]

In this example, we use filter() to select only the elements of the people array that match the condition defined in the callback function. The filter() function returns a new array with these elements.

3. The reduce() method

Let's say we want to calculate the total age of all the people in the people array:

const totalAge = people.reduce(function(accumulator, person) {
  return accumulator + person.age;
}, 0);

console.log(totalAge); // Output: 101

In this example, we use reduce() to iterate over the people array, adding up the ages of each person. The reduce() function returns a single value, the sum of all the ages.

To me reduce() it's very powerful. You can manipulate in a very creative ways. Keep in my the second parameter from this method is the initial value, you can set any value you want.

Chaining Methods

We can also chain these methods together to perform more complex operations on arrays. For example, let's say we want to filter out the young people and then calculate the average age of the remaining people:

const averageAge = people.filter(function(person) {
  return person.age >= 30;
}).map(function(person) {
  return person.age;
}).reduce(function(accumulator, age, index, array) {
  accumulator += age;
  if (index === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator;
  }
}, 0);

console.log(averageAge); // Output: 38.5

In this example, we first use filter() to select only the people who are 30 or older. We then use map() to transform the remaining elements into an array of their ages. Finally, we use reduce() to calculate the average of these ages.

As you can see, by chaining these methods together, we can perform complex operations on arrays in a concise and readable way.

The replace() method

Together with reduce method, this is the one most useful method you can own in Javascript.

With this method accept two parameters: (<pattern>, <replacement>). It's available only in String objects.

In this example we hide numbers from the string by doing this:

const stringExample = "His phone number is 11 1111-1111"
const regex = /\d/g
const hideNumber = stringExample.replace(regex, "x")

console.log(hideNumber) // Output: His phone number is xx xxxx-xxxx

The split() method

This method it's also only available for String objects. You can split a string into an array by using a pattern or a string to divide in a list of substrings.

const example = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
const strArray = example.split(" ")

console.log(strArray) // Output: ["Lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipiscing", "elit."]

A curious thing: you can use regex too. So have fun with this.

Conclusion

That's all for now! I'm expect this will be helpful for someone. Currently I'm working on in more stuff to bring here.

Thank you!