Mastering React — JS Basics (Part 1)
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.
Variables
When you declare a variable with the var keyword — that variable will be accessible within the entire function where it is defined.
function sayHello() {
for (var i =0; i < 5; i++) {
console.log(i);
}
console.log(i);
}
sayHello();There was a new keyword introduced in 2015, let.
let came to solve this problem by only allowing the variable to be accessed within its’ code block.
If we ran the above code but changed var to let, we would get an error due to the second console.log(i) being outside of the code block where the i variable was declared with let.
function sayHello() {
for (let i =0; i < 5; i++) {
console.log(i);
}
}
sayHello();- var -> function
- let -> block
Use the let keyword unless you have a very specific reason to use the var keyword.
The const keyword is used to declared a constant rather than a variable. It’s important to remember that the constant will only be accessible within its’ code block and NOT in the function like a var.
As the name suggests, it cannot be changed as it is a ‘constant’. So once it has been declared it will remain as whatever it was that you initial assigned it.
The code below will throw an error because you are trying to change the const x which as we’ve just learned cannot be changed once it has been declared.
const x = 1;
x = 2;Try to avoid using var and prefer to use const over using let. Only use let when you know you are going to have to reassign a variable at a later stage in your program.
Objects
Objects in JavaScript are collections of key-value pairs.
Functions inside of an object are called methods.
Below we are defining a person object with some key-value pairs. The first being a name assigned to a string and the second and third are methods.
The original way of creating a method looks like what we see for the walk key. However since an update many years ago we can now simplify that to what you see for talk.
const person = {
name: "Liam",
walk: function() {},
talk() {}
};There are two ways to access the properties within an object. There is the dot notation and the bracket notation.
person.talk();
person['name'] = 'Owen';Above we have reassigned the original name of our person, Liam, as declared in our original declaration of the object to Owen.
For practicality reasons we use the bracket notation when we do not know ahead of time what property or method we are going to access.
The example given for this is; imagine we are wanting to get the result from an input field that a user is accessing. We can use the bracket notation to select exactly what we are wanting from our object.
This will make a little more sense with the code below.
const targetMember = 'name';
person[targetMember.value] = 'Owen';Do not worry about the ‘.value’ — this is used when extracting the actual value when we want the code to work in a real world scenario. However this should get the point across.
That being that the targetMember constant will be set to a value, in a real world example it will be the value of the input field. In our case we have selected the ‘name’ key from our person object as that field.
This code would do exactly the same as the initial code changing the name to ‘Owen’.
If we know ahead of time which property or method we want to access;
We will use the dot notation.
person.talk();
person.name = 'Owen';‘This’ keyword
If you are familiar with another Object Oriented Programming language it will be more easy to understand — in Python we would use the ‘self’ keyword.
Basically this keyword always returns a reference to the current object.
const person = {
name: "Liam",
walk() {
console.log(this);
}
};
person.walk();The above code will return :
As you can see it has returned the person object as we have declared it above. It is returning itself. We see the name — ‘Liam’ and walk — a method.
There are exceptions in JS though;
const walk = person.walk;
console.log(walk);In the above code we are creating a constant ‘walk’ where we are just getting a reference to ‘person.walk’ — which is why we do not have the ‘()’ at the end of ‘person.walk’.
As you can see the walk constant is set to the walk function — as we declared it in the person object.
const walk = person.walk;
walk();Above we have called the walk function — so what even is this??
Let’s break this down.
If we call a function as a method in an object:
person.walk();This will always return a reference to that object.
However.
If we call a function as a standalone object or outside of an object, this will return the global object which is the window object in browsers which is the weird thing we saw in the last screenshot. You may also see ‘undefined’ depending on how strict-mode is defined in your React project.
That’s all for now. Catch you in the next one bruv 🤙🏼
