Yun-Hsia : Inside JS : 4weeks

[yunhsiaho]

Inside JS

My fork

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.
  • [ ] 🥚 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 ? :.
  • [ ] 🐣 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.
  • [ ] 🐣 You can explain the rules for implicit coercion in common operators such as +, ! and >.
  • [ ] 🐣 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.
  • [ ] 🐔 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:
  • [ ] 🥚 Blanks: You can complete a program by filling in the blanks.
  • [ ] 🐣 Bugs: You can fix bugs in an otherwise complete program.
  • [ ] 🐣 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.
  • [ ] 🐥 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:
  • [ ] 🐥 Conditionals: You can refactor between truthiness operators and if/else statements.
  • [ ] 🐥 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.
  • [ ] 🥚 Conditionals: You can predict and trace a program's path through conditional statements.
  • [ ] 🥚 While Loops: You can predict and trace simple programs that use 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: You can explain how a for loops works by refactoring simple for loops into while loops.
  • [ ] 🐣 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:
  • [ ] 🥚 Tracing: You can use the debugger to predict and check the execution of small programs that use functions. This includes:
  • [ ] 🥚 Test Cases: You can explain a simple function's behavior using inputs & outputs.
  • [ ] 🐣 Documenting Functions: You can write a JS Doc comment to describe a function's behavior, inputs and outputs.
• Language Features:
  • [ ] 🥚 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.
  • [ ] 🐥 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:
  • [ ] 🥚 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.
  • [ ] 🥚 Reading Tests: You can read unit tests to understand what a function is supposed to do.
  • [ ] 🥚 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.
  • [ ] 🐣 Writing Tests: Given a working function, you can write passing unit tests to describe it's behavior.
  • [ ] 🐣 Debugging Functions: Given working tests and a function with small mistakes, you can use the tests as a guide while debugging the function.
  • [ ] 🐥 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:
  • [ ] 🥚 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.
  • [ ] 🐣 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.
  • [ ] 🥚 Using Functions: You can use a pre-written functions in a program.
  • [ ] 🐣 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.
  • [ ] 🐔 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:
  • [ ] 🥚 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 ...
  • [ ] 🥚 Explain what side-effects are with an example.
  • [ ] 🥚 Avoid side effects when writing your own functions.
  • [ ] 🐣 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:
  • [ ] 🥚 Call: You can call pre-written functions in a program:
  • [ ] 🐣 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 ...
  • [ ] 🥚 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:
  • [ ] arr.push(): Adds a new item to the end of an array.
  • [ ] arr.pop(): Removes the last item in an array.
  • [ ] 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:
  • [ ] arr[i]: Access a specific item in an array using square brackets a positive index.
  • [ ] 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:
  • [ ] for (const item of arr): You use for-of loops to iterate forwards through an array.
  • [ ] 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:
  • [ ] Mapping: Modifying each item in an array and putting the results in a new array.
  • [ ] 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.
  • [ ] 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.

    Week1

    I Need Help With:

    Not for now.

What went well?

We are learning deeper acknowledge about javascript and it's getting more interesting.

What went less well?

I didn't take the course last Sunday, so I watched the record to catch up. I found that the course s getting more complexe and we should learn faster to follow.

Lessons Learned

${variableInString}, ()=>{}, how to write a function and pass parameters...

Sunday Prep Work

Finish the homework

Week2

I Need Help With:

Not for now.

What went well?

I'm pround of myself when I figured out the exercise by myself.

What went less well?

Not for now.

Lessons Learned

array and functions, array reference ...

Week3

I Need Help With:

Not for now.

What went well?

It's fun to do the JS exercises.

What went less well?

It will soon be the last course of JS but I don't feel like that I'm not very familiar with all the functions yet.

Lessons Learned

Array and the related functions like filter(), map(), every()...

[sammou00]

@yunhsiaho it is normal, you are learning each week new concepts.

[sammou00]

@yunhsiaho where is your check-in for week 2?