DEV Community: Andrew Simmons

Set, a Standard Built in Javascript Object

Andrew Simmons — Fri, 17 Dec 2021 17:12:36 +0000

Introduction

I know longer consider myself a javascript newbie, but neither do I consider myself an expert because when I run across stuff like:

const getUniqueValues = arr => {
   const uniques = new Set(arr)
   const result = []
   uniques.forEach(val => result.push(val)
   return result
}

And I'm thinking what the heck is Set? Did they declare a class that I didn't see...well know you see Set is a built in object of Javascript just like an array or an object 🤯.

According to MDN web Docs: the Set object lets you store unique values of any type, whether primitive values or object references.

So basically we use Set to store unique values of any type. Let's look at some of it's functionality and common use cases.

How to Declare

Just like you can declare an array using the key words new Array we can do the same with new Set:

const arr = new Array(1, 0, 2, 2, 0, 7, 8, 0, 5, 5)
// arr => [1, 0, 2, 5]

const set1 = new Set(d)
// d => Set { 1, 0, 2, 7, 8, 5 }

//or
const set2 = new Set([1, 0, 2, 2, 0, 7, 8, 0, 5, 5])
// set2 => Set { 1, 0, 2, 7, 8, 5 }

As you see when ever a set is declared using an array a Set object is returned that contains only unique values.

Now a Set object can contain any type of value but it only keeps the unique values, for example:

const set3 = new Set(['rainbows', {animal:'tiger'},2,3,3,3, 'rainbows', 'food', 20], {animal:'tiger'})

// set3 => Set { 'rainbows', { animal: 'tiger' }, 2, 3, 'food', 20 }

Built in Methods

Set has a few built in instance methods that we can use to manipulate and access information about our Set instance:


const set1 = new Set([2, 4, 5, 3, 0])

//The add method appends an element to the end of the Set and 
// returns the Set with the new element.
set1.add(1)
// set1 => Set { 2, 4, 5, 3, 0, 1 }

//The .delete method returns true if it successfully deleted the element.
set1.delete(5)
// set1 => true

//and false if it the element wasn't present to delete.
set1.delete(5)
// set1 => false

//The `.has` method returns true if the element is present and 
// false if it is not, similar to the .includes for arrays
set1.has(0)
// set1 => true

//The .clear method erases the entire Set so that it is empty.
set1.clear()
// set1 => Set{}

Iterator Methods

For the purpose of this post we are only going to look at two of the iterator methods as some of the other ones are aliases and operate similar to the ones we will describe.

First is the .forEach method that works similarly as the .forEach array method:

const set1 = new Set(["james", "andrew", "john", "charles"])

const capitalize = name => {
  console.log(name[0].toUpperCase() + name.slice(1, name.length))
}

set1.forEach(capitalize)
// => James
//    Andrew
//    John
//    Charles

set1
// => Set { 'james', 'andrew', 'john', 'charles' }

Do note that just like the array method .forEach it does not return anything nor does it change the original set

The second iterator method works similar to a linked list using .next to iterate through the Set. First you have to initiate an iterator using the .values() or .keys method and then you can use those instances of the Set to iterate:

const set1 = new Set(["james", "andrew", "john", "charles"])
const setIterator = set1.values()

setIterator.next()
// => { value: 'james', done: false }

setIterator.next().value()
// => 'andrew'

setIterator.next()
// => { value: 'john', done: false }

setIterator.next()
// => { value: 'charles', done: false }

setIterator.next()
// => { value: undefined, done: true }

setIterator.next().done
// => true

Once the iterator has reached the end of the Set the done property will return true.

An Example Use Case

You've already seen a possible use at the beginning of this post, which is probably the most obvious one I can think of. We used the Set object to get all of the unique values in an Array and return those unique values in an array:

const getUniqueValues = arr => {
   const uniques = new Set(arr)
   const result = []
   uniques.forEach(val => result.push(val)
   return result
}

You can also get the length of a set by calling .size property:

const set1 = new Set([1, 2, 3, 4])
set1.size
=> 4

Conclusion

I wrote this post to help myself better understand the functionality of the Set object and hopefully help others in the future who run across it and also wonder what it is. There is a lot more that wasn't covered in this post and if you're interested checkout the docs.

A Reflection of Understanding Problems

Andrew Simmons — Tue, 02 Nov 2021 15:48:59 +0000

Introduction

In programming, it's possible to say understanding a problem is more important than anything else. It doesn't matter what technologies you use, or which languages you know, if you don't understand the problem, then you most likely won't be able to provide an effective nor efficient solution. As beginner programmers we (myself included) often jump at problems with gusto, excited to show off our skills we've just learned. And how often do we discover that we missed a key part of the problem that stops our solution in our tracks causing us to scrap a genius solution we had written that didn't address a key part of the problem.

Beginner Bugs and Frustrations

Over the past 5 months I have been attending flatiron school bootcamp, and I'll be graduating this week if things go as planned. I began to reflect the past couple of weeks as I finished my magnum opus or grand finale of the program about how I've grown since I started. I remembered throughout the program how often I would encounter code not doing what I expected or throwing an error, and being so frustrated because I didn't understand why. I would just reread my code and keep saying to myself this should work, why doesn't it work.

const obj = {title:"John", age:22}

if (obj.name === "John") {
    console.log(obj.age)
}
//Why doesn't this work?!?!??!

I'm sure many of us have been there. I eventually learned to calm myself during those frustrations and go through my code piece by piece. And when looking for bugs I learned to always look at my code and confirm that it is doing what I expected, to check that the object you're returning actually has a property called name and it's not actually called title or some other nonsense. Start from the beginning of the logic and work to the end. I still make those types of mistakes today, but now I recover from them more quickly and I'm able to find them in a timely manner.

Growing into New Problems

In the midst of my last project I also ran into problems, but I realized that they were different types of problems. When something doesn't work the way you expected it leaves you with a sense of powerlessness, because it means you made a typo, or you don't understand your code like you thought you did, which leads to frustration. But the type of problem I found in my project was not one of understanding why, but one of how. How could I do this? In my last project I wanted to have my front end and back end being seamlessly updated by input from the user. I knew what I wanted and as I wrote the code I saw that what I wrote wasn't going to work. I knew why it didn't work, and at that moment I didn't have an answer. However instead of that powerless feeling that I was accustomed to when facing a problem. It was the opposite! I felt empowered, I understood the problem, I could solve it! It just took some effort to work it out.

And I did, after trying a few different potential solutions, I found the one that seemed the best and I was eventually able to implement a live update feature into a budgeting web-app. The solution isn't perfect and I'm sure it could be improved upon. But working through that problem made me realize that I had made the mistake of not understanding the problem before jumping in. I went through various solutions that didn't work. One solution implemented caused the page to do a complete rerender after every character the user typed. And all of those failed solutions were pit stops on the way to my solution, but I'd like to think I might have arrived more quickly to a final solution if I had stopped to think about the problem and planned my solution a little more first.

Conclusion

Without a doubt, I have learned a lot over the past 5 months: new languages, new technologies, and new terminology, but I think I've also started looking at problems differently. And that might be the most valuable asset I've taken from the program, how to approach a problem to arrive at an effective and efficient solution.

Making a Custom Hook

Andrew Simmons — Sun, 03 Oct 2021 14:32:41 +0000

Introduction to Hooks

Hooks were released in React 16.8, you've probably become familiar with the useState and useEffect hook using them to keep track of state or do some basic actions in your web app like making a 'GET' request. But there are actually a lot more opportunities for us to use hooks, because we can make our own.

As programmers we always try to make our code DRYer, and hooks are an excellent tool that can help us do this. Think of an action that you have to do various times in various components, a couple of examples come to my mind: Making a form or making a request to the server. These would both make great custom hooks that we could use to help DRY up our code. In this post, I'll be teaching you how to make a custom hook for all of the forms in your project.

Looking at the original code

When you go to make your custom hook, first look at the original code that the hook will be replacing:

const NewReview = ( {airline, currentUser} ) => {
  const [form, setForm] = useState({
      title:"",
      score:1,
      content:""
    })

  const handleChange = e => {
    setForm({
      ...form,
      [e.target.name]:e.target.value
    })
  }

return (
<form onSubmit={handleSubmit}>
        <input type="text" name="title" value={form.title} onChange={handleChange} placeholder="Title"/><br/>
        <input type="text" name="score" value={form.score} onChange={handleChange} placeholder="Score"/><br/>
        <input type="text" name="content" value={form.content} onChange={handleChange} placeholder="Score comments"/><br/>
        <input type="submit" placeholder="Submit"/>
      </form>
)

That is one example, and if I look at other examples, I see a pattern that all of my forms have an initial state, and then a handleChange function to keep the state and the input fields reflecting the same value.

Great! Now that we have an idea of what our hook will include, let's get started!

Making the Hook

You can organize your code how you like, but I would recommend putting all of your custom hooks in one place, I'm going to have a folder under src labeled hooks.

One important thing to remember is that hooks have a very specific naming convention that you have to follow otherwise react won't know that you've made a hook. All hooks must start with the word 'use'. That's why the 'useState' and 'useEffect' are named as they are. So for our form hook we could have names use as 'useForm', 'useInput', or 'useMyCustomFormMakerHook'. But I like to keep it simple, so we'll go with 'useForm' for ours.

import React, {useState} from 'react'

export const useForm = (initialForm) => {

  return 
}

You can also use other hooks to make your custom hook, so we've imported useState. Any input that you want for the hook to recieve, you place it as an argument like we've done above as initialForm.

Now in our original hook, we had two main parts, we had our state that we used for our values in the form and we have a function that we called handle change. So let's add that in from our original code:

import React, {useState} from 'react'

export const useForm = (initialForm) => {
const [form, setForm] = useState(initialForm)

  const handleChange = e => {
    setForm(
      {...form,
      [e.target.name]:e.target.value}
      )
      // console.log(e.key)
  }
  return 
}

There that looks great! Now our last step to complete our hook, is to think about what we want to return. I always think about the useState hook and how it returns a variable and a function because that's exactly what we're doing here, and we can make it look like the original useState by returning them in an array like so:

import React, {useState} from 'react'

export const useForm = (initialForm) => {
const [form, setForm] = useState(initialForm)

  const handleChange = e => {
    setForm(
      {...form,
      [e.target.name]:e.target.value}
      )
  }
  return [form, handleChange]
}

Alright let's try this new hook out in the wild by replacing our previous code with the hook:

import { useForm } from "../hooks/useForm"

const NewReview = ( {airline, currentUser} ) => {
  const [form, handleForm] = useForm({
      title:"",
      score:1,
      content:""
    })

return (
<form onSubmit={handleSubmit}>
        <input type="text" name="title" value={form.title} onChange={handleChange} placeholder="Title"/><br/>
        <input type="text" name="score" value={form.score} onChange={handleChange} placeholder="Score"/><br/>
        <input type="text" name="content" value={form.content} onChange={handleChange} placeholder="Score comments"/><br/>
        <input type="submit" placeholder="Submit"/>
      </form>
)

And there we go! We've just made a custom hook to make our code DRYer. This hook currently only works for text type inputs, but it's easy enough to put in a conditional to check for other types as well. Give it a try! Now see if you can make your own custom hook for a basic get request!

For more information on custom hooks, checkout the React docs here

Handling the Most basic Login with React and Sinatra

Andrew Simmons — Sat, 04 Sep 2021 18:09:23 +0000

Introduction

In this article I will be explaining how to handle a basic login that only uses a username for authentication. Part of the purpose is to be able to mock having a currentUser on the front end without getting into real authentication. For this project we will be using React on the front-end and Sinatra on the server side.

Handling a Successful Login

Setting Up The Basic Route Server-Side

First we're going to set up the route for our server to perform a GET request. Since we're going to be authenticating the user by the username it's quite simple:
In my application the user has_many trips, which we will want access to later.

get "/users/:username" do
    user = User.find_by_username(params[:username])
    user.to_json(include: [:trips])
  end

Setting up the Login Client-Side

We are going to keep it simple here as well, just a basic input with a submit button. First we're going to set up our basic functions for handling the submit and change for the form data. Don't worry about findCurrentUser, we'll get to that in a bit.

const [userLogin, setUserLogin] = useState("")
const handleSubmit = (e) => {
  e.preventDefault()
  findCurrentUser(userLogin)
}
const handleChange = e => {
  setUserLogin(e.target.value)
}

Using our state we can set up our form for a very basic login:

<div>
  <form onSubmit={handleSubmit}>
     <label htmlFor="login" value="Username">Username:   </label><br/>
     <input type="text" name="login" value={userLogin} onChange={handleChange} autoFocus={true}/>
     <input type="submit" value="Login"/>
   </form>
</div>

Making the GET Request

Now to set up the fetch, we're going to be using async and await to help our code look a little cleaner and easier to understand:
I'm using the useHistory hook from react-router-dom to redirect the user to their trips page after a successful login

async function findCurrentUser(username) {
      const response = await fetch(`${baseUrl}/users/${username}`)
      const user = await response.json()
      changeUser(user)
      history.push(`/users/${user.id}/trips`)
      }
    }

We are also bringing changeUser from our App component via props to handle the state of currentUser:

function App() {
  const [currentUser, setCurrentUser] = useState(null)

  const changeUser = (user) => {
    setCurrentUser(user)
  }
return (
 <Route exact path="/login">
     <Login changeUser={changeUser}/>
 </Route>
)
}

With all of that set up someone should be able to successfully login!

Success!!!

Failed Login Attempt

Handling Failed Attempt Server-Side

But what happens when someone tries to login, and they don't already have an account?

First let's look at how to handle this error on the server-side. Sinatra has a helper method status that we are going to take advantage of. It allows us to change the HTTP response status code. 401 is the status code for unauthorized/unauthenticated, which seems to fit what we want to return. So if the user exist, return the user, else change the status code to 401 and return an error message.

get "/users/:username" do
    user = User.find_by_username(params[:username])
      if user
        user.to_json(include: [:trips])
      else
        status 401
        { errors: "user doesn't exist" }.to_json
      end
  end

Handling Failed Attempt Client-Side

Now that we are changing the status code on a failed attempt, we can use that to deal with the client side of things. We can use response.status to access the status code, and if it equals 401, do nothing, otherwise perform the actions of a successful login.

async function findCurrentUser(username) {
      const response = await fetch(`${baseUrl}/users/${username}`)
      if (response.status === 401) {
        return null
      } else {
        const user = await response.json()
        changeUser(user)
        history.push(`/users/${user.id}/trips`)
      }
    }

Let's give it a try now:

Great! Now we're no longer getting an error when someone has a failed login attempt, but there's one problem, when our user tries to login, it looks like nothing is happening for them. Let's fix that by giving our user an error message.

Displaying an Error message

To handle the display of an error message, we are going to handle it with useState:
const [error, setError] = useState(null)
And we're going to change our fetch just a little bit, instead of just returning null, we're going to set an error message:

    async function findCurrentUser(username) {
      const response = await fetch(`${baseUrl}/users/${username}`)
      if (response.status === 401) {
        setError("That user doesn't exist, try again or sign up for an account!")
      } else {
        const user = await response.json()
        changeUser(user)
        history.push(`/users/${user.id}/trips`)
      }
    }

Now that we have our error message all we need to do is display it, and since we are using state and setting it to null on render it will only display when it has been changed from null.

<div>
      <form onSubmit={handleSubmit}>
        <h3 style={{color:"red"}}>{error}</h3>
        <label htmlFor="login" value="Username">Username:</label><br/>
        <input type="text" name="login" value={userLogin} onChange={handleChange} autoFocus={true}/>
        <input type="submit" value="Login"/>
      </form>
    </div>

So that it stands out I've put it as an h3 with text color of red.

Conclusion

That's the basics of how to handle both a successful and failed login attempts with just a username, now you can try to figure out how to handle what's going to get displayed based on the current user being logged in or not. Good luck!

Extras

For more information on some of the things I mentioned checkout:
useHistory Hook

Client Side Routing in React

Andrew Simmons — Fri, 23 Jul 2021 19:25:09 +0000

When approaching routing in React it can be a bit daunting at first for the causal beginner, I hope that this post makes it easier to understand by breaking it up into easily digestible chunks.

Installing and Setup

We are going to be using react-router-dom to handle our routing, if you want to look at the documentation, you can refer to it here

First we need to install react-router-dom so run the following command in your terminal:

npm install react-router-dom
//or
yarn add react-router-dom

BrowserRouter, Switch, and Route

After you have it installed, we're going to go our highest parent component, typically that will be App.js and we are going to import BrowserRouter, Switch, and Route.

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

Then we are going to put in the basic structure for our routes. We will have BrowserRouter renamed as Router as the most outer wrapper:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>

</Router>
)
}

Inside Router we will place our Routes as such:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>
  <Route path="/">
    <Home/>
  </Route>
  <Route path="/about">
    <About/>
  </Route>
</Router>
)
}

And then finally inside Router we will wrap all of our Routes with the <Switch> component like this:

import {BrowserRouter as Router, Route, Switch} from "react-router-dom"

function App() {
  return (
<Router>
  <Switch>
    <Route path="/">
      <Home/>
    </Route>
    <Route path="/about">
      <About/>
    </Route>
  </Switch>
</Router>
)
}

The Switch component makes it so that if your are on the "/" root address you won't see what is in the "/about" address. You can think of it like a switch statement or like tabs where you can only see one at a time. But your url matches more than one it will display the url it matches first going from top to bottom. To prevent that we can add exact key word to only allow the exact url to display our content:

  <Route exact path="/about">
      <About/>
  </Route>

Link and NavLink

Okay, we have our routes, now let's make a NavBar Component so that our user can access them.

import { NavLink } from 'react-router-dom'

const NavBar = () => {
  return (
    <div>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </div>
  )
}

The only difference between <Link> and <NavLink> is that when ever a Navlink route is selected the Navlink will have the link active attribute applied to it. Each Nav/Link component has to have the to attribute to direct the user to the correct route. Notice that the value of the to corresponds to our Routes in our App component.

Beyond The Basics

That will allow you to set up some basic client side routing, but there is actually a lot more that you can do with react-router-dom. There are some really useful hooks like useHistory, whicht you can use to redirect your user after an event, or `useParams to allow them follow a link for more details about something on your page. Definitely check out the documentation from React Router for more info.

I hope this gave you a good start to managing routes client side.

Using json-server as a Mock Server

Andrew Simmons — Sat, 26 Jun 2021 15:36:41 +0000

Overview

We're going to look at using json-server as a mock server to practice interacting with a server. We are also going to be using fetch to do both GET and POST requests. Before we get started, make sure you have an index.html and an index.js file ready to display our data. Let's get started!

Install and Set Up

To install json-server run npm install -g json-server in the terminal. Then create a file called db.json you can type touch db.json in the terminal.

Mock Data

Now we're going to put some mock data in db.json to make sure everything is working. JSON files resemble JavaScript objects and arrays, so it should look familiar.

{
  "blogs": [
    {
      "title": "title example",
      "content": "content example",
      "author": "Your favorite author",
      "id": 1
    },
    {
      "title": "another title example",
      "content": "more content example",
      "author": "Your friend's favorite author",
      "id": 2
    },
    {
      "title": "title example number 3",
      "content": "even better content",
      "author": "me",
      "id": 3
    }
  ]
}

Starting the Server

After we have some data ready, we're going to start the server by running json-server --watch db.json in the terminal.

You should see something like this:

user@user:~/Development/practice-project$ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/blogs

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

If you ctr + click on the link under resources [http://localhost:3000] Your db.json file should open up in your browser.

It'll look something like this:

Excellent now we have a server running and ready to go!

Fetch, How to GET Data from Your Server

To access our server in JavaScript we are going to be using fetch. It's fairly simple. We call fetch on our server's URL as you see below, that returns a promise, which we call .then which returns a HTTP response, now to change the HTTP response from the server to something we can use we call another .then and that gives us something we are familiar with a JavaScript object. Once we have the data, we can then do whatever we want with it, most likely display it, but for now, we're going to check to make sure it's working and log it to the console.

Make sure your index.js is linked to your index.html like this:

<body>
  <script src="index.js"></script>
</body>

Put this code in your index.js file and open index.html in your browser

fetch("http://localhost:3000/blogs")
.then(response=>response.json())
.then(data=> console.log(data))

Then you should see something like the image below in the console in the developer tools:

It works! Now what you can do is write a function such as displayBlog() and call the function on data like this:

fetch("http://localhost:3000/blogs")
.then(response=>response.json())
.then(data=> displayBlog(data))

How to POST data to json-server

So we've made a GET request to the server and we are able to display the data from our server, now let's learn how to send data to the server. We're going to use fetch again, but there's a little more to it this time. We also need to include configuration for our fetch.

Fetch Configuration

There are a lot of different options for the fetch configuration, but for our purpose we're only going to need three: method, headers, and body.

The method is what type of request we're going to make, which will be a "POST". headers are telling fetch what type of data we'll be interacting with, and for us it'll be "Content-Type":"application/json". And lastly body is the data that we're going to be posting to the server.

const newBlog = {title:"Learning JavaScirpt", content:"I learned about objects today!", author:"Java"}

const fetchPostConfig = {
  method:"POST",
  headers:{
    "Content-Type": "application/json",
    "Accept": "appication/json"
  },
  body:JSON.stringify(newBlog)
}

fetch("http://localhost:3000/blogs", fetchPostConfig)
.then(response => response.json())
.then(data => console.log(data))

You can of course also write the configuration directly into the fetch instead of storing in a variable. After we send a POST request to our server it will send a response back which we handle the same as we did our GET request. We should receive exactly what we sent:

And it added the id for us! Perfect! And that's it!

I hope you enjoyed this post. Now get out there and learn how to interact with a server!

Why I Decided to Be a Web Developer, and How You Can Figure it Out for Yourself

Andrew Simmons — Fri, 25 Jun 2021 12:47:20 +0000

How I got here.

Like many people, I imagine, I've had quite a few different jobs, and throughout those jobs I've asked myself the age old question of "What do I want to be when I grow up?" And as we grow older that question of course grows more and more ironic. So we change it to something more along the lines of...What do I like to do? Or What am I good at?

And if we knew the answers to those questions we probably wouldn't have ended up in a job that we were less than fond of. So I heard someone suggest changing the questions we ask: What are things I've liked about old jobs? And What are things I've hated about old jobs and or current jobs?

Sometimes the answers to those questions can even be related, for example I hate having to be in front of customers all day(yeah selling cellphones for a year was hard) and similarly, I like working on projects alone. I also discovered that although I like working alone, I also need a team to come back to at the end of the day to motivate me, to feel a part of a bigger whole.

I came up with a lot of different answers that eventually lead me to believe a developer might be what I want to be when "I grow up":

I like solving problems.
I like thinking of creative solutions.
I like seeing the results of my work.
I like organizing information.
I like researching topics online.
I like working on the computer.
I don't like doing the same monotonous tasks everyday, I need variety.
I don't like my work depending on other people (especially sales)
I don't like needing to put on a smile for work.

And I could go on and on, but I think you get the picture, but even after making that list, it can be difficult take a dive into a new field. I'm a bit of a cautious person and so I've been trying to learn on my own off and on for the past 3 years. I've had some success, but it's been slow going. I ended up learning though that I really do enjoy writing code, and making new projects, which encouraged me to take a leap and to sign up for a boot camp. I'm currently enrolled in Flatiron's fulltime online program and I'm loving it so far.

But if you're a person who has considered web development or any other type of development in the past, and you're not sure, well ask yourself some of those questions and give it a try in your free time, maybe that'll help push you one way or another. Coding isn't easy, but it is rewarding, at least that's been my experience.

The Beginner's Guide to Declaring Variables in JavaScript

Andrew Simmons — Wed, 16 Jun 2021 20:10:30 +0000

If you're new to programming and new to javascript, it can be confusing when to use the three declaration key words. We're going to talk about when to use const, let, and why you should never use var to declare variables. Hopefully by the end of this post, you'll be an expert.

Brief History

Before ECMAScript 2015 - ES6 there was only var, but people found problems with var because you could easily overwrite variables without knowning it. So const and let were introduced. But first let's look at the particular problems of var.

Problems with `Var`

Let's say you are writing some code about books, and so you assign a variable called book to "Harry Potter", but later in you code you forget you already used book as a variable so you assign book to "Lord of the Rings". And then a third time you assign book to "The Hobbit". So now you've just overwritten the variable 2 times.

var book = "Harry Potter"

//Now book = "Lord of the Rings"
var book = "Lord of the Rings"

//And now book = "The Hobbit"
book = "The Hobbit"

book
--> "The Hobbit"

Since var is unreliable, we should never use it. If you need to declare a variable use const.

When in Doubt, Use `const`

const is the most strict with declaratation, a variable can only be assigned once, and it can't ever be changed.

const x = 0

const x = 5
---> SyntaxError: Identifier 'x' has already been declared

x = 5
---> TypeError: Assignment to constant variable.

const is your friend, it'll save you countless hours searching for a bug because that can be prevented by just using const.

When to just `let` it be

When we use let we are declaring a variable that we plan on changing later. The best example is if we need to use a variable as a counter.

let x = 5
----> 5

x + 1
---> 6

x = 2
----> 2

let x = 2
----> SyntaxError: Identifier 'x' has already been declared

In Conclusion

-When in doubt of which one to use, use const.
-Use let when you know the variable's contents are going to be added to or changed in some form.
-Never use var.

DEV Community: Andrew Simmons

Set, a Standard Built in Javascript Object

Introduction

How to Declare

Built in Methods

Iterator Methods

An Example Use Case

Conclusion

A Reflection of Understanding Problems

Introduction

Beginner Bugs and Frustrations

Growing into New Problems

Conclusion

Making a Custom Hook

Introduction to Hooks

Looking at the original code

Making the Hook

Handling the Most basic Login with React and Sinatra

Introduction

Handling a Successful Login

Setting Up The Basic Route Server-Side

Setting up the Login Client-Side

Making the GET Request

Failed Login Attempt

Handling Failed Attempt Server-Side

Handling Failed Attempt Client-Side

Displaying an Error message

Conclusion

Extras

Client Side Routing in React

Installing and Setup

BrowserRouter, Switch, and Route

Link and NavLink

Beyond The Basics

Using json-server as a Mock Server

Overview

Install and Set Up

Mock Data

Starting the Server

Fetch, How to GET Data from Your Server

How to POST data to json-server

Fetch Configuration

Why I Decided to Be a Web Developer, and How You Can Figure it Out for Yourself

How I got here.

The Beginner's Guide to Declaring Variables in JavaScript

Brief History

Problems with Var

When in Doubt, Use const

When to just let it be

In Conclusion

Problems with `Var`

When in Doubt, Use `const`

When to just `let` it be