Mervat: Inside JS, 4 weeks

[Mervatabuamro]

my fork of module repository

Learning Objectives

0. Asserting

• Skills:
  • [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.

1. Primitives and Operators

• Skills:
  • [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:
  • [ ] 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.
  • [ ] Template Literals: You can read and trace multi-line template literal strings.
  • [ ] 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.

2. Control Flow

• Skills:
  • [ ] 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.
  • [ ] 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 ...
  • [ ] 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.
  • [ ] Continue: You can predict and trace simple programs that use continue.

3. Functions

• Skills:
  • [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.
  • [ ] Default Parameters: You can explain how default parameters work, and how they help a developer read/understand a function definition.
  • [ ] 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:
    1. Parameters: A parameter is assigned it's value when a function is called with arguments.
    2. Local Variables: A variable declared in the function's curly braces.
    3. Parent Scope Variables: A variable that was declared outside of the function but used inside the function (avoid this for now.)

5. Unit Testing

• Skills:
  • [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!
  • [ ] 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.
• Language Features:
  • nothing new here!

6. ES Modules

• Skills:
  • [x] Spec Files: You can work with functions and unit tests separated into two files.
  • [ ] 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:
  • [ ] Module Files: Are always in strict mode by default, no more 'use strict'!
  • [ ] Named Exports: You can export a variable and it's value using export const _ = () => {};
  • [ ] Named Imports: You can import a variable and it's value from another file using import { _ } from './path/to/file.js';
  • [ ] Module Life-Cycle: You understand that ES Modules are static, and are evaluated at creation phase.

6. Using Functions

• Skills:
  • [ ] 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.
  • [ ] 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.
• Language Features:
  • Nothing new here!

7. Arrays

• Skills:
  • [x] Reference vs. Value: You can explain how arrays are stored in memory and can demonstrate using examples run in JS Tutor.
  • [ ] 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.
  • [ ] 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.
  • [ ] Refactor: You can refactor logic from a program into a separate function. You can avoid side-effects and test your function.
  • [ ] 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.
  • [ ] 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.
  • [ ] Array.isArray(): You can use Array.isArray() to check if something is an array: Array.isArray(something)
  • [ ] Spread Syntax: you can use spread syntax to create a shallow copy of an array: const shallowCopy = [...arr];

8. Functional Array Methods

• Skills:
  • [ ] 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.
  • [ ] Every Item: Checking if every item in an array matches some criteria.
  • [ ] 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.
  • [ ] Reducing: Combining all the items in an array to create a single result.
  • Using Callbacks: You can explain what a callback is, and can ...
  • [ ] Pass a callback into a higher-order function that consumes it.
  • [ ] Write a callback for a higher-order function to consume.
  • [ ] Consume callbacks in a higher-order function that you write.
  • [ ] Decide when to declare callbacks inline, and when to declare them separately.
  • [ ] 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:
  • [ ] 🥚 [].every
  • [ ] 🥚 [].some
  • [ ] 🐣 [].map
  • [ ] 🐣 [].filter
  • [ ] 🐣 [].find
  • [ ] 🐥 [].reduce
  • [ ] 🐣 Higher-Order Functions: You can explain what a higher order function is using a simple example.
  • [ ] 🐥 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.

9. Multiple Interactions

• Skills:
  • [ ] 🥚 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:
  • [ ] 🥚 Object Literals: You can declare a new object with initial key/value pairs using object literal syntax: const obj = { a: 1, b: 2 };.
  • [ ] 🐣 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.
  • [ ] 🐣 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

Nothing right now.

What went well?

Working on some of the exercises.

What went less well?

all good for now

Lessons Learned

---

Week 2

I Need Help With

I did not understand some of the exercises.

What went well?

Solving some of the exercises.

What went less well?

Lessons Learned

writing a function based ion given information. better understanding of arrays and how it works. knowing some new methods in java

---

Week 3

I Need Help With

its okay for now

What went well?

Understanding the examples and practicing more

What went less well?

Lessons Learned

better understanding of arrays and functions

[sammou00]

@Mervatabuamro which exercise(s) you didn't understand? and if so, why you didn't ask for help?

[Mervatabuamro]

My time this week is not so much organized so I try to understand by myself and I will ask for sure for help next time. thank you for following up