The most basic unit of JavaScript is the variable. Variables are a way for you the programmer to think about, talk about, and understand what is happening inside the computer.
This page outlines most of the most important aspects of using variables in JS and provides you with the study skills necessary to explore them on your own using whatever examples or tutorials you prefer.
The most important take-aways from this page are:
- Using PythonTutor.com to visualize how JavaScript works behind the scenes.
- Using sketches on paper to visualize JavaScript runtime behavior.
- Becoming JavaScript. Learning to step through code as though you were the computer using nothing but pencil & paper.
You will know you have mastered these three skills when you can describe every change that will take place in PythonTutor before clicking the 'forward' button. These skills aren't very glamorous and will take plenty of work to master, but mastering them now will ensure your success when you encounter more challenging code later on.
Not taking the time to learn these skills now may feel harmless and probably won't stop you from moving forward for the first few weeks, but you will soon reach a point where not having these skills under your belt will keep you from moving forward. By then it's too late, you'll need to do some unlearning.
Program State: State is the current values of all variables in your program. Program state is dynamic, it changes over the course of your application's run-time. Because variables are frequently modified, state cannot be determined just by reading at your source code. The purpose of this repository is to give you the tools to understand and track changes in your JS programs' state.
Study Techniques:
- Stepping through run-time behavior with PythonTutor
- Sketching run-time behavior on paper
- Changelog tracing: what changed with each step?
JavaScript:
- Creation & Execution Phases
- Creation (step 1 in PythonTutor)
- Execution (every other step)
- Variables: var, let, const
- Assignment by value
- Assignment by pointer
- Reassignment
- Hoisting behavior
- Data types:
- Primitive vs Objects
- Type Conversions
- Objects (without methods):
- Dot vs. Bracket access
- Arrays: Basic methods
- Reading, writing & modifying methods ("splice", "push", "pop")
- (not "filter", "map", "forEach", or "reduce")
Programming Skillzz:
- Code life-cycle:
- Source-time: The code that's written
- Build-time: JavaScript creation phase
- Run-time: When JS executes lines one at a time
- Working with primitives:
- Evaluating operations by hand
- Evaluating comparisons by hand
- Tracing variables:
- Creation & hoisting (build-time)
- Assignment & reassignment
- Chained assignments
- Shared references
- Tracing data structures:
- Source-time values
- Run-time values
- Step-by-step changes in value
- Working with nested data structures:
- Arrays in Arrays
- Objects in Objects
- Arrays in Objects
- Objects in Arrays
- Helpful variable names
In order to focus on variables, we recommend that you limit your step-throughs & diagrams to samples of code that contain only variable assignments and data structure manipulations (for now). This means no loops & conditionals (scope) or functions (context) for now. The diagrams for sketching these language features are more complex and rely on a firm grasp of tracing variables & data structures.
At the beginning you should think of these diagrams as descriptive, you are simply redrawing what PythonTutor has displayed on the screen after you press the 'forward' button. As you practice you should make an effort to avoid looking at the screen whenever you can. The goal of these exercises is that your diagrams will become predictive. You will know you are ready to move on to scope when you can draw what PythonTutor will display before clicking the 'forward' button.
These diagrams are change logs. You won't be drawing everything on the screen for every step, you will only be keeping track of what changes from step to step. It should ...
- keep track of which step of the program is being executed.
- indicate the last line executed, the current line being executed, and the next line to be executed.
- describe what is taking place in plain English. This will capture information that is not directly displayed in the diagram and will make it much harder to just copy what's on the screen.
- indicate a new variable is declared with a plus sign followed by the name and value of the variable.
- indicate a variable is modified by showing the old value and the new value.
- indicate something is written to the console. You will write the same text in the console box of your sketch.
- indicate when an object or array is created. You will indicate this with a plus sign followed by a sketch of the new data structure.
- indicate when an object or array is modified. Much like with variables: a new property is indicated with a '+', a removed property is indicated with a '-', and a modified property is indicated by writing the old value and the new value.
Completed step-through diagrams to study:
These examples serve two purposes:
- Teach by example how to sketch JavaScript's execution behavior.
- Highlight some of the tricky (but very important) features of JS Variables & Types.
These examples seem simple on the surface, but are very important to understand. We have found that many errors students come across have nothing to do with Express, Vue, or any other library/framework. Instead the errors come from mis-understanding one of these pure JS concepts:
- Assignment vs. Comparison
- Chainined Assignments
- Value Swap
- Variables are untyped
- Reference vs. Value
- Hoisting
- Dot vs Bracket Access
Tutorials and the like:
- JavaScript.info chapters:
- 2.1 -> 2.9
- 4.1 -> 4.2
- 5.1 -> 5.5
- 5.7 -> 5.9 (challenge)
- Practical JavaScript:
- FreeCodeCamp on Variables:
- FCC is a great place to start coding. It has good exercises, good learning environment, and strong community.
- intro & basics
- es6: let vs var 1, let vs var 2, const
- data structures
- You Don't Know JS:
- Learn-JS:
- Variables & Types
- Arrays: 1, 2
Visualization Tools:
- PythonTutor for JavaScript:
- For building your Notional Machine: visualizes how the JavaScript engine steps through code, deals with variables, and handles control flow.
- Copy your code into the text area and click "visualize execution". Step through line by line with the "forward" button.
- Parsonizer:
- Randomizes the lines in your code, you have to put them back in order (white space counts!). This will help you learn syntactic structures & develop your logical problem solving skills by studying quality examples.
- Copy paste your code into the text box and click the magic button. Click "get feedback" to grade your answer.
Tricky Bits:
- Creation vs Execution phases:
- Creation phase is what happens before the first line is executed. Mostly just hoisting. You can see what happened in the creation phase, it's what PythonTutor displays before you click the forward button for the first time.
- Execution phase is everything that happens after the creation phase.
- JavaScript Types:
- Expressions vs. Operators:
- (This is a tricky concept, it will make more sense after Scope & Flow Control)
- Over Views:dev.to, flaviocopes, lib.ru
- In Depth: MDN, 2ality
- Assignment vs Comparison: Overview (study with PyTut), This isn't just a JS thing
- Assign by reference vs. value:
- Hoisting:
- Scope:
- Incrementing & Decrementing
- Memory Management & Garbage Collection:
