Forem: Carmen Salas

Getting into Gatsby

Carmen Salas — Mon, 20 Jul 2020 17:49:32 +0000

Gatbsy is a very popular framework used to create static webpages. In this blog, we'll discuss what kind of tool Gatbsy is and why is it so helpful in building webpages that follow a JAMstack approach.

We will be going over:

What is Gatsby?
What is GraphQL?
How to get started using Gatsby?

What is Gatsby?

The common definition for Gatsby is, it is a static site generator. But let’s discuss what this means.
This means Gatsby is a tool that will help us produce static sites using HTML, JS, CSS, images, and other static content, that we can then load onto a server. Which is a more JAMstack approach to building applications.
The traditional approach of server-side rendered applications is that that when you request a page on the application, generally it will then have to reach a database to retrieve the data and then build the page in real-time on the server to then send make to the client. With Gatsby, a JAMstack approach is taken to serving a website. Gatsby will create the pages ahead of time which is then served and the client is only requesting the static pages created. More specifically, Gatsby calls the endpoint with GraphQL, which fetches the data you need, and then a static page is created with that data. The data is only queried once and then served on to a server as a static HTML file.
Gatsby uses graphQL to query data from an external data source such as markdown files, JSON files, a database, or even an API. Gatsby includes plugin architecture, which allows us to load JavaScript, make API calls, add animations, build interactions onto the HTML files which allows us to still have very dynamic websites. Gatbsy also uses React for templating and CSS for styling.

What is GraphQL?

GraphQL is a querying language that allows you to query for data by describing the data you want to receive from a data source such as a markdown file. You are then given the data in the way that you asked for it

How to get started using Gatsby?

Gatbsy uses Node, so Node will need to be running on a development environment on your computer. You will need to have installed Node and Git before installing Gatsby. You start off by installing Gatsby on your local machine globally. You then run Gatsby on your computer, by creating a new Gatsby template and it will help you set up your application to generate static pages for you. The Gatsby documentation explains thoroughly how to get started with building sites on Gatsby from quickstarts for experienced developers who are ready to jump in, to step-by-step tutorials for beginners starting from anywhere.

This is my JAMstack

Carmen Salas — Mon, 13 Jul 2020 19:55:15 +0000

What is JAMstack?

Let’s talk about an approach to building applications that may be more frontend developer-friendly. JAMstack is a concept or approach for building out applications if you want to create a website that does not require creating a server or database.

What is the JAMstack approach?

JAMstack stands for JavaScript, API, Markup. Typically when building out an application most developers are used to a Mololithinc structure. In a monolithic structure, the front end is tightly coupled with the backend. When the client makes a request, it hits a server, which pulls data from a database, that then produces HTML to render and then sends that back to the client. There is no need to build out the HTML page for every page request the client makes in the JAMstack structure.

The main concept behind JAMstack is to decouple the frontend from the backend and free the frontend from servers sp that it can be deployed directly to a CDN
With a JAMstack approach, the frontend pages are built before it is sent to the client through a build process before being deployed.
The JavaScript is the request/response cycle on the client’s side.
The M in JAMstack stands for Markup. The markup are the static pages that are prebuilt and they are put in a CDN. So, if the client requests a page, there is no need to hit a server to build out the HTML, it instead will fetch the HTML from a CDN which has been pre-built.
The A in JAMstack is for the use of third party APIs which provide the dynamic content to the page. As well as querying requests to an API from the frontend before the pages are built to then deploy.

So, what are the benefits of using the JAMstack approach?

There are lots of benefits to this approach to building an application.
The first is that your website will be faster since it does not have to hit a server and the pages are prebuilt. Typically when you host your applications on servers with databases, users are making requests to the same servers in limited locations, which can cause traffic jams (pun intended). Instead, in JAMstack, you are deploying an application globally through the use of CDNs. A CDN (Content Delivery Network) distributes the static content, like the static content built in a JAMstack approach and then serves them to the users in a location closer to them. This also means higher security since there are no servers or databases in your application that are at risk. Because your pages are pre-built the performance of your application skyrockets as well.

Lastly, this makes the process of developing a site much easier, since there is no need to manage and build servers or databases. You can manage the content of your page through version control such as GIT. This approach to building an application makes sense if you have an application that does not require a full database and has content that can be built beforehand using markup.

Cover by Markus Spiske on Unsplash.

How to be an A11y

Carmen Salas — Thu, 09 Jul 2020 19:38:15 +0000

In my previous blog, I talked about why it is important that we follow the Web Content Accessibility Guidelines.
In this blog, I’m going to go over the first steps we can take to make our applications more accessible and implementing what WCAG recommends.

We will be going over:

Writing Semantic HTML
Introduction to ARIA

Writing Semantic HTML

First, we will talk about semantics and writing semantic HTML.
Semantics in HTML means that if we are using a semantic element in HTML we expect the element to give us information and what to expect inside of it. It is the idea that every element in your document has a purpose. This is important so that say if a user is using assistive technology like a screen reader to navigate your application, they can easily interpret what every element on the page is doing/saying.
An example of writing HTML that is more semantic is using h to represent important and less important heading on your page. Splitting up the HTML on your page to use main, article, and footer tags can be helpful.
A good example of an element often used that is not very semantic is the div tag. The div tag semantically is a grouping of content, it is often read as a ‘group’ by assistive technology. So, if there is something important in your div such as a list, button, or any important content, you want to use an element that is more semantic. You can also use ARIA to make elements more semantic, we’ll go into that next.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Introduction to ARIA

Next, we will go into ARIA.
ARIA stands for Accessible Rich Internet Applications, and it helps with making non-accessible controls accessible. For cases where you are using DOM elements that are not semantic, ARIA HTML attributes can help add a semantic layer to elements to make them readable from assistive technologies. ARIA attributes modify the way an element is translated to the accessibility tree. This is the only change ARIA makes to the element. It will not make any changes to how the element behaves on the page.

Here is an example of a way we would write an input semantically.

<lable>
<input type="radio">
Option One
</label>

A screen reader would be able to provide to the user the label which in this case is “Option One” and it would also tell us the state of the radio input, whether it was selected or not.

Here is an example in which we are not able to use semantic in order to display a radio input.

<div class=”radio checked”>
Option One
</div>

So here we know that this div is meant to be a radio input with a state of checked because we added classes that represent this to us. However, a screen reader would not be able to read this information because divs do not have roles or states to indicate this in the accessibility tree.

Here is how we can use ARIA attributes to make this div tag more semantic.

<div class=”radio” role=”radio” aria-checked=”true”>
Option One
</div>

By adding this role and aria-checked attribute causes our element to now to have a role and state in the accessibility tree, which assistive technologies can now pick up and translate to the user. It will not change anything about the elements’ visual appearance or behavior on the page.

You can learn more about ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) authoring practices for implementing ARIA attributes to less semantic HTML elements.

Cover by The Creative Exchange on Unsplash.

All Things A11y

Carmen Salas — Mon, 06 Jul 2020 19:33:39 +0000

Accessibility is an extremely important and necessary aspect of building web applications, and unfortunately oftentimes overlooked. I want to provide a beginner’s guide to what accessibility on the web is and how everyday developers like you and I can make our applications accessible to anybody!

We’ll be going over:

What are the Web Content Accessibility Guidelines
Who are the Web Content Accessibility Guidelines for?
What are the main principles of the Web Content Accessibility Guidelines?
How you can begin to implement accessibility into your applications?

What are the Web Content Accessibility Guidelines

If you have ever looked into accessibility in applications you probably heard of the Web Content Accessibility Guidelines. These guidelines are provided by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). W3C is the main international standards organization for the internet and provides standards to help make the web accessible which are recognized by governments and businesses internationally.

Who are the Web Content Accessibility Guidelines for?

The WCAG is intended for developers. It is not only for large cooperations and governments to follow in order to make their products accessible to all bodies but also for individual developers because they are to provide web access to all users. This is extremely important, as a developer, we don’t anyone to left out in using our products and we should always strive to make products and applications that anyone can use.

What are the main principles of the Web Content Accessibility Guidelines?

There are two versions of WCAG created by W3C WCAG 2.0 and WCAG 2.1. They are both stable referencable technical standards for web accessibility. They both have 12-13 guidelines, that are categorized into 4 principles: perceivable, operable, understandable, and robust. Each guideline has three levels of success criteria, A, AA, and AAA.
We will be going over the principles for WCAG 2.1 since it is the most up to date version, it is exactly the same guidelines as WCAG 2.0 provides, but it has a few more additions. The four main principles we will be discussing are provided directly from W3C’s WAI website.

A brief overview of the 4 principles of accessibility are:

Perceivable

Perceivable content means that users must be able to perceive information and user interface components presented, and it can not be invisible to all of their senses.
The main ways to achieve this are to:

Provide text alternatives for non-text content. Provide captions and other alternatives for multimedia.
Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
Make it easier for users to see and hear content.

Operable

Operable content means creating components and navigation that are operable and a user should be able to perform the operations needed to navigate an interface.
The main ways to do this are:

Make all functionality available from a keyboard.
Give users enough time to read and use the content.
Do not use content that causes seizures or physical reactions.
Help users navigate and find content.
Make it easier to use inputs other than using the keyboard.

Understandable

Making understandable content means that users should be able to not only operate and interface but they should be able to understand the interface and information as well.
To achieve this:

Make text readable and understandable.
Make content appear and operate in predictable ways.
Help users avoid and correct mistakes.

Robust

Robust Content must be detailed enough to be used by a wide variety of user agents and assistive technologies. The main goal is to have content stay accessible as technologies and user agents evolve.
To make robust content we mainly want to:

Maximize compatibility with current and future user tools.

If any of these guidelines are not met, users with disabilities may not be able to use your application. Under all of these principles, there are a total of 12 guidelines.
These for principles lay the foundation for which is necessary for anyone to use your application, but it does not end here.

How you can begin to implement accessibility into your applications?

There is a world of ways you can begin to make your applications more accessible and there are many resources to begin implementing these principles. The A11y Project is a checklist that goes over these principles and helps you checklist accessibility in your application based on WCAG.
Another helpful tool for building accessible applications is running Google Lighthouse tests on Google Chrome. Lighthouse provides an accessibility score for any application whether deployed or in development mode. After running tests on Google Lighthouse there is detailed documentation on how to fixe issues your applications may have and you can begin boosting your application's accessibility score.
I hope this was helpful in understanding what the Web Content Accessibility Guidelines are and how that is important and necessary for all applications on the web and of course, understanding what accessibility means for developers and how we should be implementing it to our applications. You can always reference W3C’s recommendations for accessibility to improve your applications.

Cover is from Paul Green on Unsplash.

What The Webpack

Carmen Salas — Thu, 02 Jul 2020 12:57:02 +0000

Webpack can seem overwhelming and something you might have avoided learning about when building out React applications. But it is pretty simple to set up and create yourself, for your React apps. This will be a beginner’s guide into Webpack and what it’s actually doing. Let’s unpack any questions you might have about Webpack… haha...

We will be going over:

What is Webpack?
How to Configure Webpack
Cache Busting in Webpack

What is Webpack, how does it work, and what is it doing?

If you are familiar with Create React App, Webpack is responsible for the main functionality in Create React App, along with some other things like Babel (a JS compiler). Create React App is using Webpack to bundle your files, together, and is the reason why developing React applications using create React app is really easy.
Webpack is a module bundler. But what does this mean? It means Webpack compiles JS files into one main file or however many files you want to bundle your code into, but typically it is one bundle file.
Webpack comes with many features such as module bundling, file minification(the process of minimizing code by getting rid of white space, comments, unnecessary code, and minimizing/ shortening code.), SASS compilation, etc. It bundles and complies with your developing application into something that the browser can understand.
Webpack manages dependencies and loads code that needs to be loaded first. Webpack keeps track of what files depend on what and loads them accordingly.
The problem Webpack solves is when developing large apps, your dependencies can pile up and intersect different files which make it complex and difficult to manage. Webpack manages all these dependencies and files for you, bundles it to plain JS that the browser can understand.

How to Configure Webpack

If you want to add loader and plugins to your Webpack bundle, you have to do this in a Webpack config file.
Here is what a webpack config file looks like.

//Webpack.config.js file:
const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  }
};

Let’s unpack what is happening in this file.

First, we set the mode to be development and this tells the Webpack not to minify our code, which is extremely helpful when developing.
We then, have to make sure everything we have in this file is exported as a module if we want to use it.
In your package.json file, created when you initialize your application with npm init you can tell Webpack to run in scripts like so:

"scripts": {
    "start": "webpack  --config webpack.config.js"
  },
//The webpack config file can be named anything,
//In this case, it is webpack.config.js

Next the entry property, takes in the src of where your entire application runs. By default, Webpack will look for an index.js file in a src folder but here is where you can specify the file where your application starts and what code needs to be bundled.

The output property is an object, where you want your code to be outputted. The filename property can be named anything you’d like, typically it is main.js.
The path property specifies where you want the code to go. In this case, we are resolving an absolute path to the dist directory, you can call this folder anything. Essentially this is the folder that Webpack will bundle your application in, traditionally this folder is dist.
This is the basics for configuring your Webpack file and how to get Webpack to run your application. There is of course more you can add to this config file such as loaders and plugins. You can refer to the Webpack docs if you are interested in this.

Cache busting in Webpack

Cache busting can be a confusing topic at first, but it can be important to the functionality of your application and something that can be easily done in a Webpack.
When you bundle up your application with Webpack, Webpack bundles everything up in a deployable /dist directory.
Once your application is deployed to a server, and a user is visiting your application, the client (typically a browser) has to reach the server again to retrieve all of the application’s assets.
This is why browsers cache application assets. Essentially they save files or modules form the /dist directory so that the next time the user refreshes or visits the browser doesn’t have to retrieve any assets it already remembers.
How to prevent browsers to cache bundles for CSS or files we have made changes to?
The browser caching files can cause a problem because if we change files that have been cached, the browser might not update them and assume the file is the same just because the name of the file hasn’t changed.
The idea behind cache busting is we want to create a new file name every time you make changes to a file and keep the file name the same if you haven’t made changes. This way when you have made changes to a file, when the client makes requests to the server to retrieve the application assets, the files you have changed will update since the browser does not recognize the filenames.
Luckily, a Webpack comes with a built-in substitution feature in output.filename in the Webpack config file called [contenthash].
The [contenthash] substitution will create a unique hash based on whether the content of an asset has changed or not, updating only when it does.
When you add [contenthash] to the output object in your config file it will look something like this:

//the output object in module.exports from the webpack.config.js file:

output: {
    filename: "main.[contentHash].js",
    path: path.resolve(__dirname, "dist")
  },

So, I hope this introduction to Webpack was easy to digest and answered a few questions you might have had about Webpack. Webpack is doing a lot of the behind the scenes work to make your React applications work, all you need to do is make sure you configure it correctly for your application. Next time you're working on a React app, consider configuring Webpack yourself!

Lazily Suspending in React

Carmen Salas — Mon, 29 Jun 2020 13:54:17 +0000

By Carmen Salas

I am currently learning how I can optimize the performance of my React applications. When wanting to render components in an application it can take time and slow down your application. One of the React functions I am learning about is React.lazy, which allows your components to lazy-load. Let’s talk about how we use lazy in conjunction with React’s newer feature, Suspense.

We’ll go into:

What is lazy loading and why is it important?
What is lazy loading in React?
What is Suspense in React?
How to use React.lazy and Suspense in a React application

What is lazy loading and why is it important?

Lazy loading stops a webpage from rendering all of its contents at once. Lazy loading allows the contents of a page to render only when a user reaches that part of the page. An application basically holds off on rendering contents if a user does not reach the section of the page with those contents.
The benefits of this, are that it optimizes time and space for content delivery on an application.

What is lazy loading in React?

React has a function react.lazy, which makes it easy to lazily load the contents of a page by code splitting.

react.lazy bundles components you are importing to automatically load when rendering the entire page

The way react.lazy works is it takes in a function that must call a dynamic import. This means a promise is returned which resolves to a default exported module that is in your application.

Here’s how you would use it in an application:

const Banner = React.lazy(() => import('../HomePage/Banner'));

This will make the Banner component in my application lazily load when I use it, as opposed to how I would normally import it:

import Banner from '../HomePage/Banner';

Now if we want to use the lazy function in our application we have to wrap the lazy component in a Suspense component

What is Suspense in React?

The <Suspense> component is a new addition to React 16.6. It will essentially wait to see if what you want to load is ready to load, and while waiting, Suspense will render a fallback.
Suspense takes in a prop called fallback which is your loading state,
While loading,Suspense will give you the fallback this could be a component, like a loading spinner or text.

How to use React.lazy and Suspense in a React application

Now that we know how lazy and Suspense will work together to lazily load contents on to your application let’s see how the code looks.

This is how we would wrap our lazy component in a Suspense component.

import React, { Suspense } from 'react';
import Spinner from 'react-bootstrap/Spinner';

<Suspense fallback={<Spinner animation="border" variant="info" />}>
    <Banner/>
</Suspense>

Here I wrapped my lazy component Banner in the Suspense component and set the fallback in Suspense to be a spinner component imported from React Bootstrap.

Pretty simple right?

This will then lazily load the Banner component in my application. While loading a react-bootstrap spinner will render on the page while the Suspense component is waiting to see is the Banner component is ready.

It will look something like this:

In conclusion,

These pretty new features from React are really great for optimizing the performance of your applications when it comes to loading and rendering components. This is a pretty simple way to show how to implement lazy loading in your react components but there are endless possibilities in which you can use lazy and Suspense to upgrade and benefit your applications. Try it out!

Cover by Jen Theodore on Unsplash

The Read on Redux (vs Context)

Carmen Salas — Mon, 15 Jun 2020 11:44:26 +0000

A question I ran into when learning Redux was:
What’s the difference between the React Context API and Redux?
So I did some research...

What we will go over:

What is Redux?
What is Context?
How does data flow when using Context and Redux?
The Pros and Cons of Redux and Context

What is Context?

The React Context API creates "global" data that can be easily be passed down in a tree of components. This is used as an alternative to “prop drilling” where you have to traverse through a component tree to pass down data with props.

React Context consists of:

React.createContext

This is where you create a Context object. This is the object that wraps around your components and allows the children components to subscribe to the Context object. When a child component renders it will read the current context value from the closest matching Provider above it in the tree.

Context.Provider

Every Context Object comes with a Provider React Component which wraps around components you want to be subscribed to the Context object and changes that happen to the context. Every component wrapped in the Provider component is a consumer of the context.

The Provider component accepts a value prop that is passed to consuming components
The main thing to remember is that all consumers of a Provider will re-render whenever there is a change to the Provider’s value prop.

I like to think of Context as a flower pot. The Provider component is like the pot of the plant. The Provider component takes in data through the value prop similar to how the flower pot takes in water. That data is then available to the consumers of the Context much like water flows through an entire plant from the watered pot.

What is Redux?

Redux is a state management library used to store and manage the state of a react application in a centralized place. Redux abstracts all states from the app into one globalized state object so that any component and any part of the app can access the different properties of the global state. Redux is separate from React and there are tools react offers to help integrate Redux into React apps such as the React Toolkit.

Redux consists of:

Actions

Actions describes what you wanna do to your states.

Reducers

Reducers describe how your actions transform from state to state and keeps track of the actions you are switching from.

The store

The Store is the object that brings the actions and reducers together.

How does data flow when using Context and Redux?

To best demonstrate how Context and Redux are used, I created a code sandbox where I demo both Redux and Context in a small application. In my app, each pet is either asleep or awake. Click the Wake Up or Sleep buttons to see how each pet image is rendered using Redux or Contex in the console.

If you click the Context button, the console will log what pets have been rendered using Context.

If you click the Redux button, the console will log what pets have been rendered using Redux.

There are a few ways you can use Redux in a React application. In the redux.js file, we took advantage of some of the APIs from the Redux toolkit package.

These are the different parts that make the data flow in the Redux demo:

createAction() is a helper function that accepts an object of reducer functions a slice name, and an initial state value. It will automatically generate action creators and action types that correspond to the reducers and state.
configureStore() is an abstraction over the standard createStore in Redux, which creates the global store. In the example, our reducer is being passed in.
connect() this function connects a React component to a Redux store.
We then use <Provider> to make the store available to the components.

Notice how when you click the button of one pet, the other pets do not render in the Redux demo. This is because, in
connect(), when mapState is called, it will check to see if the state has changed or not, only if it has it will re-render. This is one of the benefits of using Redux and helps optimize larger applications with many changing states.

The Pros and Cons of Redux and Context

Both Context and Redux are ways to manage state in a React app.

The main benefit of using Context is that it is simpler to use and is a great way of passing state down to any level of a component tree without having to pass props down through traversal.

The cons of using Context is that unless you separate your different states into separate Providers, the consumers of a provider will rerender if the context of a Provider changes. This can be very inefficient in a large app where the are many states you use as the context in a provider or if only a few states change that effect the renderings of other components.

Redux, on the other hand, attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen and are great for applications that have multiple states that will reach different components in a component tree. Redux comes in handy when you have an app that has a more complex state that is updating frequently. The main benefit is that if states have not changed they will not re-render.

Ultimately it depends on the size of your applications and what kinds of states your components will be using.

The Scoop On Scope (In JavaScript)

Carmen Salas — Wed, 18 Dec 2019 17:37:01 +0000

By Carmen Salas

Scoping in JavaScript refers to what variables your program has access to at any given moment in time. So let’s start scooping into this scope stuff...

What are the different types of scopes?

Global scope
Function scope
Block scope

By default, when coding in JavaScript, you start in the window scope or the root scope. This is the global scope. This means there is only one global scope in a JS document.

Global Variables

Declaring a variable outside of a function is creating a global variable. Global variables have a global scope. Variables in the global scope can be accessed anywhere else in your program, in any other scope.

Local Variables

Unlike global variables, local variables are only available inside an enclosed part of your program such as a function or block scope, like if statements or loops. A local variable has a local scope..


let globalVar = "This is a global variable";

console.log(globalVar);  
// This will log  ‘This is a global variable’

function localScope () {
let localVar = "This is a local variable";

console.log(localVar); 
// This will log ‘This is a local variable’
console.log(globalVar); 
// This will log  ‘This is a global variable’
}

console.log(localVar); 
// This will throw an error: ReferenceError: LocalVar is not defined

If you run this code, the global variable globalVar can be accessed inside the function localScope. However, the local variable localVar can only be accessed in the scope of the function localScope and not in the global scope.

You can think of local scopes as a diary. Pretend you are a child keeping a diary (a local scope). You can write whatever you want inside of your diary (i.e. create as many variables as you want in a function), and name events that took place outside of your diary (accessing global variables outside of your function or calling other functions). However, no one else can look inside your diary, ESPECIALLY not your parents...cough...cough...GLOBAL SCOPES. Similar to how a parent is not able to look inside a child’s diary, you are not able to access local variables in the global scope.

Function Scope

If you declare a variable inside of a function, the variable can only be accessed within that function creating a function scope.

function myMoney (){
    let me = "This is my money"
    console.log(me); 
//This logs "This is my money"
}

function yourMoney (){
    let you ="This is your money"
     console.log(me); 
//This will throw an error: ReferenceError: me is not defined
}

If you run this code, the variable me in the function myMoney is not accessible in the function ourMoney. When console logging me in yourMoney, an error is thrown.
Functions do not have access to each other’s scopes.

Block Scope

If you declare a variable inside curly brackets { } like in an if statement or for loop, you are creating a block scope.

Variable Keywords

Variables declared with the keywords let or const have a block scope.
Variables declared with the keyword var have a function scope. Variables declared with var can only be accessed within the function where they were declared (or globally, if they were declared in the global scope). Var only has a local scope when declared inside a function, meaning if a variable is declared within a block, it can be accessed outside of that block.

if(true){
let blockScope = "unavailable"   
var onlyFunctionScope = "available"
}

console.log(blockScope); 
//This will throw an error: ReferenceError: BlockScope is not defined
console.log(onlyFunctionScope); //This will log 'avaialable'

If you run this code, only the var keyword variable will log its value outside of the block scope of the if statement. This does not happen with the variable blockScope because it was declared with the keyword let.

However,

function varScope(){
var onlyFunctionScope = "available"

console.log(onlyFunctionScope);
}
console.log(onlyFunctionScope); 
// This will throw an error: onlyFunctionScope is not defined

If you run this code, the variable onlyFunctionScope is not available outside of the function varScope because it was declared with var and this is a function scope keyword.

In conclusion, creating a new function or block statement (anything with curly brackets {}), you are creating a new scope. Overall, gaining an understanding of how scoping works in JavaScript, will help you track bugs and help you avoid creating collisions. Understanding variables and their scope will allow you to create more efficient programs that are properly named. You will be better at declaring variables and choosing what variables will go where. When creating the same global variable twice in a large program, you can easily run into bugs, but thanks to local scopes, you do not have to rely on global scopes to store data. Which can be confusing in the long run or when working on larger projects.