Why I love Javascript
Tags: javascript, webdev
Published: 2020-06-23 23:22:04

> Version française -> [Pourquoi j'adore Javascript](https://malagasydev.com/pourquoi-jadore-javascript/)

I know, I know. Naysayers will tell you that if you love Javascript, you are a person with a bad taste. And that you're not one the [true programmers](https://www.quora.com/Why-is-JavaScript-so-hated?share=1).

> You are just another random person who thinks he can be a software developer after attending a bootcamp for 3 months or so - Naysayers

But I really love this language. There is some cool things and tricks in Javascript that I find very interesting and useful. Maybe, I am a person with a bad taste. Maybe. But that's not the question right now.

In this article, I'll try to give you insight or a refresh on some really nice features of Javascript, compared to other programming languages. So let's go.

## Destructuring

This one  is my favorite. I use it every single day, all the time.

Destructuring syntax allows you to access data inside an object or an array easily and assign them to variables.

Say, you have an object person, with some attributes and a nested object inside it.

```javascript
const person = {
  fName: "Thomas",
  lName: "Durand",
  age: 25,
  job: {
    title: "Software Developer",
    company: "Renault",
  }
}
```

Normally if you want to access one or more attributes separately from the object, you would do something like that:

```javascript
const firstName = person.fName,
const lastName = person.lName,
const job = person.job.title,
// ...
```

It's not really a convenient way with a big and nested objects. So here comes the destructuring syntax.

It's very simple, it is as if you declare variables. But you include them in curly braces and then asign them the object itself. Ok, less talk, more code..

```javascript
// with the same object person
const {fName, lName, job} = person;
```

As you can see, you have to name your variables the same as the person attributes. But don't worry, you can rename them as you want.

```javascript
const {fName: firstName, lName: lastName, job: profession} = person;
```

And voilà!

But it is more powerful than that. If you want to access nested objects, you extand the same logic with another curly braces.

```javascript
const {job: {title, company}} = person;
```

Now you can just use the variables "title" and "company" directly. And if you want  to rename them, again, the logic is the same *colon + yourVariableName*

```javascript
const {job: {title: jobTitle, company: companyName}} = person;
```

Destructuring syntax is especially usefull when you use it when writing functions. It is used a lot in Javascript frameworks like React or Angular.

Instead of doing this:

```javascript
const myFunction = (person) => {
  const {fName, lName, job: {title, company}} = person;
  // ...
}
```

You can directly write something like this:

```javascript
const myFunction = ({fName, lName, job: {title, company}}) => {
  // ...
}
```

Destructuring syntax are used also with arrays. Below, a quick example for swaping variables with array destructuring:

```javascript
const myArray = [1,2];
let [a,b] = myArray;
console.log(a); // 1
console.log(b); // 2

[b,a] = [a,b]; // re-assigns a in b and b in a

console.log(a); // 2
console.log(b); // 1
```

## Spread operator

Another cool feature used with objects and arrays. As the name suggests (or not), it *spreads* the data from inside objects or arrays. For instance, it is very usefull for copying objects or arrays.

Ok, here is the code:

```javascript
const personA = {
  name: "Doe",
  firstName: "John", 
  age: 25,
}

let personB = {}, personC = {};

// Say we have another person named John Doe but is 50 years old
// To copy some attributes from the already declared personA
// Normally, we write
Object.assign(personB, personA);
personB.age = 50;

// But with the spread operator, we can write something like this
personC = {...personA, age: 50};
```

And for arrays:
```javascript
const todos = ["cooking","laundry"];
const tomorrowTodos = ["grocery shopping",...todos, "homework"];
console.log(tomorrowTodos); // ["grocery shopping", "cooking","laundry", "homework"]
```

And by combining it with the destructuring syntax, we can have elegant syntax like this:

```javascript
const myArray = [1,2,3,4,5];
const [a, ...rest] = myArray;
console.log(a); // 1
console.log(rest); // [2,3,4,5]
```

## Map, Filter and Reduce

Ok, those 3 are not exclusive to Javascript only. But they are so useful that you have to know how to use them.

Map, Filter and Reduce are array methods and allows you to, respectively:

- perform a computation on each element of an array and return a new array
- filter an array whose elements respect some condition and return the new filtered array
- executes a reducer function on each elements and return one output based on the computation done with the array elements

Each 3 methods takes a callback function, as one of its parameters, to apply to the elements inside the array.

Using those features are a way of doing what is called [declarative programming](https://en.wikipedia.org/wiki/Declarative_programming).

It is a style of programming that focuses on the resolution of the problem at hand by declaring the "what to do" instead of the "how to do it" (in contrast with [imperative programming](https://en.wikipedia.org/wiki/Imperative_programming).

```javascript
// Map
// Pluralize words inside an array
const singular = ["pizza", "baggel", "hat"];
const plural = singular.map(word => word + "s");
console.log(plural); // ["pizzas", "baggels", "hats"]

// Filter
// Returns all the even number inside an array
const numbers = [14, 5, 23, 28, 105];
const evenNumbers = numbers.filter(number => number%2 === 0); // returns all the numbers that returns true for the condition number%2===0
console.log(evenNumbers); // [14, 28]

// Reduce
// 1. Simple sum of all the elements in an array
const myArray = [2,3,4,1];
console.log(myArray.reduce((acc, num) => acc + num, 0)) // 10
// acc is the accumulator value and num the current value of the element beign tested
// the second parameter 0 of the reduce is the initial value we want for the accumulator

// 2. Find the common elements accross multiple arrays
function intersection(arrays, ) {
  return [...arguments].reduce((acc,array,i)=>{
    if(i===0){
      acc = [...array];
    } else {
      acc = acc.filter(x=>array.includes(x));
    }
    return acc;
  },[])
}
console.log(intersection([5, 10, 15, 20], [15, 88, 1, 5, 7], [1, 10, 15, 5, 20]));
// [5, 15]
```

## Conclusion

There are far more nice features in Javascript but knowing and using correctly those three concepts will make you stand out from other developers.

That's it pal. I hope you liked the article (my first one). I'll write a lot more Javascript things in the future and more in depth too. For now, let me know what you think of this article.

**PS**: I'm sorry if I made some English mistakes. It is not my first nor my second language :)