Mastering React — JS Basics (Part 2)
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 2 of maybe 3 or 4.
Part 2 carries on from where we left off in part 1 which can be seen here
Bind
Since JS is OOP, functions are objects. Everything is an object! Using the bind method as seen below, we can set the value of this (previously spoken about in part 1) permanently.
Calling bind on the walk function will give us a new walk function. The value of this within that walk function will be based on the value of ‘thisArg’ that we have stated in bind.
const walk = person.walk.bind(person)
walk();With the above code you’ll see the output is two of the same objects. One first object is from within our person constant within the walk function and the second object is due to us creating a constant walk binding person to it.
Arrow functions
Creating a function has been simplified a lot in JS. In the example we will have a number squared function. Below is the initial way of creating and returning a value of a function. It’s fairly easy to understand.
const square = function(number) {
return number * number;
}We can now simplify the above code quite a lot using ‘Arrow functions’.
const square = number => number * number;Above you will see the exact same square function as the one above just simplified to a single line. There are a few cool tricks here.
If your function takes only a single parameter then you do not need the parentheses around the parameter as seen with our simplified square function.
If your functions body consists of only one line and returns something — such as with our original square function, then we can actually eliminate the ‘return’ and those curly braces. Giving us our beautiful looking second square function. Much better!
Just so you know too — if your function doesn’t need any parameters then you just need to have some empty parentheses in place of the parameter. Here’s what that would look like as an example.
const square = () => number * number;Going back to our simplified function. Using it would look something like this.
const square = number => number * number;
console.log(square(5));Returning in the console:
Here’s a great use case scenario:
const jobs = [
{id: 1, isActive: true},
{id: 2, isActive: true},
{id: 3, isActive: false},
];
const activeJobs = jobs.filter(job => job.isActive)
console.log(activeJobs)Above we have created a list of three jobs. Two of them are active and one is not. We want to print out in the console — the jobs that are active. So we have created an activeJobs function. This uses the filter method to run enumerate through the list in jobs and will return for us just the jobs that are active. Below is what we get back in the console.
Object Destructuring
Defining an address object with a few values inside of it — later on in our code we may want to extract the values from this address object.
const address = {
street: 'Hacker Way',
city: 'San Francisco',
country: 'United States of America',
};
const street = address.street;
const city = address.city;
const country = address.country;Above you can see that we had to use 3 lines to extract the values from our address object. Instead of that — we can use object destructuring.
const { street, city, country} = address;
console.log(street);
console.log(city);
console.log(country);What you see above is equivalent to the three lines we used except this is a lot neater and is just an impressive one liner! Below is what would be printed out in the console
If you only wanted to access the city property and perhaps change the name of the property, here’s how:
const { city: ci} = address;
console.log(ci);Output as this in the console:
Lovely stuff! That’s all for today mate. Tune in again for more tid bits and learning with me! 🤙🏼
Any comments, recommendations, corrections or even just wanting to say what’s up — can all be done in the comments :)
