FrontEnd Masters: JavaScript: From Fundamentals to Functional JS (Part One of Three)
I can’t believe that I’ve already started my third course on FrontEnd Masters?? A year ago, I would not have imagined that I’d be blogging about JavaScript and programming.
Here we are. My blog post about this course will consist of at least two parts, perhaps three, as the material covered here is too intensive to do within one week.
Bianca Gandolfo is the instructor for this tutorial. The class is in two parts, with the first part focusing on a deep dive of objects and functions. The second part is practicing functional JavaScript.
At the time of the filming of this tutorial in early 2015, Bianca was a JavaScript evangelist at Hack Reactor. Hack Reactor is one of the more well-known coding boot camps in the SF Bay Area and offers both in-person and remote training.
This course is designed for newer programmers who have completed Codecademy’s JavaScript course, have been working with JavaScript for about 2–6 months and wanted to solidify their fundamentals.
In fact, this class was originally designed for programmers without a background in Computer Science to get into Hack Reactor.
Let’s get right to the point. The first part of this class is going to cover property access, bracket notation, dot vs. bracket, nested objects, object literals, and iteration.
So what’s an object? Here are a few answers. Objects are a data structure used to store data. You can store properties with them, which is important in data-driven applications.
Objects can be other objects, strings, numbers, arrays, or even functions, which are considered methods. There are key and value pairs in objects, with the key usually in the form of a string.
The first exercise presented in this course is assignment with dots. Bianca uses an example with an object literal. I like that she interacted a lot with the students, and had a q and a, asking when they’ve used dots in JavaScript.
A key takeaway from this first exercise is that whenever you use a dot, you know for sure (barring any errors) that whatever is to the left of it is an object. Same for bracket notation.
We use dot notation to add and access properties. Dot notation is equivalent to using the bracket notation with the quotes. Don’t use dot notation with a variable. Don’t use quotations around your variable. You must use valid variable names with dot notation.
Numbers aren’t valid variable names, for example. Non-valid characters can be declared within quote marks in brackets.
Under the hood, JavaScript is stringifying everything, including numbers, functions, and arrays.
Bracket notation is stronger than dot notation because you can do more. Instead of using only a string, you can also access weird characters, variables, numbers, and expressions. Strings and weird characters do need quote marks when using bracket notation.
A method is when you store functions as a property and an object.
Regarding iteration, Bianca explains that “it’s just a fancy word for looping”. One of the examples she uses is a for..in loop. Loops will go through all properties of an object.
When a variable is declared in a for..in loop, it will always store the value of the property name. When accessing objects, there’s no guarantee that they will come out in order. They will come out, though. Whew!
In the next section of the tutorial, Bianca leads the class through some exercises that are in one of her GitHub repositories. You can download a zip file, and it’s a project that’s a parody of E-Harmony.
There are four sections in this repo: objects, arrays, nested data, and functions. She mentions the developer tools in Chrome, JSBin on the web, and she also states something that I found very interesting.
“Apps are really just three parts when you think about it: data, your view (like the UI), and then the functionality behind it.”
After these exercises are worked on in class, Bianca goes through the solutions in another video. The next video pertains to objects vs. arrays.
As an object, an array is another data structure that acts as a container. You can have ordered and nested lists inside arrays. Another similarity to objects is that data of any type can be stored in an array.
If you’re coming from an object-oriented programming language, you could think of an array as a subclass of an object that it inherits from an object. The rules for arrays will be the same as for objects.
When you want data to be ordered, you will use an array over an object. There are many built-in methods in arrays that you might want to use right out of the box as well. Sorting, doing something with the length property, these are all compelling reasons to choose to use an array over an object.
An array is an object that has also has numerical indices.
Before I go on further, there is such a large quantity information in this course. There’s not enough space in this blog post to do justice to these concepts.
Bianca provides many exercises for us through her in-person class for this tutorial. I feel this process is immensely beneficial to newbie learners. The class’ questions are in-depth and relevant, and she answers them quickly. I quite enjoyed her matter of fact, accessible teaching style.
Stay tuned for at least one more blog post about this tutorial. I’ll write part two in time for next week.
Let me know what you thought of my third post on Medium. Find me elsewhere on Twitter and my website.
