This is the array of data we’re going to be working with. It is an array of 2 Objects:

const people = [
   { name: "Bob", age: 50 },
   { name: "Jan", age: 45 }
];

First, I’ll destructure the people array by pulling out the two contents and giving them separate names. Although the syntax looks a little weird, these two destructured objects should have unique names because they are variables.

const [person1, person2] = people;

So how would we destructure the two objects? It would be similar to destructuring the array except since we are working with a JS object, we will use curly braces.

const { name, age } = person1;

console.log(name);
// prints "Bob"

You can also define these properties to have unique names:

const { name: name1, age: age1 } = person1;

console.log(name1);
// prints "Bob"

There is also a way to define a value for an object’s variable if that object doesn’t currently have one. This is called giving the object a default value. As an example, let’s say that our person Bob was defined without an age:

const people = [
   { name: "Bob" },
   { name: "Jan", age: 45 }
];

We can add one for him when we are destructuring by doing this:

const { name: name1, age = 42 } = person1;

console.log(age);
// prints 42

But if Bob’s age was set to 50 when the array was defined and we used the above line const { name: name1, age = 42 } = person1, his age would not change.

console.log(age);

// prints 50

How would you handle an object within an object within an array?

const people = [
   { name: "Bob", age: 50, children: {
      son: "Bobby",
      daughter: "Jill"
   }
   },
   { name: "Jan", age: 45 }
];

const [bob, jan] = people;

const { name, age, children } = bob;

console.log(children.son);
// prints "Bobby"

OR

const { name, age, children: {son, daughter} } = bob;

console.log(son);
// prints "Bobby"

Arrow functions are just a shorter way of writing a JavaScript function.

This is an example of using a square function within the JS map function to easily loop through a list of numbers.

var numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map(function square(x) {
   return x * x;
});

We can remove the word “square” from our function. Now, the function within the map function is an anonymous function.

var numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map(function(x) {
   return x * x;
});

We can make this even simpler by turning the anonymous function into an arrow function.

var numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map(x => x * x);

The first x is the parameter; the x * x is an expression. Since the contents of the function are only 1 line, we can remove the return keyword and the curly braces. We can also remove the parentheses from around the parameter since there is only 1 parameter.

Here are some more arrow function examples.

const newNumbers = numbers.map((x, y) => x * y);

const newNumbers = numbers.map(x => {
   return x * x;
});