Mastering React — JS Basics (Part 3)
Some notes I have taken along the way whilst learning React — this is without learning JavaScript (JS) first. So we are starting off with some of the basics of JS. This is part 3 of the 4 part series.
Part 3 carries on from where we left off in part 2 which can be seen here.
Spread Operator
This is a nifty shortcut allowing us to for example, combine two arrays. Initially we would have had to do it using the concat method however now we can do it a slightly different way.
const first = [1,2,3];
const second = [4,5,6];
const combine = first.concat(second);
const combined = [...first, ...second];Using three dots, ‘…’, we were able to do the same thing as the line above that used the concat method. Where this actually becomes quite handy is if we are trying to add something in between those two arrays. Or maybe we were trying to add something at the end. This becomes more difficult with the concat method. Below you’ll see an example of adding in some additional items to the arrays.
const combine = first.concat(second);
const combined = [...first, '**', ...second, '**'];
console.log(combine);
console.log(combined);This is what we see in the console:
The combine array just contains the contents of first & second whilst our combined array now also has our extra add-ins at the middle and end.
^* Bonus info on the spread operator
You can use it to clone arrays too!
const clone = [...first];
console.log(clone);This is the output — as you can see it’s exactly the same as the first array.
Whilst we have an example for arrays, we can also use the spread operator for objects as seen in the code below. This also includes adding in an extra property.
const first = { name: 'Owen' };
const second = { job: 'Philanthropist' };
const combined = {...first, ...second, location: 'Zanzibar'};
console.log(combined);The output will look like this:
^* btw — you can use the same cloning method for objects too!
Classes
Classes are wonderful for being able to reuse code as well as being able to edit and change methods that will be used multiple times within your project — instead of having to have duplicate code all over the place.
Make it a point when you are coding to do your best with writing clean code — if you want to really get into it there is a book quite literally called ‘Clean Code’ by Robert Cecil Martin which I would recommend.
Anyway. When creating a class you are going to want to name your class with Pascal naming convention — the first letter must be capitalised and if the class uses tow words of more, don’t add spaces obviously but each words’ first letter must be a capital. Doing this often enough will get you used to it and then whenever you see this capitalisation in code again, you’ll know it is in reference to a class.
In the code below you’ll see the basic idea of how to create a class. In our case we are creating a Person class. You will see the first method inside this class is called the constructor. Now the constructor is a special method that has its name reserved — a special keyword.
class Person {
constructor(nameFromOutside) {
this.name = nameFromOutside;
}
walk() {
console.log('walk');
}
}Inside this constructor we can pass in parameters from the outside, in our example we have passed in ‘nameFromOutside’. As a reference for within our class we have used the ‘this’ keyword to name the property that we will be used within the class. To make it more obvious as to how this all works — I named the property that we are getting from the outside ‘nameFromOutside’ — very creative right! Now you can see why I am doing coding and not heading an advertising agency. I’ve named it so just because when I was learning this in Python, I didn’t understand it right away because all the properties had the same names. The only difference being that some used the ‘self’ keyword before it (‘this’ keyword in JS).
Now when we want to use this Person class we will create it almost the same way we’d call a function. However with classes we are going to need to use the ‘new’ keyword. Then when we call the class we are going to have to put in whatever parameters are needed — in our case the ‘nameFromOutside’ parameter.
const person = new Person('Owen');
console.log(person.name);
console.log(person.walk);Since we assigned the ‘person’ the class — we get access to the methods inside which in our case is ‘walk’. We also get access to its’ properties which we assigned with the ‘this’ keyword and called the property ‘name’.
Inheritance
We are going to use the same code as above for this example. I’ll paste it below again just so you don’t have to scroll up and down to look at it.
class Person {
constructor(nameFromOutside) {
this.name = nameFromOutside;
}
walk() {
console.log('walk');
}
}As the name suggests, this is all about creating giving a new class attributes that have already been defined. If you’re familiar with English then you’ll get that this is just means the new class inherits the others’ attributes.
class Teacher extends Person {
teach() {
console.log('teaching');
}
}
const teacher = new Teacher('Owen');
console.log(teacher.name);We’ve now created a Teacher class and as far as I am concerned, teachers are also people. Meaning our Teacher class can inherit the attributes from our Person class. In the code above — we did this by using the ‘extends’ keyword followed by the class that we want our Teacher to inherit from.
Later when we created the teacher object we needed to provide it with the ‘nameFromOutside’ — ‘Owen’. Logging it to the console as you can see, we were able to access the ‘name’ attribute from the Person class even though we were printing from the teacher object. Here’s the output from the console:
If we are wanting to build upon the Teacher class then we are going to want to give it its own constructor. So whenever we are add a constructor in a child class we are going to need to call the constructor in its’ parent class. This is done using the ‘super’ keyword.
class Teacher extends Person {
constructor(name, degree) {
super(name);
this.degree = degree;
}
teach() {
console.log('teaching');
}
}
const teacher = new Teacher('Owen', 'MSc');
console.log(teacher.name);
console.log(teacher.degree);In the code above you’ll see the ‘super’ keyword in action. This calls the constructor from the parent class as I’ve already mentioned. Within the super method we will need to insert the parameters that we are using from the parent class — in our case it is ‘name’. Then just like creating any other class we are going to assign a new parameter with ‘this’ keyword and as you can see we have stated that we want to see what degree our teacher has. Below is the output from the console:
That’s all for today folks. Thanks for tuning in and as always, hit that follow button for more tips, tricks and tidbits from everyday life.
Any comments, recommendations, corrections or even just wanting to say what’s up — can all be done in the comments :)
