[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] š„Ā 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.
[x] š„Ā 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] š„Ā Spec Files: You can work with functions and unit tests separated into two files.
[x] š„Ā Visualizing Dependencies: You can use theĀ VSCode Dependency Cruiser extensionĀ and theĀ ?depsĀ lens to visualize the dependencies in a folder.
[x] š£Ā Refactoring Tests: You can refactor a function and unit tests from one file to two files: one with the function, one with the unit tests.
Language Features:
[x] š„Ā Module Files: Are always in strict mode by default, no moreĀ 'use strict'!
[x] š„Ā Named Exports: You can export a variable and it's value usingĀ export const _ = () => {};
[x] š„Ā Named Imports: You can import a variable and it's value from another file usingĀ import { _ } from './path/to/file.js';
[x] š„Ā Module Life-Cycle: You understand that ES Modules areĀ static, and are evaluated atĀ creation phase.
[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(): Adds a new item to the front of an array.
[x] arr.unshift(): Removes the first item in 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.
[x] š„Ā 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];
[x] š„Ā 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.
Week 1
I Need Help With:
.map()
What went well?
I understand basic of if loop
basic knowlege about Primitive Types & Reference Types
Array Methods: map()filter()every(): Checks if all elements in an array satisfy a condition.
some(): Checks if at least one element in an array satisfies a condition.
String Manipulation:
strip(): A method to remove leading and trailing whitespace.
split(' ') and join(' '): Used to split a string into an array of substrings based on a specified separator and then join the elements of the array back into a string.
includes(): Checks if a string contains a certain substring.
What went less well?
Pure functions: Functions that do not produce side effects.
Non-pure functions like sort() which directly modify the array.
Callback functions: Functions passed as arguments to other functions.
Lessons Learned
Using {} to define objects.
Accessing properties with dot notation (object.property) or bracket notation (object['property']).
Computed property names using square brackets (object[key]).
Using delete to remove keys from objects.
Checking if a key exists in an object using 'key' in object.
Learning Objectives
0. Asserting
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.===Ā andĀ!==Ā operators compare strings, and can predict the result of any string comparison.console.log: You can useĀconsole.logĀ to create program traces in the console, and to print other helpful info for developers.console.assert: You can use theĀconsole.assertĀ for assertion testing, and can write a helpful message assertion message.1. Primitives and Operators
typeof: You can predict theĀtypeofĀ operator's output for values from any of the 5 main primitive types.Boolean(),ĀString()Ā andĀNumber()Ā to convert between primitive types.&&,Ā||,Ā!Ā andĀ? :.&&Ā andĀ||.+,Ā!Ā andĀ>.2. Control Flow
if/elseĀ statements.whileĀ loops.for-ofĀ Strings: You can predict and trace simple programs that iterate through the characters of a string usingĀfor-of.forĀ loops works by refactoring simpleĀforĀ loops intoĀwhileĀ loops.break.continue.3. Functions
5. Unit Testing
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!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
?depsĀ lens to visualize the dependencies in a folder.'use strict'!export const _ = () => {};import { _ } from './path/to/file.js';6. Using Functions
7. Arrays
const arr = ['items'];.at()Ā and a positive or negative index.arr[4] = 'hello'.Array.isArray(something)const shallowCopy = [...arr];8. Functional Array Methods
[].every[].some[].map[].filter[].find[].reduce9. Multiple Interactions
const obj = { a: 1, b: 2 };.Week 1
I Need Help With:
.map()What went well?
ifloopWhat went less well?
forloopLessons Learned
Week 2
I Need Help With:
What went well?
map()filter()every(): Checks if all elements in an array satisfy a condition.some(): Checks if at least one element in an array satisfies a condition.strip(): A method to remove leading and trailing whitespace.split(' ')andjoin(' '): Used to split a string into an array of substrings based on a specified separator and then join the elements of the array back into a string. includes(): Checks if a string contains a certain substring.What went less well?
Lessons Learned
deleteto remove keys from objects.getsetmethods for objects.summary of Array Manipulation in JavaScript
Week 3
I Need Help With:
parseInt()andparseFloat()for extracting integer or floating-point values from strings.Object.values(obj)to retrieve an array of an object's keys and object's values.What went well?
What went less well?
replaceAll()method for replacing all occurrences of a substring within a string.Lessons Learned