Alumni Stories

Humanizing the Basics of JavaScript

Humanizing the Basics of JavaScript

Interested in getting a more “human” view of coding? Check out this awesome guest blog from Software Engineering learner Joseph Padgett.

In my own learning process, one of the most challenging things for me to grasp was figuring out how to connect concepts. Learning the basics of JavaScript was rough but I got through it, and I’ve learned a ton since then. Today, I’m always thinking of ways I can explain things to other people. I hope some of the steps I mention below help someone who’s brand-new to JavaScript or programming in general.

Let’s get down to the basics and humanize JavaScript!

What’s a Variable? 

Let’s start by going over the most basic starting point: holding values. Variables are the program’s backbone at the start. If you don’t tell JavaScript what you’re trying to do, it can’t do anything. While not all of JavaScript programming stems from variables, you’ll use them a lot. This is done in many ways, but the most basic way is with a variable. Let’s take a look at a variable and it’s parts:In the most current version of JavaScript(or ecmascript), variables are declared with either let or const.let vehicle = “car”

The above is a variable. It’s using an identifier (“vehicle”) to declare it’s value, which is “car”

const vehicle = “car”

The above is the same thing as let vehicle = “car.” They’re both variables. The major difference, however, is while const vehicle = “car” can’t be redeclared or assigned, let vehicle = “car” can. For example, if you were to do this:

let vehicle = “car”
vehicle = “animal”

This would result in vehicle being assigned the value animal instead of car. If you tried the same with const, it wouldn’t change. The rundown here is you can’t change the data type vehicle when it’s declared with const.

Let’s humanize variables! Your brain is like a computer. It’s an incredibly fast thinking machine you use to declare variables and store data all the time. Check out the example below:

let vehicle = “car”

Let is the variable declaration, and also sort of has a humanized word in it to begin with. Then everyday thinking comes in! Say you have a car. What is a car? It’s a vehicle. Trucks, four wheelers, cars, tractor trailers, and many more are all vehicles. So your mind is remembering that vehicle is a variable, and vehicle can be many things. So in our mind, we would be using let in our variable declaration. When you look at a car, your brain goes:

Oh, that’s a vehicle!((let vehicle))And it’s a car!((= “car”))

But our brains run fast so, just like code, it’s all happening at once. So you can just look at a car and know it’s a car. This is represented in JavaScript by those variables. Once you’ve assigned car to vehicle with let, you know that that car you looked at is a car, and the next time you look at a truck, you know the vehicle is a truck instead.

Now you might be asking, what do we do with variables? Well, you can do so much with variables. You can write functions and assign them to variables, you can make arrays and assign them to variables, and you can do this with objects, as well. In the next section, I’ll break down what the five most common data types are in JavaScript and how you can use them with variables and beyond.

Exploring Data Types

Booleans, integers, objects, arrays, and strings. While there is a lot more to JavaScript, we’ll focus on these five elements here.

Boolean is easy enough to remember, as it’s one of two things. True or false. The use of these becomes important once you start getting into more complicated things than what I’m describing here, but for now, just remember it’s always going to be one or the other.

Integers are numbers. There are a lot of different types of numbers in JavaScript, but when picturing integers, think of the numbers you’d write out on homework or punch out in a calculator. Integers can get more complicated the further you go along, but for now, just remember negative and positive numbers are integers.

Objects are one of the most important things in JavaScript. Many things in JavaScript are objects. You can write out a basic object like this:

const myObject = {  key: “value”,                   - String
key2: value,                    - Variable
key3: function value() {}, - Function
key4: [],                           - Array
key5: {}                            -Object}

Objects can hold all sorts of data types inside of them. Each item inside of the object is identified by a key: value pair. As you can see above, key is the key, and it’s value is “value.” That’s how object syntax works. To put this into more relatable context, think about a car again. Have you ever heard a question like this?

“Hey. Do you remember that old red ‘79 mustang Jerry used to have?”

Everything in that sentence was accessed by an object inside the speaker’s mind. Think about it like this:

const jerrysMustang = { thing: “vehicle”,
type: “car”,
color: “red”,
make: “ford”,
model: “Mustang”,
year: “1979”
}

When you see this, you can break it down as the speaker accessing Jerry’s Mustang. It was a vehicle. It was a car. It’s color was red. It’s make and model were Ford and Mustang. It’s year was 1979.

Objects are often held in our brain about all sorts of things. Same for a pen, or food, or televisions, or computers. The same applies to jerrysMustang above.

Arrays are similar to objects, but the main difference is an array is almost like a holder of specific things instead of a whole object and all its parts. For instance, in jerrysMustang above, the color was red. But how do we remember colors? That’s stored in another element entirely. And since a color is one thing, and there are lots of colors, but they’re all colors, we don’t necessarily need an object for that. We could relate an array of colors like this:

const color = [“red”, “blue”, “black”, “purple”, “white”, “yellow”, “brown”]

This array stores the colors we know, and we can access those colors for later use.

***caveat to the const vs let stated earlier. While const will keep you from editing what data type you’ve assigned into a variable, you CAN change the items inside of an object and array, even if it’s declared with const, you simply cannot change what type of data is assigned to it.***

Strings are pretty self-explanatory. It’s a string! If something is “wrapped in quotation marks like this,” it’s a string!

Next Steps

We’re not going to cover everything you can do with data types here. But we’ll go over some basic uses below.

Functions:

A function is another thing you’ll be doing a lot through your programming career. In JavaScript, there are a few different ways to write out functions, but I’ll show a couple examples and break them down.

function addingTwoNumbers() {
    return 2 + 2
}

This will return the value of 4 to your program! If you want to test this in your browser, open your browser tools and change the return line to console.log(2 * 2)

And to call this function and have it run, you do addingTwoNumbers(). That is basic function running. So let’s explore this.

Function itself is an identifier that tells JavaScript what you’re about to do is a function. Then there’s a space and whatever you want to call the function. This can be named whatever you want. But with this and variables as well, it helps to name them all something that will help you remember what you’re doing, like adding two numbers!

Return is a keyword in JavaScript, and it returns the program the value it’s getting, which in this case, is 2 + 2, so 4. It’s similar to a teacher asking a math question in elementary school. So, given the addingTwoNumbers function, pretend this is the exchange:

Teacher: Timmy, what is two plus two? (teacher telling Timmy what function to write)

Timmy: To add those two numbers… (Writing the function syntax out)

Timmy: I need to tell you what two plus two is (Putting in return 2 +2, giving instructions)

Timmy: The answer is four! (Solving the function’s instructions and *returning* the value to the teacher)

Teacher: Correct!

Obviously the conversation above isn’t always going to be what’s said, but verbally, Timmy is breaking down what steps he has to do, and that’s one way to relate how functions are run.

Functions get more and more complicated the further with JavaScript you go, but typically, the syntax will remain the same. That being said, there’s also the most current syntax of functions, which would instead be typed out like this:

addingTwoNumbers = () => {
    return 2 + 2
}

This does the same thing as the other function.

Accessing array data

Remember how we had our color array above? Here it is again:

const color = [“red”, “blue”, “black”, “purple”, “white”, “yellow”, “brown”]

Now, to get inside of that, you have to tell JavaScript you want to get a specific color like purple. To do that, you would write this:

color[3]

This tells JavaScript you want to access the color array and get the 3 index number of color. The reason it’s 3 instead of 4 is because JavaScript arrays are counted by index, which begins at 0. The way to think of this is:

Okay, I need the fourth color, so I’m going to remember what colors are, then I’m going to sort through my remembered colors. With the data inside my head, I know purple is the fourth color, and since index counting starts at 0, it’s the 3 that is “purple.”

Another way to think of this is like delivering papers. If you’ve been doing it for a while, you know certain neighborhoods very well, if not the whole town. If someone asked you where someone lived, you could tell them. Let’s use the color array as an example here.“Oh Mr. Robin?! He lives on color street”

const color = “In the fourth house down![“red”(0 index, but first color), “blue”(1 index, but second color).....]

I think you get the idea after that, but now you know the fourth “house” is purple, but it’s the 3 index because of the way arrays are counted.

As with other concepts, there are many other things you can store in arrays, like data types, including other arrays and objects. Just like objects can store arrays and other objects. But that’s the basis of accessing array data.

Accessing object data

Now this is a bit different than arrays. Remember arrays are variables that hold data inside of []. The items in there are single items, so you can just grab their index numbers after their name (color[3]). Objects have two main ways to access their data. One is bracket notation, which is similar to arrays, and then there’s dot notation. I’ll break down both with a visual of jerrysMustang:

const jerrysMustang = { thing: “vehicle”,
type: “car”,
color: “red”,
make: “ford”,
model: “Mustang”,
year: “1979”
}

Remember how I described this as holding all the information about Jerry’s car. But what if someone asks you, “Hey, do you remember what color that old ‘79 mustang of Jerry’s was?”

Your brain would then access the object, and then think of the color property. Oh, it’s red! To translate “Oh, it’s red!” to code, you tell JavaScript what object you’re accessing by typing in it’s identifier, then using either brackets or dot notation, as below:

Brackets syntax
jerrysMustang[‘color’]
Dot notation syntax
jerrysMustang.color

Both of these would return “red”. So JavaScript isn’t really saying “Red!” here. When the question “What color was Jerry’s mustang?” is asked, the person answering is thinking, “Okay, brain, access my jerrysMustang object. Now return the color key’s value in speech,” which in this case, is “red.”

This is just a snippet of what JavaScript can do, and I hope these examples and words help you get a better understanding of what’s happening when you use these principles of the language.


READY TO JUMPSTART YOUR CAREER AS A UX DESIGNER OR CODER? LEARN MORE ABOUT OUR 12-MONTH SOFTWARE ENGINEERING AND UX DESIGN PROGRAMS, OR CHECK OUT OUR FREE BEGINNER’S CODING PROGRAM KENZIE FREE.

Ready to Discuss Your Future In Tech?

Click the button below to apply today!

Apply Now

Related Reading