Priorities: 🥚, 🐣, 🐥, 🐔 (click to learn more)
There is a lot to learn in this repository. If you can't master all the material
at once, that's expected! Anything you don't master now will always be waiting
for you to review when you need it. These 4 emoji's will help you prioritize
your study time and to measure your progress:
- 🥚: Understanding this material is required, it covers the base skills you'll
need to move on. You do not need to finish all of them but should feel
comfortable that you could with enough time.
- 🐣: You have started all of these exercises and feel you could complete them
all if you just had more time. It may not be easy for you but with effort you
can make it through.
- 🐥: You have studied the examples and started some exercises if you had time.
You should have a big-picture understanding of these concepts/skills, but may
not be confident completing the exercises.
- 🐔: These concepts or skills are not necessary but are related to this module.
If you are finished with 🥚, 🐣 and 🐥 you can use the 🐔 exercises to push
yourself without getting distracted from the module's main objectives.
---
[x] 🥚 Predicting Execution: You can use the browser's debugger to step
through your code. Before each step you can make a prediction about what
will happen, after each step you can check your prediction.
[x] 🥚 Assertion Testing: You can write assertion tests to predict what
values will be in your program at a specific step of execution.
Language Features
[x] 🥚 Comments: You can write clear, helpful comments and can explain
different ways comments can be used in a program.
[x] 🥚 Strings: You can write and read string values in a program.
[x] 🥚 let vs. const: You can explain the differences between let
and const including: uninitialized declarations and reassignment.
You can determine when a variable can be assigned with const in a
program.
[x] 🥚 Strict Comparison: You can explain how the === and !==
operators compare strings, and can predict the result of any string
comparison.
[x] 🥚 console.log: You can use console.log to create program traces
in the console, and to print other helpful info for developers.
[x] 🥚 console.assert: You can use the console.assert for assertion
testing, and can write a helpful message assertion message.
[x] 🥚 Predicting Truthiness: You can predict the truthiness of any
primitive value.
[x] 🐣 Tracing Operators: You can use an operators trace table to
evaluate expressions with more than one operator, and you can check your
work with the [trace] button.
Language Features
[x] 🥚 Primitive Types: You can explain the difference between the 5
main primitive types (string, number, boolean, null,
undefined) and what they are used for in a program.
[x] 🥚 typeof: You can predict the typeof operator's output for
values from any of the 5 main primitive types.
[x] 🥚 Explicit Coercion: You can predict & check the outputs when using
Boolean(), String() and Number() to convert between primitive
types.
[x] 🥚 Truthiness Operators: You can explain how truthiness is used
when evaluating &&, ||, ! and ? :.
[x] 🐣 Short-Circuiting: You can write an example that demonstrates how
short-circuiting works with && and ||.
Implicit Coercion:
[x] 🐣 You can explain what implicit coercion is and how it can cause
problems in your programs.
[x] 🐣 You can explain the rules for implicit coercion in common operators
such as +, ! and >.
[x] 🐣 Comparisons: You can predict and check the result of any
primitive comparison.
[x] 🐣 Template Literals: You can read and trace multi-line template
literal strings.
[x] 🐥 Statements vs. Expressions: You can identify if a piece of code
is a statement or an expression.
[x] 🐔 Arithmetic: You can use JavaScript to do math, and can explain or
debug your expressions when they evaluate to something unexpected.
[x] 🥚 Event-Driven Programming: You can explain and discuss this
programming paradigm in terms of the user interface, user
interactions, and processing user input.
[x] 🐣 Entry Points: You can explain the concept of program entry
points by describing which lines of code are executed when a program is
loaded, and which lines of code are executed when a user takes an
action.
[x] 🐣 Program Structure: You can understand and modify programs using
the structure described in /02-just-enough-dom - imports,
description, constants, state, DOM elements, interactions,
initialization.
Language Features: You are comfortable reading, tracing, and completing
programs that use ...
[x] 🥚 document.getElementById(''): You can access a single DOM
element using it's unique ID attribute, and save it to a variable for
use in your program.
[x] 🥚 checkbox.checked: You can read a boolean value from inputs with
type="checkbox".
[x] 🥚 Number(numberInput.value): You can read a string value from
inputs with type="number" and cast the value to type number in your
program.
[x] 🥚 otherInput.value: You can read a string value from all other
input types.
[x] 🥚 pre.innerText: You can display a formatted string in the DOM by
assigning to a <pre> element's .innerText property.
[x] 🐣 element.addEventListener('input'/'click', () => {}): You can
define what code should be executed when a user interacts with a
specific element. You do not need to completely understand this syntax
or how functions work, it's enough if you can complete the exercises in
this chapter. (You'll learn about functions later on, then it will all
make sense.)
[x] 🥚 Imperative Programming: You can define the imperative
programming paradigm and can explain how you know the programs in this
chapter are imperative.
Writing Interactive Programs: For programs that take a string from
users:
[x] 🥚 Blanks: You can complete a program by filling in the blanks.
[x] 🐣 Bugs: You can fix bugs in an otherwise complete program.
[x] 🐣 Goals: You can write the missing portion of a program.
[x] 🐔 Empty Page: You can develop a program with specific behavior
starting from an empty page.
[x] 🐥 User Numbers: You can complete, debug and write programs that
cast user input from string to number.
🐥 Stateful Programs: You can step through, debug and complete
programs with an HTML/CSS interface that store user data in a variable
between interactions.
Refactoring Control Flow:
[x] 🐥 Conditionals: You can refactor between truthiness operators and
if/else statements.
[x] 🐥 Loops: You can either refactor between all loop types, or
explain when it is not possible (or a good idea).
Language Features: You are comfortable reading and tracing programs that
use ...
[x] 🥚 Block Scope: You can show how block scope works using code
snippets and your browser's debugger.
[x] 🥚 Conditionals: You can predict and trace a program's path through
conditional statements.
[x] 🥚 While Loops: You can predict and trace simple programs that use
while loops.
[x] 🥚 for-of Strings: You can predict and trace simple programs that
iterate through the characters of a string using for-of.
[x] 🥚 For Loops: You can explain how a for loops works by refactoring
simple for loops into while loops.
[x] 🐣 Break: You can predict and trace simple programs that use
break.
[x] 🐣 Continue: You can predict and trace simple programs that use
continue.
[x] 🥚 Tracing: You can use the debugger to predict and check the
execution of small programs that use functions. This includes:
[x] 🥚 Test Cases: You can explain a simple function's behavior using
inputs & outputs.
[x] 🐣 Documenting Functions: You can write a JS Doc comment to describe
a function's behavior, inputs and outputs.
Language Features:
[x] 🥚 ES6 Arrow Functions:
Defining a Function: You can show where a function is defined in a
program.
Parameters: You can find a function's parameters in it's definition
Return Statement: You can find the return statements in a function's
definition.
Calling a Function: You can show where a function called in a
program
Arguments: You can show the arguments passed to a function call.
Return Value: You can show how a function's return value is used
after the function call.
[x] 🥚 Default Parameters: You can explain how default parameters work,
and how they help a developer read/understand a function definition.
[x] 🐣 The Callstack: You can explain and inspect the callstack using
the browser's debugger.
[ ] 🐥 Variables in Functions: You can explain three different ways a
variable in a function can be declared/assigned, and can show this in
the debugger:
Parameters: A parameter is assigned it's value when a function is
called with arguments.
Local Variables: A variable declared in the function's curly braces.
Parent Scope Variables: A variable that was declared outside of the
function but used inside the function (avoid this for now.)
[x] 🥚 Testing Environments: You understand that the conventional
describe/it/expect.toEqual functions are defined by a testing
library and made available as global variables in a testing
environment. They are not part of JavaScript!
[x] 🥚 File Sub-Extensions: You can identify how a file is used by it
sub-extension: file.__.js. Sub-extensions are a convention for
developers and development tools. They do not change how JavaScript
inside the file works.
[x] 🥚 Reading Tests: You can read unit tests to understand what a
function is supposed to do.
[x] 🥚 Stepping Through Tests: You can step through unit tests in the
debugger, stepping over the global testing functions and into the
function you are testing.
[x] 🐣 Writing Tests: Given a working function, you can write passing
unit tests to describe it's behavior.
[x] 🐣 Debugging Functions: Given working tests and a function with
small mistakes, you can use the tests as a guide while debugging the
function.
[x] 🐥 Passing Tests: Given working unit tests and an empty function,
you can write code to pass the tests.
[x] 🥚 Procedural Programming: You can define the procedural
programming paradigm and can explain how you know the programs in this
chapter are procedural.
[x] 🥚 Using Functions: You can use a pre-written functions in a
program.
[x] 🐣 Writing Functions: You can write functions that are used in a
program.
[x] 🐥 Refactoring Functions: You can refactor a function out of a
program and test the function separately.
[x] 🐔 Reverse-Engineering: You can reverse-engineer an example program
and refactor parts of your program into separate functions.
[x] 🥚 Reference vs. Value: You can explain how arrays are stored in
memory and can demonstrate using examples run in JS Tutor.
[x] 🥚 Deep vs. Shallow Comparison: You can explain use the concept of
reference vs. value to explain how a deep comparison is different than a
shallow comparison.
Side-Effects: You can ...
[x] 🥚 Explain what side-effects are with an example.
[x] 🥚 Avoid side effects when writing your own functions.
[x] 🐣 Write tests to check if a function has side-effects.
[x] 🐣 Fix side-effects in buggy functions.
Integrating Arrays: You can work with programs that use arrays to store
user data:
[x] 🥚 Call: You can call pre-written functions in a program:
[x] 🐣 Write: You can write functions that are used in a pre-written
program.
[x] 🐣 Refactor: You can refactor logic from a program into a separate
function. You can avoid side-effects and test your function.
[x] 🐔 Reverse-Engineer: You can reverse-engineer a program,
refactoring logic to a separate function if necessary.
🐥 Stateful Programs: You can step through, debug and complete
programs with an HTML/CSS interface that store user data in an array between
interactions.
Language Features: You are comfortable reading and tracing programs that
use ...
[x] 🥚 Array Literals: You can create a new array in your program with
initial values using the array literal syntax:
const arr = ['items'];
🥚 Adding and Removing Items: You can use these methods to add and
remove items in an array:
[x] arr.push(): Adds a new item to the end of an array.
[x] arr.pop(): Removes the last item in an array.
[x] arr.shift(): Removes the first item in an array.
[x] arr.unshift(): Adds a new item to the front of an array.
🥚 Reading Items: You can read items in an array using:
[x] arr[i]: Access a specific item in an array using square brackets a
positive index.
[x] arr.at(i): Access a specific item in an array using .at() and a
positive or negative index.
[ ] 🥚 Updating Items: You can update any item in an array using it's
index, square brackets and assignments: arr[4] = 'hello'.
🥚 Iterating Over Arrays:
[x] for (const item of arr): You use for-of loops to iterate
forwards through an array.
[x] for (let i = ...): You can use for loops to iterate forwards and
backwards through an array.
[x] 🥚 Array.isArray(): You can use Array.isArray() to check if
something is an array: Array.isArray(something)
[x] 🥚 Spread Syntax: you can use spread syntax to create a shallow
copy of an array: const shallowCopy = [...arr];
[ ] 🥚 Declarative Programming: You can define the declarative
programming paradigm and can explain how you know that code using
functional array methods is declarative.
🥚 Array Strategies: You can explain these array strategies using a
diagram or drawing:
[x] Mapping: Modifying each item in an array and putting the results
in a new array.
[x] Filtering: Creating a new array with only the items from the old
array that match some criteria.
[x] Every Item: Checking if every item in an array matches some
criteria.
[x] Some Items: Checking if at least one item in an array matches some
criteria.
[x] Finding: Finding the first item in an array that matches some
criteria.
[x] Reducing: Combining all the items in an array to create a single
result.
🐣 Using Callbacks: You can explain what a callback is, and can ...
[x] Pass a callback into a higher-order function that consumes it.
[x] Write a callback for a higher-order function to consume.
[x] Consume callbacks in a higher-order function that you write.
[x] Decide when to declare callbacks inline, and when to declare them
separately.
[x] 🐣 Debugging Functional Array Methods: You can step through code
that uses functional array methods in your debugger, and can use the
scopes panel to explain what is happening behind the scenes.
Language Features:
Array Methods: You can read and trace code that uses these array
methods, you can also use them to solve simple coding challenges:
[x] 🥚 [].every
[x] 🥚 [].some
[x] 🐣 [].map
[x] 🐣 [].filter
[x] 🐣 [].find
[x] 🐥 [].reduce
[x] 🐣 Higher-Order Functions: You can explain what a higher order
function is using a simple example.
[x] 🐥 Implicit Returns: You understand when a function can be written
with an implicit return and can decide if it makes your code more or
less readable.
[x] 🥚 Avoiding Side Effects: You can read, debug and write functions
that use objects as arguments, without creating side-effects.
🐣 Stateful Programs: You can step through, debug and complete
programs with an HTML/CSS interface that store user data in an object
between interactions.
Language Features:
[x] 🥚 Object Literals: You can declare a new object with initial
key/value pairs using object literal syntax:
const obj = { a: 1, b: 2 };.
[x] 🐣 Dots vs. Brackets: You can explain the difference between dot
and bracket access in an object and can decide which one is best in
your code.
[x] 🐣 Reference vs. Values: You can show that objects are stored by
reference with an example that modifies one object from two variables.
Me
What was not clear, where did you get stuck?
What was clear, what did you master?
Where can you still use some help?
Where can you help others moving forwards?
The Course
What can there be more of?
What can there be less of?
What material were most helpful (from HYF or elsewhere)?
Learning Objectives
Priorities: 🥚, 🐣, 🐥, 🐔 (click to learn more)
There is a lot to learn in this repository. If you can't master all the material at once, that's expected! Anything you don't master now will always be waiting for you to review when you need it. These 4 emoji's will help you prioritize your study time and to measure your progress: - 🥚: Understanding this material is required, it covers the base skills you'll need to move on. You do not need to finish all of them but should feel comfortable that you could with enough time. - 🐣: You have started all of these exercises and feel you could complete them all if you just had more time. It may not be easy for you but with effort you can make it through. - 🐥: You have studied the examples and started some exercises if you had time. You should have a big-picture understanding of these concepts/skills, but may not be confident completing the exercises. - 🐔: These concepts or skills are not necessary but are related to this module. If you are finished with 🥚, 🐣 and 🐥 you can use the 🐔 exercises to push yourself without getting distracted from the module's main objectives. ---
0. Asserting
letvs.const: You can explain the differences betweenletandconstincluding: uninitialized declarations and reassignment. You can determine when a variable can be assigned withconstin a program.===and!==operators compare strings, and can predict the result of any string comparison.console.log: You can useconsole.logto create program traces in the console, and to print other helpful info for developers.console.assert: You can use theconsole.assertfor assertion testing, and can write a helpful message assertion message.1. Primitives and Operators
typeof: You can predict thetypeofoperator's output for values from any of the 5 main primitive types.Boolean(),String()andNumber()to convert between primitive types.&&,||,!and? :.&&and||.+,!and>.2. Just Enough DOM
/02-just-enough-dom- imports, description, constants, state, DOM elements, interactions, initialization.document.getElementById(''): You can access a single DOM element using it's unique ID attribute, and save it to a variable for use in your program.checkbox.checked: You can read a boolean value from inputs withtype="checkbox".Number(numberInput.value): You can read a string value from inputs withtype="number"and cast the value to typenumberin your program.otherInput.value: You can read a string value from all other input types.pre.innerText: You can display a formatted string in the DOM by assigning to a<pre>element's.innerTextproperty.element.addEventListener('input'/'click', () => {}): You can define what code should be executed when a user interacts with a specific element. You do not need to completely understand this syntax or how functions work, it's enough if you can complete the exercises in this chapter. (You'll learn about functions later on, then it will all make sense.)3. Control Flow
if/elsestatements.whileloops.for-ofStrings: You can predict and trace simple programs that iterate through the characters of a string usingfor-of.forloops works by refactoring simpleforloops intowhileloops.break.continue.4. Functions
5. Unit Testing
describe/it/expect.toEqualfunctions are defined by a testing library and made available as global variables in a testing environment. They are not part of JavaScript!file.__.js. Sub-extensions are a convention for developers and development tools. They do not change how JavaScript inside the file works.6. ES Modules
?depslens to visualize the dependencies in a folder.'use strict'!export const _ = () => {};import { _ } from './path/to/file.js';7. Using Functions
8. Arrays
const arr = ['items'];.at()and a positive or negative index.arr[4] = 'hello'.Array.isArray(something)const shallowCopy = [...arr];9. Functional Array Methods
[].every[].some[].map[].filter[].find[].reduce10. Multiple Interactions
const obj = { a: 1, b: 2 };.Me
What was not clear, where did you get stuck?
What was clear, what did you master?
Where can you still use some help?
Where can you help others moving forwards?
The Course
What can there be more of?
What can there be less of?
What material were most helpful (from HYF or elsewhere)?
What HYF material was least helpful?
Any suggestions for future classes?
---- END RETRO TEMPLATE ---->