Phase 4 JavaScript Experience

First off, JavaScript was way harder to understand than I expected. I entered Phase 4 with a very basic understanding of JS. I had a bit of knowledge about data types, and the DOM, thanks to Flatirons pre-course work for the program. About halfway into completing the modules I struggled trying to understand how Javascript works. After completing my Phase 4 project I can now say that I believe I have a good grasp of the language and it’s concepts.

This Phase 4 project was the most tedious project yet, and to be honest, the project requirements weren’t complex. I think it was difficult because of the various topics and themes we could’ve focused our project on, and I am the most indecisive person I know. Being that I can never make up my mind for anything, it took a while to figure out what i wanted to do for my project. That completely set me back a week in planning. One day my sister was surfing the internet doing some online shopping, and a website she came across would refresh every time she she edited the shopping cart. I thank my little sister for giving me the idea to do an ecommerce project and test my JavaScript skills, and honestly it was the best idea I could come up with in the short amount of time I had to start building my project.

Not even a full week into working on my project, I was in the thick of it. I started to doubt myself. One of the project requirements were to implement three AJAX calls. I implemented six; three create, two retrieve, and one update action. Talk about tedious, and time consuming!!! Making six AJAX calls with the frontend, I understand how to use fetch better to send and retrieve data from the backend. With the amount of time I had to complete this, and all of the bugs I ran into, I wasn’t able to include error handling, and a few other things which are necessary for an ecommerce platform. With that said, I am not disappointed in the progress I made over the course of these past 3 weeks.

Scope and hoisting are two topics that I struggled with understanding when they were introduced in the material. At the time, I could not pass a lab with all passing tests because I couldn’t really understand hoisting especially. They are extremely important topics to understand to have a solid grasp of how JavaScript works.

Hoisting & Scope

Hoisting and scope work in conjunction with one another to execute functions and process information being passed to them throughout scripts. They also determine where variables can be accessed.

Hoisting allows us to access variables, and functions before they are executed. With ES6 included function expressions, which are NOT hoisted. If a function expression is called before it is declared, code will break and you will receive a reference error.

Every single thing in JavaScript has a scope. Scope refers to where a variable or constant is declared in a script. If it is defined within a function, it has a local scope whereas a variable with a global scope is defined outside a function. Since ES6 was introduced, we now have and which have a local scope or block scope. They cannot be accessed before declaration, while can. Using and anything with a global scope can cause naming collisions so it is necessary to use caution with those.

Using this static class method as an example, we see there’s a constant called . Since is defined within a function, it has a local scope. Also, since it is declared with and not it has a block scope, and is not hoisted. cannot be accessed outside of this function, and if it is tried, a reference error would be thrown.

I now have a greater understanding of JavaScript and the fundamentals of it. I doubted myself, and wasn’t sure if I’d be able to complete it but I pushed through until I completed the MVP.