JavaScript : Just The Facts, Ma’am/Sir/Your Honor… Part 1
I don’t really like JavaScript. I want to get that out of the way. Ruby, and more specifically Rails, sing to my organized, rule-loving heart. I spent a large portion of my adult life as a chef/manager, rules and procedures kept me from going completely (pun intended) off the rails at work. I do, however, appreciate how functional and diverse JS can be. I struggled through lessons and labs, and finally managed to build a single page web app for the required project (with a Rails API, hooray, something easy!). Instead of describing my process, though, I thought I’d take some time and review all of the concepts and skills I should have learned in the last month (good practice for the review and future coding challenges, right?). This will be a two part blog post, and here in Part 1, we’re going to talk about fundamental concepts.
- VARIABLES
In the most basic sense, variables are a way we store a value for later use. In JavaScript, variables are designated with camelCase, not snake_case (which can be tricky if you’re coming to JS from a language that prefers snakes to camels).
Var used to be the main variable designation in JS, but is rarely used, as ES6 has given us better options: let and const.
Let is used when the value of the variable will change (for instance, if you’re building a counter function and need the variable to run in a loop). It is scoped to a block of code (blocks are bound with a set of curly brackets), can be updated but not redeclared, and the variable name can be used in different blocks.
Const variables cannot be reassigned, and cannot be accessed before they appear in the code. They are also scoped to the block they are declared in, and cannot be updated or redeclared. However, if we declare an object with const, we can update it’s properties:
2. FUNCTIONS
A function in JavaScript is an object, containing a sequence of statements. Functions are defined once, but can be called (executed, invoked) multiple times. The pair of parentheses “()” after the function name is the invocation operator, because they signal to JS that we want to invoke the function. Any arguments are passed in, and the function runs. Adding a console.log statement inside a function is an excellent way to test out connections and functionality while building, as well.
3. HOISTING
Hoisting, according to w3schools, is “JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function)”. In simple terms, no matter where functions and variables are declared, the declarations are moved to the top of the scope (global or local). The assignments are left in place. Declare the variables first, then initialize.
Hoisting functions is similar — the declaration is hoisted to the top of the scope, but function expressions are not.
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting gives numerous examples of this principle in action.
4. SCOPE
There are two types of scope in JavaScript: local, and global. Local variables are only recognized inside the function where they are declared, and can’t be called outside of that function. Global variables are declared outside a function, and can be accessed by any script or function on that page; they can cause issues due to this, and should only be used when needed. Remember, functions and objects are also variables, so scope determines how everything is accessed by other things within the code. Review the documentation for an overview of functions and their scope here.
5. CONTEXT AND ‘THIS’
The documentation defines this as “A property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value.” Inside a function, we can use ${this.property} to refer to the context given. If we go back to my dog as an example (which I love to do, he’s adorable), return ‘${this.name}’ will return “Oliver Queen” if used inside the function where we’ve defined const dog.
This is also an excellent tool when using the Class (new in ES6) as a template to construct objects:
This is the class Weapon from my application — I’ve used the constructor to assign all of the attributes of each instance of the object, and then used the this functionality to render all of the instances onto the display page.
Remember that this is a keyword, not a variable — if used in an object, it is the object itself. I found an article here that dives a little deeper into these concepts, and it helped me quite a bit.
6. CLOSURES
This was one of the hardest concepts in JS for me, and I still struggle a bit with clearly explaining it. Here’s the official definition from the documentation:
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
If we look at closures in term of scope, it helps. The closure has access to its’ own scope (variables it defines in its’ block); it has access to the outer function’s variables; and it has access to global variables, like every other function. An excellent illustration from this blog:
So “a” has a scope of the inner function, “b” is limited to the outer function and can be accessed from the inner function, and if there were a global variable defined outside of the outer function, it would be accessible by both functions and any other functions on the page. When we invoke outer(), b is created, inner() is executed, and “a+b” is returned inside the outer function. After that, outer() is executed, and the variable definitions disappear. As stated in the blog post referenced above,
“This last part is important to understand. Once a function completes its execution, any variables that were defined inside the function scope cease to exist.
The lifespan of a variable defined inside of a function is the lifespan of the function execution.”
Closures come up often in technical interviews pertaining to JavaScript, so I highly recommend working through some examples to cement your understanding.
7. ES6 SYNTAX
Many of the above concepts are part of ES6, but there’s a lot of “syntactic sugar”. First, let’s talk about destructuring assignment.
Destructuring allows you to assign properties of an array or object to variables. The syntax is similar to array or object literals, and can turn multiple lines of code into one simple line. There is an excellent resource here, released to explain the ES6 release, that will illustrate use cases for destructuring and help you streamline your code in specific ways.
A quick note about default function arguments: when defining a function, JS lets us set a default value in the parameters. For instance, if we want to hard code a base discount rate of 15% off for members of our group, we pass it in as a parameter (discount = 0.15). If we run a specific promo for 25%, then we can pass in that value instead:
Rest and Spread are two features of ES6, represented by what many call the “magical three dots”, that allow you to do two very different things.
Rest is a parameter. It allows you to grab the first one or however many parameters as variables, then collect the parameters you’re not using in an array when you call the function. An example from the documentation:
Spread is an operator, not a parameter. It is often used when there is an existing array that we need to add something to. It also works in array literals, making things a lot less complicated (no more push(), then splice(), then concat() to combine an array into an existing array, just “…arrayTwo” inside the other array.
8. ARROW FUNCTIONS
Tired of typing “function” every time you declare one? In love with shortcuts and easier, cleaner code? Do I have the thing for you!*
- not suitable for use in all situations. See documentation for details.
Arrow functions appear often when iteration is involved (review forEach, map, reduce, filter, find, indexOf, etc.). The different use cases could each be their own post, but here’s a little demonstration of the different ways to use the basics:
In part 2 of this blog, I will review some additional basic JavaScript concepts, with examples. Since you’ve made it this far, have an extra meme, on the house:
