aviv; debugging weeks 9-12

[aviv82]

• 🥚 Stepping Through: You can:
  • [x] Pause a script in a step debugger (breakpoints and debugger statement)
  • [x] Arrange the debugger, collapse extra panels
  • [x] Step through a script written with Just Enough JS.
  • [x] At each point in execution you can make a prediction of the next line before executing
  • [x] Check your prediction using the scopes panel.
  • 🥚 Assertion Testing:
• [x] You are familiar with assertions
• [x] Can use console.assert to guide your study of a program.
• [x] 🥚 Linting: You can find and fix linting errors in JavaScript programs.
  • 🥚 Naming Variables: You can:
• [x] Analyze a program's variables using a structured comment
  • Rename the variables and give each variable two different names:
  • [x] Generic: A name that describes the variable's role in a general way. This includes deciding whether to use let or const.
  • [x] Specific: A name that fits the variable's role and contextualizes it in the program's domain.
  • [ ] 🥚 Program Life Cycle: You can explain the two phases of a program's life cycle.
  • [ ] 🥚 Fixing Errors: You can use the structured comment to describe an error in your program, and can make several educated guesses at how to fix the error.
  • 🥚 Documenting Functions: You can:
• [x] Demonstrate your understanding of arguments, parameters
• [ ] Return values by writing a JSDoc comment.
  • 🐣 Explicit Coercion:
  • [x] You are aware of the rules for casting explicitly between types
  • [ ] Can complete assertions to describe what value will result, they can have access to the internet and a console.
  • [x] 🐣 Implicit Coercion: You are aware that operators will implicitly cast operands to the same type before operating. They can look or experimentally discover the rules for an operator.
  • 🐣 Statements vs. Expressions: You can:
  • [ ] Explain the difference between a statement and an expression
  • [ ] Identify them in a program. This will be very helpful for understanding how the debugger steps, and for ...
  • [x] 🐣 Operator Precedence: You can refactor an expression with several operators into several statements assigning each step of the expression to a new variable according to the languages rules of operator precedence.111
  • [ ] 🐣 Fixing Bugs: You can use the structured comment to describe and fix a bug in small programs.
  • 🐣 Reference vs. Value: You can:
  • [x] Explain how to swap references or values between variables
  • [ ] Explain deep vs. strict equality
  • [ ] Compare two objects or arrays.
  • 🐣 Procedural Programming: You can:
  • [ ] Tell whether or not a JS program is Procedural
  • [ ] Explain how you made your decision.
  • [x] 🐣 Side-Effects: Given a function that takes an array as an argument you can determine if the function has any side-effects, and can suggest a way to avoid the side-effect.
  • 🐣 Debugging Functions: You can:
  • [x] Read input/output assertion tests to understand a function's actual vs. expected behaviour
  • [x] Correct the function's behaviour.
  • [x] 🐥 Sub-Goal Authoring: Given most of a small program with missing goal, you can write code to implement the missing behaviour.
  • [ ] 🐥 Hoisting: You can find hoisted functions and variables in the browser's debugger and explain how hoisting is related to program life-cycle.
  • [ ] 🐔 Refactoring Functions: You can refactor a designated chunk of a program into an empty function body and pass the given assertion tests.
  • [ ] 🐔 Reverse-Engineering: You can write a small program from scratch that matches the behavior of an example program.

[aviv82]

Week 9

• [x] I have pushed my progress to my practice .js file

Check-In

I Need Help With:

feeling very lost and daunted by too much information. this stuff is really hard to grasp when removed from practice.

What went well?

created a study plan, trying to take things slow and give lots of time to digest. it is vital for me to practice and repeat in order to understand. codecademy is very useful

What went less well?

tough few days. stressing out a bit tbh. i didnt let the things i didnt understand get to me up until this point, but i am beginning to crack.

Lessons Learned

• functions
• switch statement
• ternary operator
• logical operators
• using the debbuger
• linting basics

Sunday Prep Work

• make sure snippet pr goes through
• stick to study plan and hope for best 🤷‍♀️

[colevandersWands]

@aviv82 , would it help to have a call today or tomorrow? I just had a call with @sannesofie who was also studying CodeCademy, maybe the same tips will be helpful for you

[colevandersWands]

Or better yet, maybe @sannesofie can explain what we talked about and I can help out afterwards if you still have any questions

[sannesofie]

@aviv82 & @colevandersWands Sure I can do that... Aviv send me a Zoom link

[aviv82]

@colevandersWands sounds good. i will chat with @sannesofie and see if i can clear some of the clutter.

[aviv82]

Week 11

Check-In

I Need Help With:

some terminology is still confusing, but doing much much better than week 9. the core concepts are clear.

What went well?

sticking to study plan. a huge help for me is working with others in study groups. highly recommend.

What went less well?

if you show me a logical operative i know what it is but its tough to remember the term 'logical operative'. i dont feel confident to talk about code with others, because the terminology is new and all sounds the same

Lessons Learned

all of these from week 9 but more in depth (also nesting a bit):

• functions
• ternary operator
• logical operators
• using the debbuger
• linting basics

Sunday Prep Work

more of the same; study, practice & document

[gelilaa]

What went less well?

if you show me a logical operative i know what it is but its tough to remember the term 'logical operative'. i dont feel confident to talk about code with others, because the terminology is new and all sounds the same

Do you mean logical operators? if that's the case , a simple explanation of logical operators

- &&  True if both conditions are True 
- || True if any condition is true
- !  will return true if the condition is false and vise versa

Hopefully this will give you some confidence 😸

[aviv82]

What went less well?

if you show me a logical operative i know what it is but its tough to remember the term 'logical operative'. i dont feel confident to talk about code with others, because the terminology is new and all sounds the same

Do you mean logical operators? if that's the case , a simple explanation of logical operators

- &&  True if both conditions are True 
- || True if any condition is true
- !  will return true if the condition is false and vise versa

Hopefully this will give you some confidence 😸

ah yes. logical operators. i am trying to remember all these terms... thank you! 🎯

[colevandersWands]

• && True if both conditions are True
• || True if any condition is true

careful with these two, it's not quite that simple! To understand these operators you need to remember two things:

• they return one of the two values passed in, not always true or false.
• short-circuiting: both sides of the operator will not always be evaluated

these things may seem like theory details, but they become very important when you start using them to solve larger problems

[tahminarasoli]

here is the way I learned it, maybe it can help. T for Passed value and F for not passed.

And operator

• T && T = T
• T && F = F
• F && T = F
• F && F = F

Or operator

• T || T = T
• T || F = T
• F || T = T
• F || F = F

[colevandersWands]

That's correct if you're using Boolean values.

but what will this evaluate to? 0 || 1 and will this log to the console? false && console.log('hello')

[tahminarasoli]

I used this way to learn the concept then I use falsy and truthy values concept to evaluate such conditions.

https://developer.mozilla.org/en-US/docs/Glossary/Falsy https://developer.mozilla.org/en-US/docs/Glossary/Truthy

[aviv82]

thank you @tahminarasoli and @colevandersWands ! i will review these materials and formulas! 💫

[aviv82]

Week 12

• [x] I have pushed my progress to practice .js file

Check-In

I Need Help With:

terminology. also, i have many specific questions (like how to use the same button or input box more than once in a questionnaire without causing errors) but on the whole i understand the key concepts of the module

What went well?

following study plan and learning the required material for the module. studying with others in study groups. i cant say i understand everything 100% but i feel like i am in a good place in the middle

What went less well?

understanding side effects. still a bit murky, also the deep compare function is too long and has too many logical operators lol. i gave myself a personal challenge to try and create a functioning questionnaire free of errors. that will probably not happen in the next two days : /

Lessons Learned

better understanding of:

• arrays
• objects
• functions
• tests

Sunday Prep Work

• keep studying/practicing
• last attempt to debug my silly insect page
• write retrospect for module

[colevandersWands]

Hello @aviv82! First about the deepCompare function, I'd originally thought you could just understand what it does without needing to understand how it works. I used all the operators so it could be written one line and not take up a lot of space in JS Tutor's visualization.

But @AlinaTaoRao also asked how it works so I updated the first file to include a more readable version. Later exercises still have the one-line version but the core logic is the same between the different functions, just implemented differently.

Side-note. comparing the two deepCompare functions could be a fun exercises in the next module. You can do a solution write-up for deepCompare

[colevandersWands]

like how to use the same button or input box more than once in a questionnaire without causing errors

i gave myself a personal challenge to try and create a functioning questionnaire free of errors. that will probably not happen in the next two days : /

I'd encourage you not to spend too much time on forms and the DOM just yet. It's a confusing and messy thing. Many of the key JS principles and skills you'll need to work with forms are covered in debugging/integrate and debugging/using-functions. And you'll study the DOM in depth with the Separation of Concerns module.

[colevandersWands]

understanding side effects

Are there any examples in particular that you're blocked on? Have you been using JS Tutor to study this?

[aviv82]

Hello @aviv82! First about the deepCompare function, I'd originally thought you could just understand what it does without needing to understand how it works. I used all the operators so it could be written one line and not take up a lot of space in JS Tutor's visualization.

But @AlinaTaoRao also asked how it works so I updated the first file to include a more readable version. Later exercises still have the one-line version but the core logic is the same between the different functions, just implemented differently.

Side-note. comparing the two deepCompare functions could be a fun exercises in the next module. You can do a solution write-up for deepCompare

yes! i saw that yesterday but did not read through yet. i am sure it will make more sense with the breakdown

[aviv82]

like how to use the same button or input box more than once in a questionnaire without causing errors

i gave myself a personal challenge to try and create a functioning questionnaire free of errors. that will probably not happen in the next two days : /

I'd encourage you not to spend too much time on forms and the DOM just yet. It's a confusing and messy thing. Many of the key JS principles and skills you'll need to work with forms are covered in debugging/integrate and debugging/using-functions. And you'll study the DOM in depth with the Separation of Concerns module.

i am starting to see that i was rushing too fast into something i am not ready for yet. its important for me to apply information so i thought id try to make something with the tools ive learnt. i dont regret it, but in retrospect i could have spent the time on more relevant stuff. its time to give this side project a rest (for now)

[aviv82]

understanding side effects

Are there any examples in particular that you're blocked on? Have you been using JS Tutor to study this?

we were able to solve the two exercises in the study group (block and array). it was tough and a team effort. i dont think i could have done it myself. hoisting and side effects are still beyond the scope of my understanding at this point but i am getting there slowly

[colevandersWands]

i dont think i could have done it myself.

exactly why you study in groups! as long as you understand what the group did, you're on the right path. you'll get lots of chance to practice with the concept in Behavior, Strategy, Implementation