alexander-lopez-s commented 2 years ago

Inside JS

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

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:
- [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 >.
- [ ] 🐣 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.
- [ ] 🐥 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:
- [ ] 🥚 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.
- [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:
- [ ] 🥚 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:
- [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.
- [ ] 🥚 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. Objects

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.
- [ ] 🐣 For-In Loops:

alexander-lopez-s commented 2 years ago

Week 1

I Need Help With:

My learning process is positively affected when I get explanations in a slow, practical and easy way, I don’t learn by given “a written example” of something. That’s why I prefer watching YouTube tutorials or any other interactive material. Finding answers by myself at this stage (on the internet) is really difficult, either I get more confused or I don’t understand anything.

What went well?

I understand the main objective of console.assert
I feel a little bit more confident with the use of the ‘debugger’
I can make a small basic program that returns the value of an object in an array
I know by heart the structure of a basic function

What went less well?

I think that nested functions is something confusing at this point, I need an example using apples and tomatoes to understand better

Lessons Learned

JavaScript is not easy, the hardest I study the better. I might have to check on some logic exercises online that can help me to stimulate my brain

Sunday Prep Work

Finishing the exercises in study lenses and practicing with small programs to keep training my logic

colevandersWands commented 2 years ago

My learning process is positively affected when I get explanations in a slow, practical and easy way, I don’t learn by given “a written example” of something. That’s why I prefer watching YouTube tutorials or any other interactive material.

Watching other tutorials or interactive materials is great! the exercises in the repository are meant for practicing, they're not supposed to be the explanation that works for everyone.
Either way you should continue to practice learning from example code. As a developer you will spend much more time reading code than writing it, so the more you practice learning from examples now the easier it will be when you need to read full applications written by someone else. (which is unavoidable, companies don't have video tutorials explaining how their code bases work)

That said, what could we make that might help you? more guide videos maybe?

Finding answers by myself at this stage (on the internet) is really difficult, either I get more confused or I don’t understand anything

Searching the internet is much harder than people say it is. "Just google it" ignores a lot of the hidden skills it takes to filter through all the pages and find the answers you need. Maybe you could also ask questions about searching in the Need Help channel?

I think that nested functions is something confusing at this point, I need an example using apples and tomatoes to understand better

You don't need to understand nested functions at this point. the CallStack examples were just to help you explore the debugger and visualize the CallStack, you won't need to write nested functions any time soon.

alexander-lopez-s commented 2 years ago

Thank you very much @colevandersWands 😎😎

danielhalasz commented 2 years ago

or any other interactive material

you can check out Scrimba if you like interactive material..they have some free courses

alexander-lopez-s commented 2 years ago

Week 2

I Need Help With:

This has been a very challenging module for me. I think I need to have a better understanding of the basic JavaScript syntaxes and concepts before jumping to functions and more advanced stuff. The current exercises in Study Lenses are beyond "basic" and console.assert is making them even harder to understand. I know we have had enough time to study and master the basis but I still need to fill some gaps in my brain. Explanations are sometimes too advanced also.

What went well?

I am able to create an array with a lot of objects inside and recall them later.
I can push new objects and remove them from an array using push and unshift.
I can explain why x = ["a", "b", "c"] is not the same as y = ["a", "b", "c"]

What went less well?

Passing arrays as functions is super difficult. I need more examples please.

Lessons Learned

I know what an array is and why do we need them in our code.
I can manipulate arrays with unshift, shift, push, and pop

Sunday Prep Work

I will keep watching YouTube tutorials an try to understand the exercises in study lenses.

danielhalasz commented 2 years ago

Passing arrays as functions is super difficult. I need more examples please.

can you explain what you mean with this? do you mean passing an array into a function?

alexander-lopez-s commented 2 years ago

yes that is what I mean @danielhalasz passing an array into a function

danielhalasz commented 2 years ago

ok, let's see.

const myArray = [1999, "Caracas", 'music'];
const myFunction = (someInput) => {
  console.log(someInput[1])
};

myFunction(myArray);

danielhalasz commented 2 years ago

can you predict what is the outcome of this?

alexander-lopez-s commented 2 years ago

I think the console will be printing "Caracas" as this object occupies the position #1 in the array? No? 🤔

alexander-lopez-s commented 2 years ago

can I just say:

const myArray = [1999, "Caracas", 'music']; console.log(myArray[1]);

Why do we need to encapsule the array in a function??

danielhalasz commented 2 years ago

of course you can, but the purpose of functions is that they are reusable.. and there can be much more complex stuff within its scope..this was just the simplest example.. also, arrays can be much bigger are more complex.

danielhalasz commented 2 years ago

I think the console will be printing "Caracas" as this object occupies the position #1 in the array? No? 🤔

yes, it is "Caracas", but to be precise, it actually occupies index 1 (which is position 2)

alexander-lopez-s commented 2 years ago

oh, index 1, got it, for me it's more than clear now, I wanted this explanation!!! Thank you Daniel.

danielhalasz commented 2 years ago

for a more complex example, you can think about an array or object that contains for example data about a user profile.. and then a function that does something with a certain element inside that.. and then each time you need, you can call that function on a different user's profile data, let's say..

danielhalasz commented 2 years ago

let's say based on the address, calculating how far it is..or whatever :)

alexander-lopez-s commented 2 years ago

like a group of workers in a company with their available vacation days so, the function will check how many days they have, and show the names and tell if they can already go on Hollidays?

danielhalasz commented 2 years ago

yep

alexander-lopez-s commented 2 years ago

Week 3

I Need Help With:

I consider that this week was productive, I have been doing a lot of research on the Internet about arrays and iterations and now I have a clear concept of them; I might need a few more buttons to practice the while loop and the switch statement if necessary.
I understand that an arrow function is a compact alternative to a traditional function, however; the structure is really confusing, and personally, I think it is easier reading the traditional ones.

What went well?

I understand what an array is and how to declare it empty and how to push items later (like a shopping basket).
I learnt that the push function does not only pushes strings or numbers inside an array but also the value of a variable.
I can create a function from scratch and call it.

What went less well?

I struggled for a whole day trying to solve the remove numbers exercise, tried all the possible logic inside my brain but was unable to find a solution until one of my colleagues @Haneefa-Shaik explained to me what needed to be done.
It confuses me using external functions (import and export from...). Therefore, I am currently solving the exercises again but this time without using any libraries, all the code in the same JS file.

Lessons Learned

I am more confident with arrays and functions in general.
I can incorporate a for loop inside a function and link my DOM to JS.

Sunday Prep-Work

I will continue to play with functions and stimulate my logic as much as I can.

danielhalasz commented 2 years ago

the while loop and the switch statement if necessary.

you can if you like them, but as mentioned, you can also completely avoid them in your projects..as Louis said too..just good to know they exist..

an arrow function is a compact alternative to a traditional function

well again, good to know to read both, they arrow functions are the newer standard..and they remind us that functions are variables too

const myFunction = (number1, number2) => {
     let sum = number1 + number2 ;
     return sum;
};
console.log(myFunction(2, 3));

Therefore, I am currently solving the exercises again but this time without using any libraries, all the code in the same JS file.

yes, this can be good practice, to first do it in one file, then later separate them..

alexander-lopez-s commented 2 years ago

Week 4

I Need Help With:

I have problems understanding things when they are explained in a fast way. Last week's lesson was hard to follow. I would prefer to have someone who explains like: Ok students, let's create a function following these steps: number 1, let's declare a variable, number 2, let's write a statement, number 3, let's create the loop, etc. instead of switching between topics, tabs, and windows and not being able to follow what they are doing. It would be nicer if the topics were explained in the most basic possible manner and, in a tutorial approach.
I sometimes have difficulties finding logic in the exercises, they are logical but I think and re-think again to find a correlation. It's not an easy task to link functions with other functions.

What went well?

I understand the difference between for ... inand for ... of. While the first one loops property names of an object, the second one iterates in arrays.
I have a clear idea of what parameters and arguments are.
I went back to previous topics and practiced the parseInt function and created a small addition program.

What went less well?

I believe that my logic is not working in the exercises given lately. More videos like this one will help me: adding numbers by Evan

Lessons Learned

I am more confident with arrays and functions in general.
I can incorporate a for loop inside a function and link my DOM to JS.
I am writing the new ES6 arrow function structure in a notebook so that I can learn it by heart.

Sunday Prep-Work

I will do a quick review of previous topics to refresh my memory.

danielhalasz commented 2 years ago

I have problems understanding things when they are explained in a fast way. Last week's lesson was hard to follow. I would prefer to have someone who explains like: Ok students, let's create a function following these steps: number 1, let's declare a variable, number 2, let's write a statement, number 3, let's create the loop, etc. instead of switching between topics, tabs, and windows and not being able to follow what they are doing. It would be nicer if the topics were explained in the most basic possible manner and, in a tutorial approach.

yes, the first part was quick, but it was just a review of homework, that all of you were supposed to do before and it was already taking time from the class. this is why we have Discord, so if there are questions during the week about an assignment, the coaches can reply, or even have an extra Zoom session. Plus, you can rewatch the video :)

I sometimes have difficulties finding logic in the exercises, they are logical but I think and re-think again to find a correlation. It's not an easy task to link functions with other functions.

would more detailed description in the readmes and more comments in the files help?

I believe that my logic is not working in the exercises given lately.

can you post some code in Discord of the specific code in question?

lab-brussels-1 / home

Cristobal: inside JS - 4 weeks #329

Inside JS

Learning Objectives

0. Asserting

1. Primitives and Operators

2. Control Flow

3. Functions

5. Unit Testing

6. ES Modules

6. Using Functions

7. Arrays

8. Functional Array Methods

9. Objects

Week 1

I Need Help With:

What went well?

What went less well?

Lessons Learned

Sunday Prep Work

Week 2

I Need Help With:

What went well?

What went less well?

Lessons Learned

Sunday Prep Work

Week 3

I Need Help With:

What went well?

What went less well?

Lessons Learned

Sunday Prep-Work

Week 4

I Need Help With:

What went well?

What went less well?

Lessons Learned

Sunday Prep-Work