The Lightbulb moment: when a difficult concept to grasp finally makes sense to you. This moment is a favorite of anyone learning something new, whether they're in a traditional classroom setting or studying on their own.
After wrapping up my first year of graduate classes, I set out to use the summer months as an opportunity to continue learning about web development. I've been learning web dev off/on since late 2016 with mixed results. I'm comfortable with HTML and CSS, but JavaScript has been a real bugaboo for me (as I'm sure many others starting out in their web development journey). I tried numerous resources, such as freeCodeCamp, Treehouse, and classes at the university where I am employed, but a good footing with JavaScript still eluded me. This led me to the decision to spend my summer focusing solely on JavaScript using some more focused resources including Jonas Schmedtmann's Complete JavaScript Course and the JavaScript Grammar book by Greg Sidelnikov.
My first two weeks were filled with a lot of reviewing the basics of JavaScript. I normally would be inclined to skip over this review, but I felt it was a good opportunity to slowly re-immerse myself into the JavaScript world. Looking back, I'm very grateful for this decision as it helped me finally understand some of the concepts rather than just the syntax. My current study pattern involves reading JavaScript Grammer for about 30 minutes during my lunch hour at work and spending 1-1.5 hours at night completing Jonas' course. My goal is to complete this three days during the week. On Saturday, I sit down for two hours and work through Jonas' course some more, but also try to dive into some project-based work. Tutorials are great and all, but I am a firm believer in learning by doing. I know at first glance it does not appear I am dedicating enough time to my learning, which I will not disagree with. However, its the best I can do at this current time, but I would like to dedicate more hours to studying as time progresses.
The two big lightbulb moments I had over these last two weeks focused on hoisting and scope.
Hoisting
There are two phases to a function call: the creation phase and execution phase. The creation phase involves the creation of the variable object. Here, the argument object is created, which contains all the arguments that were passed into the function. As the code is scanned for function declarations, a property is created in the variable object pointing to the function. Likewise, the same process occurs for any variable declarations. For each variable, a property is created in the variable object and set to undefined. This can be avoided by assigning the variable the null value when it is first declared. When these properties are created in the variable object, hoisting occurs as the variables and function calls are available before the execution phase begins.
Scope
Scoping answers the following question: where can we access a certain variable?
Each new function creates a scope, which is the space in which any variables defined by the function are accessible. For example, if a function defines a variable called favoriteDog, the variable favoriteDog is accessible to that function and any functions written within (which is referred to as lexical scoping). However, the variable favoriteDog is not available to any other function in the global scope.
While I have come across the terms hoisting and scoping prior to my journey this summer, I never felt like I had a decent understanding of the concept. However, with the combination of resources used so far, hoisting and scoping became a little bit more clear for me. This next week involves working through a JavaScript-based Pig game, which will cover events, DOM manipulation, and much more. I'm happy with the progress I have made thus far, especially with how much I remember from my prior attempts to learning JavaScript. I know I have a ton of learning ahead of me, but I'm excited for the opportunity to have more of these Lightbulb moments!
Top comments (0)