Week 5 -- JS Fundamentals Part I

Oct 06, 2019

Variable types, arrays, functions, objects, and closure

We finally started JavaScript this week! Hooray! Thus begins our OFFICIAL journey with programming languages. This week squeezed in a lot of content. We did a whirlwind overview of what we learned about JavaScript in our pre-course work (which was a lifetime ago) and dove a bit deeper on some topics.

Variable Types

We talked about the different kinds of variables: var, let, and const. It took me a little bit to understand why we could sometimes change a const. It really all boils down to whether or not the value that has been assigned to the const variable is mutable or not. Since it’s a const, you can’t reassign it to a new value. But if its current value is mutable, we can make changes to it. For example, arrays are mutable. If we have const myArray = \[1, 2, 3], I can make changes to it using things like array methods. I can push new values onto it, pop existing ones off, etc. These are all legal despite the fact that myArray is a const simply because arrays are mutable and we aren’t reassigning myArray.

Arrays

Speaking of arrays, we covered those this week, too! We went over a couple of specific array methods, as well. Array methods are just functions for arrays. We learned about .forEach(), which iterates over the array and for each element, performs the callback function that you pass into .forEach(). You don’t have to write for loops! .map() is very similar to .forEach() except that it returns a new array. This is especially nice for instances when you don’t want to change the original array.

Functions

We went over the different kinds of function declarations and, despite how nice the syntax for arrow functions is, when not to use arrow functions. I love me some arrow functions, but there are times when you’re not allowed to use them. So I still have to be ok with the good ol’ fashioned way of writing function expressions for things like event handlers, prototype methods, and object methods. We also went over callback functions, which are just functions that get passed into another function as an argument (like what we do with array methods all the time!).

Objects

We reviewed objects, as well! We went over the syntax for declaring objects and how to access an object’s properties using dot or bracket notation. We also learned about some object methods that are available to all objects! Specifically, we talked about Object.keys(), Object.values(), and Object.entries(). As you might expect, .keys() returns an array of the object’s keys, .values() returns an array of the object’s values, and .entries() returns an array of tuples of the key-value pairs (tuples are basically mini arrays that only have 2 elements in them).

Closure

The most confusing part for me this week was when we learned about closure. I had never heard of closure before, so it was exciting to learn something brand new! Essentially, a closure is a function and its lexical environment that it interacts with to access all of its needed variables. In other words, if a function needs to access a variable that is outside of its function scope, it will reach outside into the outer scope to find the variable it needs. A closure is the combination of the function enclosed with references to its lexical environment. I had a hard time understanding what this was because I already knew that scope and functions behaved this way. So I was really just learning a new word to attach to a concept I already knew! :)

Phew! That was a lot for our first week of JavaScript! I was pleasantly surprised with how much I remembered from back when I tried to teach myself and from the pre-course. And general programming concepts that I’ve learned before in C++ and Python, like objects and arrays, made it a lot easier. It’s been awesome to see how quickly things come back when you’ve already put in a lot of work to learn it once or twice. I’m excited for next week when we jump into classes in JavaScript!

How to make a code snippet in VS Code