elewa-academy / scope-and-control-flow

Scope & Control Flow

In Variables & Types you learned how to track your application's state step-by-step. In Scope & Control Flow you will learn how to read and manipulate program state in order to make decisions in your code. Code is not smart, but the people who make it can be.

At this stage you want to think of the code you write as simply an automation of the decisions you would make yourself if you had to do a task by hand. The basic units of strategy in JavaScript are:

• Conditional Branching - Performing different actions depending on some condition (if, else, else if, switch/case).
• Repetition - Performing small, repetitive tasks until a larger goal has been accomplished (loops: while, for, do while). You are now learning more complex code constructs, but at it's heart ofyour program is still just variables and the values that they store.

With the introduction of Control Flow, you will have to think about how and when you access variables. This is a complex topic that you will continue to explore through the rest of this course, especially when you begin to explore separation of concerns and functional vs Object Oriented programming. But for now you will only need to think about these three aspects of variable access:

1. Reading - What is the purpose of reading this variable? You will find there are typically two reasons to read from a variable: to make a decision based on it's value (conditionals, loops), or to use it's value to generate a new value.
2. Writing - What is the purpose of writing to this variable? Are you storing a new value, updating an old one? Variable modifications store information generated during the program's runtime for later use. Try to think about what this value can be used for later on.
3. Scope - In which block is a variable accessed? Was it accessed in the same block it was created?

After understanding these different access cases, you will be prepared to start thinking about the roles that variables can play in program execution. While there are 10+ distinct roles a variable can play in your code (depending on who you ask), we will be focusing on only 2 for now:

1. Meaningful Variables - These are variables that store values related to the purpose of your code. These values will show up directly in the final result of your code and may be mapped onto the real-world. A variable is probably a meaningful variable if it is mentioned in the prompt, console.logged'd at the end of your program, or is used as part of the final result.
2. Utility Variables - These are variables that store information necessary for successful execution, but that will not show up anywhere in the final result. Examples include: "i" in for loops, arrays or objects storing pieces of the final result, or values used solely for conditional checks making.

Index

• Learning Objectives
• Specifications
• Resources

---

Learning Objectives

Study Techniques:

• Stepping through run-time behavior
• Diagramming flow control

JavaScript:

• Block Scope:
  • let & const
  • Global scope & Block scope
  • Inner & Outer (nested block scopes)
  • (we'll see lexical scope in the next chapter)
• Truthy & Falsey
• Conditionals:
  • if, else, else if
  • switch/case
• Loops:
  • while
  • for
  • do while
  • "for ... of" (objects)
  • "for ... in" (arrays)
• Error Handling:
  • throw
  • try/catch/finally
• Not Functions!

Programming Skillzz:

• Stepping Through Execution:
  • Predicting & indicating changes in scope
  • Evaluating expressions by hand
  • Predicting which line will execute next
• Variable Roles:
  • Meaningful variables
  • Utility variables
• Strategy before Code:
  • Understanding the differences between control flow structures
  • Choosing the right control flow structure for your use case
  • Planning variables by role
  • Creative incrementing in for loops
• Using nested flow control:
  • Conditionals in conditionals
  • Loops in loops
  • Conditionals in loops
• Using nested data structures:
  • Arrays in Arrays
  • Objects in Objects
  • Arrays in Objects
  • Objects in Arrays
• Errors:
  • Syntax errors: Code can't be read by JS
  • Logic errors: Code runs but does not behave as expected
  • Runtime errors: Code compiles, but tries to do something impossible

TOP

---

Specifications

Tracing Execution: Nothing that you learned in Variables & Types about sketching run-time behavior has changed, but there will be 2 new things to be aware of:

1. Block Scope: You will now need to indicate in your sketch when a new scope has been opened or closed and illustrate which scope a variable belongs to (inner or outer). There are examples for how to do this in Block Scope.
2. Keeping track of the previous, current and next lines to execute will become much more involved. With conditional checks and loops you will need to think a little harder to trace JavaScript's journey through your code.
3. You will now be expected to indicate a variable's role and why it is accessed. It is enough to mention this in the text above your sketch, there is no need to include this info in the diagram itself.

Continue working your way through your preferred on-line tutorial, regularly tying what you learn there back to these step-through examples. Not all of the examples will have complete step-through diagrams provided, moving forward we'll just be filling in the tricky bits. Stay engaged with these examples like you did in Variables & Types, it's not enough to understand them! You'll know you've got them down when you can predict PythonTutor's next steps:

1. Block Scope
2. Conditionals
   1. if/else/if else
   2. switch case
3. Loops
   1. while
   2. for
   3. do while
4. Nested Structures
5. Error Handling
   1. Throw
   2. Try/Catch

TOP

---

Resources

Tutorials and the Like:

• JavaScipt.info:
  • 2.10 -> 2.13
  • 4.1 -> 4.2
  • 5.6 -> 5.9
  • 8.1 -> 8.2
• Practical JavaScript:
  • Controlling Logical Flow
• MDN:
  • Conditionals
  • Looping Code
  • Error Handling
• learn-js.org:
  • Operators
  • Conditions
  • Loops

Tools:

• Realtime flow-chart generator:
  • For visualizing flow control, the logical structure & progression of your code.
  • Copy paste code into this site to automatically generate flow control visualizations.
• PythonTutor for JavaScript:
  • For building your Notional Machine: visualizes how the JavaScript engine steps through code, deals with variables, and handles function execution.
  • 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 (tabs count!). 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:

• JavaScript Types:
  • Primitives vs. Objects
  • List of them
  • Type Coersion
• 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
• Which Loop to use?
  • So many of them! - interactive examples
  • For's vs While's: StackOverflow, TeamTreeHouse
  • While vs Do While: Digital Ocean, Tutorial GateWay
  • Speed -> standard for loop
  • Same challenge, different loops
• let in a for loop:
  • Step-through example
  • Noraesae
• Truthy & Falsey:
  • A video
  • Deep dive
  • All things truthy
  • All things falsey
  • Some Gotchas
• Syntax vs Runtime vs Logic errors:
  • Syntax vs Logic - in cinema
  • MDN - What went wrong?
  • TutorialsPoint
  • On Quora

TOP

---

---