Pt. 1 of 4
Learning a front-end javaScript framework /library is essential for developers as it speeds up the production process while minimizing the lines of code. For JavaScript developers, the most common frameworks are React.js, Angular, and Vue.js. Today, we’re going to focus our attention on React.js.
Before jumping headfirst into React, it is important that you have a very solid foundation in JavaScript as there are several concepts that all burgeoning react developers must become familiar/comfortable with to get the most out of this useful tool.
Var vs. Let vs. Const
ECMA6 introduced a new way to declare variables that differs from the traditional way variables are declared using the “var” keyword, the previous js standard. It is highly advised that javascript developers use “let” and “const” keywords as opposed to using “var” when declaring variables.
The reasoning behind this is that ‘let’ utilizes “function” scope while ‘let’ and ‘const’ use “block” scope. This is an important distinction as block scoping is preferred because we don’t want to give access to our variables outside of a defined block.
function helloWorld() {
for (var i = 0; i < 5; i++) {
console.log(i)
}
console.log(i)
}
helloWorld()
In the previous example, we have a helloWorld function. Within that function is a for loop that increments by one as long as ‘i’ is less than 5. In this example, we have 2 console logs, one within the function scope and the other within the for loop block. Using var to declare our variable allows the 2nd console log to have access to the ‘i’ variable within the for loop, which as we described previously, is not ideal. Now, let’s take a look at the same example, but this time we’ll use the let keyword.
function helloWorld() {
for (let i = 0; i < 5; i++) {
console.log(i)
}
console.log(i)
}
helloWorld()
Using the let keyword, the 2nd console log should throw an error as the i variable will only be accessible within the for loop, as let is block scoped, not function scoped.
That leaves us with “let” and “const” as our preferred methods of declaring variables. “Const” is used when we have a variable that will not change and “let” if a variable will be reassigned at a later time, therefore, const would not be a good choice for an incrementing for loop.
Objects
Properties and Methods
In javascript, objects are collections of related data consisting of ‘key-value’ pairs in the for of variables, also known as properties, and functions which are referred to as methods.
Dot and Bracket Notation
When we know which particular property or method we’d like to access, dot notation works well.
let dog = {
name = "Fido",
age = 3,
color = "black",
owner = "Kevin"
}
dog.owner = "Richard"
On the other hand, we use bracket notation when we are unsure of the property or method we want to be able to access.
let dog = {
name = "Fido",
age = 3,
color = "black",
owner = "Kevin"
}
let newOwner = 'owner'
dog[newOwner.value] = "Richard"
In our next installment, we’ll be taking a look at the ‘this’ keyword.
Top comments (1)
Watch out for the '=' over the ':' ;)