Vanilla JavaScript for Dummies (and Designers)

8 min readFeb 19, 2018

Explaining a few JavaScript tips and tricks for beginners.

Brief Intro

This article is for people who never really had someone explain how JavaScript works and explains it in simple, applicable terms.

Why is this important?

I used to think learning JavaScript was pointless. I already knew jQuery, so what was the point? After all, it seemed like I had to type more and do things “the hard way.” Not to mention, my main focus has always been to create screens that match designs, which meant my focus was efficient HTML and CSS vs generating arrays and whatnot.

As designers, we spend so much time creating these robust style guides and rules for how things should be displayed but we should also be considering how we implement this feature with our frontend dev allies.

It’s also way more efficient for performance. Instead of having to import a whole library, you don’t need to! You also don’t need to worry about upgrading your library every time there is a new release. Not to mention, cool animations can be done using JavaScript instead of having to use a resource-intense asset like a GIF.

Be sure to check out stripe.com for some sweet animated JavaScript action.

So every time you’re tempted to do $(‘.something-like-this’) or use a GIF, consider using vanilla JavScript instead!

An Example

Here’s a design that toggles the visibility of a container.

As a designer, it seems pretty simple — simply show/hide the content based on clicking the row. Slap in an animation and call it done, right?

However, what if the content is actually pulling complex data and it actually takes a split second to load because of a poorly written API (for some bizarre reason). What then? Just use a spinner? Will that look good? What order do we show the spinner and expand the container? Is there a better solution?

If a designer is fully invested in the outcome of their design and has a basic understanding of the limitations of the system, developers tend to be less hesitant to reach out. Both designers and developers should be working together and making suggestions to each other; it’s not a one-way street.

Something to keep in mind: The time it takes to communicate with someone is worth the delay of getting something done.

Some things to consider when designing:

Is there a different way of displaying the data based on development constraints?
Do we have time to rewrite this code (the answer is 99% of the time: no)
Can we load in the data we need ahead of time to trick the user into thinking it’s a fluid experience?
Are we doing a show/hide? Are we using z-index manipulation? Are we using a virtual DOM?

Some Basic Terminology

var, let: allow you to declare variables; var (global), let (not-global)
parameter: can either be something a user enters, or something that is created by a function
function: a set of logic that performs a task
scope: whether something is accessible in any part of the file or inside just a function (usually the font color in your code editor will change)
length: the number of items in an array (or list)

For Loops

We use this to run through a cycle until the conditions are met.

“For” Example… (I’m sorry)

var cookies = ['choc-chip', 'sugar', 'snickerdoodle'];for (let i=0; i<cookies.length; i++){
  console.log(cookies[i]);
}/**** console output ****/
//choc-chip
//sugar
//snickerdoodle

The [] brackets are for defining an array for my variable “cookies”
cookies[0] is the same as “choc-chip” because arrays start at 0, not 1
I’m doing this so that later when I use the length property, it will count the number of objects in my array instead of the number of characters. If I didn’t have the brackets, it would not know that each of these things were in an array.
For loop logic:
First section: The “let” means I’m assigning a non-global element “i” to start at 0. I can start it at whatever number I want. “i” typically stands for index, so that’s why it’s commonly used. But you can use any letter, really. Most start with i, and then continue on to j, k, l, etc. as a natural progression.
Second section: Since I defined that my variable as an array, what it’s saying is I want to run this logic until i is less than the total number of objects in my array. In our example, this number is 3 (there are 3 objects in our array). So in our example, i<cookies.length is the same as i<3. The reason that we don’t use a number here and use length, is that we don’t have to worry about adding in more objects — it will run the loop for the total number of objects. In our case here, our loop will run 3 times:
i = 0 (0 < 3, therefore run the loop)
i = 1 (1 < 3, therefore run the loop)
i = 2 (2 < 3, therefore run the loop)
i = 3 or above (3 = 3, don’t run the loop)
Last section: i++ is how we are displaying our data each time the loop runs. This is simply shorthand.
i++ is the same as i = i+1 (in our case, we started with i = 0, so now
First time running through loop:
i starts at 0: i = 0+1 → i will become 1
cookies[i] is the same as cookies[0]
0 is the first object in the array or “choc-chip” so only return this
Second time running through loop:
i starts at 1: i = 1+1 → i will become 2
cookies[i] is the same as cookies[1]
1 is the second object in the array or “sugar” so only return this
Third time running through loop:
i starts at 2: i = 2 + 1 → i will become 3
cookies[i] is the same as cookies[2]
2 is the third object in the array or “snickerdoodle” so only return this

Scope

Let’s start with an empty JavaScript file. Anything written here has a global scope. This means if I put anything here, whether it be some logic, a variable, what have you — I can access that.

When I was first starting out, I thought for loops and other logic had to be defined within a function since that’s where I kept seeing them in examples. However, if you put this logic outside of a function — that means you can access its output (or what it returns) globally.

Careful though, you don’t want everything to be global since that will make it much harder to understand how everything fits together. If you need to reference a variable from another component or function, you can simply pass it through as a parameter.

Parameters

I’m not going to lie — I still struggle with the concept of parameters. Mostly because there are multiple ways that they are used and referenced.

When developers try to explain it to me, it honestly sounds like gibberish. Yes, I get it’s the thing that gets fed into a function, blah blah.

That doesn’t help me. So I’m going to try to break it down in a way that is more useful in case you’re struggling, too.

var meal = "pizza"; //creating a global variable of meal and assigning a string to it called pizza;getMeal(meal); 
// I made up this function name and am calling it, and saying for this function, anything within the parentheses will be what gets referencedfunction getMeal(food) { //meal = food! This works because the function I called previously and this definition have the same name of "getMeal"
  
  console.log(food)
}/**** console output ****/
//pizza

Let’s break this down:

I’m using var for the object “meal” because I want it to be a global variable that any function can access.
This “meal” variable can be user generated as well (based on what they click, what they enter into a form, etc) — for the sake of this example, I kept it simple and just declared it.
“Calling a function” means running it. It is traditionally seen as somethingLikeThis(); In our example, it’s the line getMeal(meal);
Because I’m putting something inbetween the () — that means when I define my function, I can now use that same logic!
In the example above, I’m calling the function “getMeal” which means, I want you to immediately start doing the logic that’s contained within the definition (the function getMeal(food){} part).
Sometimes you do not want a function to run immediately, in which case we want to use something like an anonymous function. I knew that sometimes I wanted to do this, but never knew why.
Here’s an example:

// Not good - won't do what you think it will
for (let i=0; i<cookies.length; i++){
  cookies[i].addEventListener('click', getRecipe());
}// This works because of the second part of the event listener
for (let i=0; i<cookies.length; i++){
  cookies[i].addEventListener('click', function(){
   getRecipe();
  });
}

The anonymous function acts as a way to “store” the function — it’s not going to call it immediately. Without this, your function fires immediately and won’t update properly based on click events, etc.

Wrapping Up

I know I only covered the tip of the iceberg, but hopefully it was enough to get you curious or at least help with something you were struggling with.

Learning JavaScript is a bit intense if you’re unfamiliar with some of its nuances but trust me when I say that knowing how these pieces fit together will help you understand some of the complexities that developers are facing.

If you’re still confused on why any of this is useful:

You can see how fast something actually renders/changes
You can prototype things and prove that it is, in fact, possible to execute your design (don’t forget the smug look on your face)
Developers are more inclined to explain things to you if you at least understand the lingo
You can suggest solutions and work together instead of an awkward back-and-forth exchange between management
You can recognize if something is coded poorly instead of just accepting that something “can’t be done”
It’s never too late to learn new things
And more!

What Next?

If you haven’t already, sign up for a free CodePen account and start playing around (the pro is definitely worth it — simply for having private pens)
Finally figure something out? Write a Medium article! Spread the insight.
Attend developer Meetups in your area and make new friends
Prototype, prototype, prototype!