Before React: Learn a few more Javascript Items Part2

Last month I started explaining a few new Javascript concepts and I want to finish them today.

See previous article

• Spread Operator
• Object Spread
• Super keyword
• Exports

Spread Operator

Take an array and spread each item out. This is exactly as it sounds we are spreading out the array. The only caveat is that it does it as a comma separated value.

If we had three arrays and wanted to combine them we would use the concat method

<var fruits = [“bananas”, “oranges”, ”apples”];
var vegetables = [“celery”, “carrots”, “lettuce”];
var meats = [“chicken”, “pork”, “beef”];

var shoppingList = fruits.concat(vegetables).concat(meats);

But now we can use the spead operator to do the same thing

var shoppingList = […fruits, …vegetables, …meats];

Another use of the spread of operator is with functions that take it a certain number of arguments

For example:

function addNumbers(a, b, c) {
     Return a + b +c;
}

And we have an array with the numbers we want to ad

var nums = []10, 15,28]

How can we pass in the array to our function?

We use the spread operator

addNumbers(…nums); //53

Here is a blog post by David Walsh on more uses for the spread operator.

Object Spread

This one is very similar to the spread operator and how it works with arrays only that the Object Spread works with objects. It lets you use the spread (...) operator to copy enumerable properties from one object to another in a more succinct way.

It’s pretty common to want to base one object off of another, something like this:

var myHouse = { 
   rooms: 4,
   bathrooms: 2 
}; 
var yourHouse = myHouse; 
yourHouse.bathrooms = 1;

Doesn’t that have a bug?

Yes! yourHouse and myHouse refer to the same object. We didn’t create a new object for yourHouse to reference, we just pointed yourHouse to the existing myHouse object. You can see that here:

console.log(yourHouse.bathrooms); // 1 
console.log(myHouse.bathrooms); // 1 <-- problem!

Using the spread operator we can easily create a new object with all the same properties of an existing object.

const myHouse  = { 
 rooms: 4,
 bathrooms: 2 
};
const yourHouse = { ...myHouse }; // <-- changed
yourHouse.bathrooms = 1;
console.log(yourHouse.bathrooms); // 1
console.log(myHouse.bathrooms); // 2 <-- fixed!

You can see that we created a new object for yourHouse to reference when we used the spread operator.

Can you explain the { ...myHouse } line a bit?

Sure thing, the { tells Javascript that we want to create a new object. Next, the ...myHouse says that we want that new object to contain all the same contents as the cat object. And finally, } means that we’re finished with that object and don’t want to add anything else to the object.

Dmitri Pavlutin does a really good job of  going into more uses of the object spread operator.

Super keyword

This keyword came about to stop the duplication between constructor functions.

In the past we had a function such as

function Parent(firstName, lastName) {
   this.firstName = firstname;
   this.lastName = lastName;
}

function Child((firstName, lastName) {
   this.firstName = firstname;
   this.lastName = lastName;
}

As you can see, there is a lot of duplication and repeat code.

We need a way to borrow the code from the Parent function and use it in the child function?

This is where “super comes in”

The idea behind super is to find a method by the same name in the parent class or the class which has passed down methods and properties to a child class

class Parent {
   constructor(fistName, lastName) {
      this.firstName = firstName;
     this.lastName = lastName;
   }
   sayHello() {
      return `Hello ${this.firstName} ${this.lastName}`;
   }             
}


class Child extends Parent {
   constructor(firstName, lastName) {
      //you must use super here
     super(firstName, lastName);
   }
}

In our constructor method in the child class we will use super which will invoke a method by the same name in the parent class. Super can only be used if a method by the same name is implemented in the parent class.

The MDN Documents have more examples of using super

I hope this helps you understand what is going on with Reach and the way it is written.

Let me know if it helps or even if it didn’t.