DEV Community: Ian Ferrier

Variables: Var, Let, Const - JavaScript Basics

Ian Ferrier — Fri, 01 Jul 2022 03:09:16 +0000

Please note, for any of my dev blog posts, I am open to feedback and will make changes so long as I'm still active and can notice the changes. My brain isn't always screwed in all the way, all the time so I may not notice change requests. If you're new, pay attention to any comments that may be correcting information or adding necessary knowledge to this topic. The comments are welcome to more advanced knowledge of the topic or more information to topics related to this topic.

Why use variables?

Basic reason:

A variable is a place where you can store a value. You can make a variable called firstName and give it the value of 'Tom'.
It's like a box that stores what the value of something is.
Lets say we put your first name into the figurative box, the value of the figurative box will be your first name.
Imagine a program as sophisticated as everything you have to do to move from one home to another home. If you didn't label your boxes, you would regret that moving into the new home right? Heck you may even regret that moving everything into the transportation you are using! What if I stacked a bunch of heavy, robust stuff on a box I thought was full of heavy, robust stuff but actually was a box containing fragile stuff like glass kitchenware. Oopsies.
In the most basic use case, we're giving something a label.

Another basic reason: give a reusable value a name and keep code clean

Would you want to spell out (or copy and paste) "supercalifragilisticexpialidocious" every time I needed this in my code for some value? That would bring unnecessary and undesirable redundant code. We want reusable code. Always think about ways to make code reusable.
Would you want to have this sophisticated looking word repeated every time its needed in the code? I would hope not, that would make my eyes want to cry. It looks gross.
Lets take a look at using a variable to contain "supercalifragilisticexpialidocious" using the var keyword.

var longWord = 'supercalifragilisticexpialidocious';
console.log(longWord);
alert(longWord);

See how nice that is? We eliminate the horrendously ugly value of "supercalifragilisticexpialidocious" (fun to say, hard to look at) and we've made it reusable. Let's see what it would look like without the variable.

console.log('supercalifragilisticexpialidocious');
alert('supercalifragilisticexpialidocious');

See? Looks gross. And redundant. And yes writing the variable name is redundant, but it's much better than writing the value multiple times.
Another reason why this COULD be bad is that you're stating a value (the same exact value) twice in the program. I'm not entirely sure if Javascript will eat up more memory in this case rather than using the value of a single variable. It may not be the case, but some programming languages may do this from what I have seen. This bullet point is just a thought, not a fact.

Intermediate reason: A single "spot" to point to reference for a "spot" that experiences change.

Pardon the reason being a bit hard to understand. Hopefully I can clear it up.
Lets say you need to add some values to a count one at a time. I need some way to track this count. Let's take a look:

var count = 0;
count = count + 1; // Yes I'm aware there is shorter ways to do this.
count = count + 1;
count = count + 40;

We've changed the value of count from what it originally was. By the end of this code, the count will not be 0, it will be 42 (Answer to life, the universe, and everything. Always remember to bring your towel).
Programs will use a variable to change and manipulate a value to get a desired end result.

What the heck are `let` and `const`?

Yeah! These two keywords are in the title, what do they do?
Simple answer: they are two other ways to make a variable. But they have special powers. var has many problems, but it's still needed since every browser hasn't quite caught up to the times with the more recent "versions" of JavaScript.

JavaScript: Brief variable keyword history.

The initial decision makers of the earlier "versions" of JavaScript wanted weird things to apparently make JavaScript easier. In my opinion they actually managed to make things more difficult.
var was the keyword these decision makers wanted for making variables.
The problem with var in a very brief description is when you declare a variable with var, var variables can be accessed outside of areas you would expect them to exist. Lets say you have a home with a security system inside. You don't want the whole world to know what your security system is. Well in some weird cases using var allowed for the outside to get access to that information (find out if you have a security system) or just access the variable itself (not the value) which means they could change that variable. Imagine if someone could just change the security system you own. Poof magic, you no longer have SimpliSafe, you have ADT. Absurd to think about but that's the general gist.
let and const come to the rescue! These two variable keywords don't bleed out into unusual areas causing the leaks we described var potentially having. They are "block scoped", which basically in our security system variable for inside a home, that security system stays inside the "scope" of the home. It's not leaking out. Stays right in there.

`let` and `const` in action

let allows us to also change and manipulate variable values much like var. It can be used the counting code snippet above in place of var without issue.
const on the other hand blocks you from manipulating the value of something at all (to an extent). It's a constant. If you needed to get something on a wall in an exact location, you would probably use a wall, floor, and/or ceiling. A constant plane. Its plane of existence does no change. Unless you start breaking any of these things or these might be curved or not exactly straight, BUT for this example, let's just think of flat surfaces. You can't suddenly bring the wall 2 feet towards the center of the house (not easily at least). - const variables are mainly used to assign a constant value. Maybe you have some function that makes a complicated evaluation according to the values you give it to solve for. When you get the solution, you may assign that value to a variable and not want it changed. You would use const in this case. They serve a great purpose for "Read Only" values. Once you make the value, all you can do is read it.
BUT const doesn't prevent you from changing "stuff" within reference type values. If I assign a list to a const variable, I could still change an item on that list. There are ways to protect this from happening, but in const's default state, you can change reference type values assigned to a const variable.
Once the value of a const is assigned, you're not going to be able to change what it is. I can't change a const variable with a reference type value to another reference type value. const does protect that from happening. But it does not (as previously mentioned) prevent a reference type value assigned to the const from being manipulated.
If you use a primitive type value with const, "that sucker ain't changin'" (pardon my non-proper lingo). If it's a number type value with the value of 10, then it's going to stay 10.

Basic examples of `let` and `const`

let count = 0;
count = count + 1;
count = count + 1;
count = count + 40;
// Still becomes 42.

const count = 0;
count = count + 1;
/*
This is going to throw an error saying you can't do this along
with the following lines attempting to change the count.
"const".
*/
count = count + 1;
count = count + 40;
// In the end, count is gonna be zero. Can't change it.

Comments - JavaScript Basics

Ian Ferrier — Thu, 16 Jun 2022 03:59:11 +0000

How to make comments:

Single Line Comments

In order to make single line comments,
you need to start the comment with two forward slashes, like so --> //.
Examples:

// I am a comment

const test = 'hi'; // I can make comments like this too.

This second example shows that a full line is not required to make a comment

Note: You can technically use the multi line comment syntax (shown below) to make a single line comment.

/* I am comment */

Multi Line Comments

You can also break comments out into multiple consecutive lines for larger comments.
Examples:

/*
  I am a comment
*/

/* I am
a
comment */

/*
  I am a comment
  I am a comment
  I am a comment
  I am a comment
  I am a comment
  I am a comment
*/

Why make comments:

Comments are used to make sense out of code you have wrote.

However, you should avoid commenting about everything. You don't need to. You should only use comments to explain very unclear pieces of your code or a high level understanding of the purpose of a complex function, object, class, or anything else that just looks daunting at first glance and may need clarification.

You should write code that is readable without comments. The code should explain itself. However, this is not always going to be the case.

Examples of good reasons for comments (open for criticism for the "good reason" comment examples):

Snippet from a Tone.js demo I created

  // Reusable method for events to play the "Close Encounters of the Third Kind" Human communication to the aliens.
  closeEncountersHumans() {
    const synth2 = new Tone.Synth().toDestination();
    synth2.volume.value = -3;
    const now = Tone.now();
    synth2.triggerAttackRelease('G4', '8n', now);
    synth2.triggerAttackRelease('A4', '8n', now + 0.5);
    synth2.triggerAttackRelease('F4', '8n', now + 1);
    synth2.triggerAttackRelease('F3', '8n', now + 1.5);
    synth2.triggerAttackRelease('C4', '8n', now + 2);
  }
- This is a short sweet overview of a Class method I created for a React App. You don't need to go understand how it creates the object to create sound, you don't need to explain why the volume is the way it is, and you don't need to go an interpret the rest of this. The variable name tries to explain it, but a comment might do this method more justice. Because its purpose and output may not be completely understandable and maybe somebody just needs a sound effect for a button click. They look around the app and stumble upon this method that can produce the `"Close Encounters of the Third Kind" Human communication to the aliens` sound effect on a button click. Easy peezy. Nothing crazy.

Old server code I made for a school project (incomplete router (lots missing), but a great example for this occassion):

/* Purpose:
This router handles the app's request routing and error
handling for Preflight OPTIONS, GET requests for the app's
background image default background or latest uploaded
background, GET requests for remote commands to client
application, and POST requests for client application 
commands from the client application itself.
*/
module.exports.router = (req, res, next = ()=>{}) => {
  if (req.method === 'OPTIONS') {
    res.writeHead(200, headers);
    res.end();
  }
  if (req.method === 'GET') {
    if (req.url === '/') {
      const result = messageQueue.dequeue();
      res.writeHead(200, headers);
      res.write(result);
      res.end();
    }
    if (req.url === '/background.jpg') {
      fs.readFile(module.exports.backgroundImageFile, (err, fileData) => {
        if (err) {
          res.writeHead(404);
        } else {
          res.writeHead(200);
          res.write(fileData, 'binary');
        }
        res.end();
      });
    }
  }
  if (req.method === 'POST') {
    res.writeHead(200, headers);
    res.end();
  }
  next();
};

There is a lot going on in this router. A good high level overview for all the possible requests that it handles will help a developer who may pick this up. Especially for a situation like this where as previous mentioned, this router was incomplete. It may be really nice for a developer on your team to quickly see in a couple of lines what this router is doing versus interpreting 20+ lines of code. Just so they can get a gauge of the "why" of each conditional checking the request url and what happens in each conditional block.

Examples of bad reasons for comments:

const something = 'Hello World'; // I made this variable so our company's code can have a "Hello World" string.

You don't need to explain a variable for some primitive data type like a String type value. The use case for it should make sense wherever it is going to be used.

const aFunction = () => {
  const multipliedByTwo = arguments[0].map((value) => {
    return value * 2;
  });
  return multipliedByTwo;
}; // This function iterates through the given array and returns a new array of values multiplied by two from the input array.

You may be thinking, "Why shouldn't I make a comment for this, it seems very complicated?". At first, learning any new language is complicated. But think about this: You wouldn't need to tell people the reason for eating an apple. You're eating an apple at the most highest level to gain nourishment.
Code will like this will make sense throughout your learning. And it will make sense to others too. The map method used here is a very common method used for iterating through an array to return another array with some manipulated values. It also can be used just to iterate through an array.
As you learn and grow, just like learning whatever language(s) you have learned, you will gain intuition for when you should and should not use comments.

Goals of my blog.

Ian Ferrier — Thu, 16 Jun 2022 03:47:08 +0000

This post is for anyone who wants understand my motives here and this will serve as guideline for me to follow moving forward.

Overview

Often throughout my professional careers, I found myself being the best version of myself when I could not only fully understand and perform tasks, but also if I could teach them and had everything documented for easy reference.

Teaching

I'll be giving small micro lessons in everything I know (regardless of the fact that this probably exists everywhere). Why would I repeat content folks have written about practically everywhere? Everyone learns concepts in totally different ways. My perspective I'm going to be offering might be the way someone needs to understand a concept or operation.

Documenting

Also, this will serve as my own personal reference for everything I know. I have come to realize that my documentation and records of research are lacking for my work, therefore this should help improve my notes for everything I have done.

Recursion

Ian Ferrier — Wed, 09 Dec 2020 04:10:58 +0000

With one small step, you can climb a mountain.

I'm giving you a seed. This seed will grow you a tree of branches. This tree might have five branches coming up from the ground from where the seed was planted. This tree might grow eighteen branches from the initial seed location. It might be a normal tree and have one branch come up. Is this really even a tree? No time to ask questions just follow along, please.

For every branch, another infinite number of possible branches could branch from these initial branches. And for these branches more infinite possible amount of branches could be arise from one branch. Here let me draw out maybe how ridiculous this tree might look like. The tree seed is "x".

                     9
                    /
        1 -  x  - 5 - 8
           / | \    \
          2  3  4    7
          |
    10 -  6  - 15 
        / | \ 
      11 12 13

Looks great right? Yeah no this is one ugly tree. I hate these trees. And please note every number here can have more branches, and those branches could have more branches, and so on. The bottom line is this is ridiculous, and trying to navigate this already is giving me a headache. I mean sure if I wanted to get to 9, I just need to go from x to 5 to 9 and boom I am done.

But like I keep stressing, this tree could grow infinitely more and more branching out at each new branch in infinitely new ways.

So let me ask you a question. What if I wanted you to make a whole new tree like this, but take all of these numbers in this tree and double them. Do whatever honestly. Change them in some way. How do you do that? What if you have a ridiculously bigger tree than this? What if you had several different variations of these kinds of trees and you just wanted a single way to get through these trees to make these changes?

Recursion.

    Tree1              Tree2               Tree3
      x                  x                   x
    / | \              / | \               / | \
   1  2  3            1  2  3             1  2  3  
                      |  |  |            /  / \  \  
                      4  5  6           4   5 6   7

See these trees? Still annoying, but they are a little easier to look at. Premise will still be the same. First step to solving a problem that requires recursion is to simplify the problem however you can and make visuals like this, this will save you brain headaches. I have learned without visual representation my actual solution attempt will have major road blocks and hurdles because your brain can only think of so much at one time and the more complex something is, the harder it is to get your head to think and do the same thing.

Solution time:

Take notes.

Tree1 has a seed point and has 3 different branches. But those branches have nothing branching out of them. So it would seem to me that I should take note of that.
Tree2 has branches with an additional branch for each initial branch. And again, at the end of the newest branches no new branches are there.
Tree3 has one of those new branches getting a sibling branch, and has no child branch.

Let's see if we can make this come together now where we can get some new trees with some changed values or something but same structure as the trees were are copying from.

Tree1
If I have a tree with only one set of initial branches, cool just do whatever changes you want on those initial branches and you have yourself a new tree that looks the same but with whatever you wanted changed is now changed.

Tree2
Hey I got child branches on these initial branches? But they don't have children though. So start with the first initial branch apply changes to it, then go through its children and make changes there, come back to the initial branches and do this same process for the 2nd and 3rd branch and their child branches. Kinda like going down and up and down and up and down and up.

Tree3
Now I have a similar case to where I started where I had 3 children and every branch only had one branch but NOW a branch way down has two branches! Well you solved this problem with Tree1. Iteration. In fact you have solved this iterating so many times so far now.

So we have a thing in programming called a call stack that will remember where you are coming from as you go up and down. It'll remember the place you called a function from, and if you don't have anywhere else to go in that function, you just go back up to that function where you came from.

So you see myRecurFunc says hey go lets make call stack stuff happen, if where I am has children, I gotta go to each child right away, and same thing for their children, and so on and so on. Where I am though I also gotta change stuff so I have myFunc to do that along the ride! So once I take care of all cases where children are and I reach a point where no children are, I refer back to my call stack to where I came from and check again if children exist! Easy!

Remember this monstrosity? This myRecurFunc can navigate this too! Its amazing!

                     9
                    /
        1 -  x  - 5 - 8
           / | \    \
          2  3  4    7
          |
    10 -  6  - 15 
        / | \ 
      11 12 13

There you go, an attempt at me trying to explain recursion.