DEV Community: Alex Merecka

var, let, and const

Alex Merecka — Fri, 06 Jan 2023 09:07:35 +0000

var:

Prior to 2015, the only way to declare a variable in JavaScript was by using the var keyword. One would declare a variable such as:

var someNumber = 1;

The var way of declaring variables sufficed for all use cases but it proved to be a bit confusing at times.

For instance, the var keyword allowed you to declare a variable with the same name, multiple times like:

var num; num = 8; num = 10; console.log(num); // output : 10

This behavior led to unintended bugs and lots of unnecessary bug hunting.

Secondly, var is not blocked scoped. What this means is that the same variable name can be unintentionally (or intentionally) used inside and outside a code block. For instance:

var x = 5;

if (x === 5) { var x = 7; console.log(x); // expected output : 7 }

console.log(x); //expected output : 7

Notice here that JavaScript allowed us to create a two variables with the same identifier x but in actuality two separate variables with different values were not created, it simply reassigned the variable pointer to the new value since var does not acknowledge block scoping.

let & const:

So now that we see the pitfalls of using var we can now appreciate the introduction of the let and const variable identifiers introduced in JSES6 (ECMAScript 2015). These new keywords addressed the pitfalls associated with var and provide developers with more flexibility in terms of scoping and value assignment.

Scoping:

One of the biggest differences between let / const and var is scoping. Variables declared with let & const are block scoped. This means the following would occur:

var a = 20; console.log(a); // Expected output: 20 { let exe = 30; const num = 10; var a = 40; console.log(exe); // Expected output: 30 console.log(num); // Expected output: 10 } console.log(a) // Expected output: 40 console.log(exe); // Uncaught ReferenceError: exe is not defined console.log(num); // Uncaught ReferenceError: num is not defined

As you can see here, variables declared by var can be accessed (and re-declared) inside code blocks. However, variables declared with let and const are scoped to the code block in which they were defined and cannot be accessed outside of that block. Therefore variable scoping is one of the most noticeable changes with the introduction of let and const.

const:

The second biggest difference in the new variables declared in ES6 is with how const handles value assignment. A variable declared by const MUST be initially declared and cannot be redeclared.

This means that the following would occur:

const num = 3; num = 5; // Uncaught TypeError: Assignment to constant variable.

Besides this, variables declared with the const keyword behave the same as let variables in that they are both block (and function scoped).

These are the main differences introduced by the let and const variable declaration keywords introduced in JSES6 (ECMAScript 2015). And now with additional options you can choose your variable declarations with more strategy and thought as to their intended functionality.

useContext() usage in React

Alex Merecka — Sat, 31 Dec 2022 07:46:57 +0000

During the development phase of my React project for my Flatiron Phase 2 project, I came across the need to use a very helpful React hook called useContext(). I found this hook very useful because I needed to share the same data across multiple components in my application and without it I would have been forced to use repeated props in all of the components where I needed to use the information.

To start, the definition of useContext() from the React Docs is the following: "useContext is a React Hook that lets you read and subscribe to context from your component." The key takeaway from this is that we need to create context FIRST in order to subscribe to it. And in order to create context we have to use the createContext() hook.

The best way to learn how to work with useContext() is by going through an example. So let's take a look at a use case of how it is implemented and for that I will show an example of how I implemented it in my React project.

First, the issue at hand was that I had implemented a User login feature to the application and I needed a way to keep track of which User is currently logged in. And this information was needed to be accessible across multiple components in the application, which is essentially what Context is used for.

So in order to implement the logged in User, I created a UserContext as seen below. As you can see, I've created a context called UserContext and within that context I have a state variable called loggedInUser and a setter function called setLoggedInUser which are used to set & store the User that is logged in.

Now that we have the Context created, we can utilize it in our React components wherever we need to access this information. For instance, there is a component named Login which is being used to handle the login functionality that includes setting the logged in User. Since we have the UserContext created which contains the setLoggedInUser() function, we can utilize it in the Login component as follows:

Here we use object destructuring to access the setLoggedInUser function inside Context into our component.

And with that we can now set the logged in User based on the login information entered into the user login form:

Another use case for this functionality is in the Host component. One of the features of the Host screen is to allow the logged in User to modify the start and end times that is associated with each individual user.

By accessing the loggedInUser via the UserContext, we can modify the Start and End times associated with that user as seen below.

So now that we understand what useContext() is used for and have seen a couple of examples of real-world use cases of it you may be wondering: "What is the advantage of using it? Can't we just accomplish the same thing with props?" And the answer to that question is yes we can but it is not nearly as efficient and leads to a lot of repeated code.

To see an example of this let's look at a real example. In the App class of the same project, there is a property called isLoggedIn which stores a boolean value representing if there is a User logged in or not. And similar to the loggedInUser data, the isLoggedIn information is needed in multiple components across the application.

Notice here we are using the familiar useState() hook to create a variable that will hold this information. Then to pass this data to other components, we have to pass it as props as seen below:

Notice that here we are passing the isLoggedIn property to three different components via props. And while this may not save much code as we would need to subscribe to Context in these three components if we were using the useContext() hook instead, the real advantage would come if we needed to use the isLoggedIn property in nested components within these three components. In that case, we would need to pass it via props to each of the three parent components and then pass it as props to any children components. This is referred to as prop drilling and this is where useContext() can offer a real advantage to reducing repititous code.

As you've seen, useContext() can be a very useful to pass data between components especially in cases where there are many nested layers of components. With that said, it is considered best practice to utilize useContext() sparingly throughout the application and save it for cases where it offers a significant reduction in code repetition.