Most Important Javascript Methods
Tags: javascript, beginners, programming, webdev
Published: 2023-04-01 00:44:30

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:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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.

```js
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!