⇦ Back

WDX-180

Web Development X

Week 31 | Advanced JavaScript

Week 31 - Day 1 | Object Constructors & Object Instances

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: TypeScript, Objects Constructors & Instances
Part 2: TypeScript, Objects Constructors & Instances

You can find the lecture code here and the diagram here.

References & Resources:

Object.hasOwn()
- Introduced in ES2022
- …and not available before that
Pretty TypeScript Errors
Axel Rauschmayer: JavaScript inheritance: beyond the basics
For private methods/properties we can use:
- the private keyword in TypeScript
- the # hash character in JavaScript

Lecture Questions:

Property hasOwn does not exist on type ObjectConstructor. Do you need to change your target library? Try changing the lib compiler option to es2022 or later. Object.hasOwn(pet,"run") 😰
pet.hasOwnProperty("run")
- SO: Property ‘assign’ does not exist on type ‘ObjectConstructor’
Are static methods/properties the same as private methods/properties?
- No
What is an instance?
- Any object created using the new keyword. The object is always an instance of the Class or Function Constructor that created it.

Exercises

Study: instanceof
Study: Sparse Arrays (vs Dense Arrays)
- Also follow and read this blog and his books, articles and videos
Study private properties
Investigate (more) on the difference between: if ( obj.prop ) and if ( “prop” in obj )
- “A property may be present in an object but have value undefined. Therefore, x in obj is not the same as obj.x !== undefined.” ~ The in operator @ MDN
Try the following:
- Create a class (e.g. Cat, Fish) and/or constructor and then create instances of Cat and Fish (e.g. siameseCat) and try using the object instanceof Cat check.
Study: Array Constructor
Start this TypeScript course

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week31/progress/progress.draft.w31.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 31 - Day 2 | Expenses Chart Challenge

Schedule

Study the suggested material
Practice on the topics and share your questions

Study Plan

Study the following TypeScript concepts and then scroll down to the Exercises section to start your Frontend coding challenge.

TypeScript Generics explained with pets
Generic Types
Try TypeScript with ts-node, a TypeScript execution engine and REPL for Node.js.

Exercises

Time for a Frontend coding challenge!

In this challenge, you’ll create a bar chart component from scratch.

Visit the Frontend Mentor web page and start hacking!

You can also download the exercise resources and instructions here.

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 31 - Day 3 | Object Wrappers, Falsy Values & Sets

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Primitive Objects
Part 2: Object Wrappers, Falsy Values & Sets

You can find the lecture code here and the diagrams here.

References & Resources:

Bookmarks you MUST have as a JS developer:
typeof (unary) operator always returns a string
If you need to go past the Number.MAX_SAFE_INTEGER, use the BigInt notation:
- Instead of: (9007199254740991+1) === (9007199254740991+2) === true???
- Do this: (9007199254740991n+1n) === (9007199254740991n+2n)
  - turn Number(s) into BigInt(s) by placing the n at the end of the number
With floating point numbers (aka decimals), be extra careful.
- Consider using a library like decimal.js or big.js
Use the _ notation for large integers: 10_000_000
0/-0 are the only falsy number values (When coerced to a Boolean they produce false)
“” empty string is the only falsy String value (when coerced to a Boolean it produces false)
Value type conversion can happen in 2 ways:
- Explicitly: String(5);
- Implicitly: 5 + “”; => “5”
  - Another example: if/while/switch/dowhile
  - if ( 5 ){ … } => if ( 5 => Boolean(5) => true ){ … }
You will probably never have to deal (or find) Object Wrapped Primitives in any codebase.
When ES6 came out (?) a bunch of new objects were introduced:
- Set
- WeakSet
- Map
- WeakMap
- Special kind of Arrays: Indexed Collections (mainly for working with binary data)
Some Constructor Functions can be used without the new keyword:
- Date(), new Date(), Error(), new Error()
Others are pretty strict and will throw an Error
- Promise, Set, etc.
Others are completely forbidden (illegal constructors)
- new HTMLElement() will throw an error

Exercises

Study Guide

Discover Set(s) and its methods:
- values() (similar to Object.values())
- keys() (similar to Object.keys())
- entries() (similar to Object.entries())
- forEach()
- Try using Sets with Object references
- Try and google for an introductory video on Math and Set Theory

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 31 - Day 4 | Expenses Chart - React Twist

Schedule

Study the suggested material
Practice on the topics and share your questions

Study Plan

Go straight to the Exercises section below and start coding!

Exercises

If you haven’t completed the Frontend Mentor Expenses Chart coding challenge from day 02, now it’s time to do so.

If you have already completed the challenge, here’s the next one:

Implement the Expenses Chart in React!

You can download the exercise resources and instructions here as well.

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 31 - Day 5 | Testing

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Testing
Part 2: Testing React Apps

You can find the lecture code here and the diagram here.

Lecture Notes & Questions:

References & Resources:

Colored console output?
- Check this SO thread: https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color
Testing pyramid (Google for a couple of images and take a good look at a few of them)
Unit Tests:
- Some things to consider:
  - Always implement as many tests as you can after developing a specific function or feature (before moving on to the next part of your code).
    - ALWAYS make sure to break your tests in order to test them (tests are code that should be tested)
  - Try to have a high test coverage, meaning all parts of the code should be tested.
  - Your functions must do one thing and one thing only
  - 1) They adhere to the Single Responsibility Principle
    - You can easily test if your functions follow this principle by picking a function and asking yourself to describe what this function is doing. If the description (your response) contains the word “and”, you should probably break this down into multiple functions. Example: “this function fetches the user data, calculates and displays the average rating.” You probably want to break this down into 3 functions: fetchUserData(userId):userData => calculateAvgRating(userData):avgRating => renderData(avgRating):void => Expect to see the average rating in the screen
    - There might be the case where you want to combine these units into a function: displayAvgUserData()
  - 2) Your functions should be pure, meaning they should have no side-effects (affecting parts of the code that is outside the function body).
    - A pure function is a function that accepts an input, treats this input (argument(s) as a read-only (immutable) value, and produces and returns some kind of output value. A pure function should always give the same output given the same input. 40,2 in => 42 out (ALWAYS)
    - A function that works with a global variable, or changes a variable that belongs to the outer scope is an impure function.
ts-node
A real-life example from GitHub where application is complemented with thorough testing:
- Source code (a class with various methods [units])
- Tests for each method [unit]

Exercises

Challenge: optimize and improve the UTILS.test.js so that there is an Error or Success message at the end. If all the tests pass, you should see the number of tests that succeeded along with a green output and some emoji. If some of the tests fail, you should see some relevant information displayed in red with a X emoji.
- Example: ✅ All tests (5/5) completed successfully.
- Example: ❌Tests failed. Passed 3/5.
Challenge: improve the test coverage of the UTILS.js by handling as many edge cases as you can (null, undefined, wrong types, large numbers, etc.).
Challenge: How to use tsc (or npx tsc) to target specific files? (and avoid tsc scanning node_modules, etc.)?
Challenge: How to run ts-node and have it execute .ts files without errors!
- https://www.digitalocean.com/community/tutorials/typescript-running-typescript-ts-node
Study:
- Basic Terminologies of Software Testing

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham

WDX-180

Week 31 | Advanced JavaScript

Week 30 ⇦

⇨ Week 32

Week 31 - Day 1 | Object Constructors & Object Instances

Schedule

Study Plan

Exercises

Week 31 - Day 2 | Expenses Chart Challenge

Schedule

Study Plan

Exercises

Week 31 - Day 3 | Object Wrappers, Falsy Values & Sets

Schedule

Study Plan

Exercises

Week 31 - Day 4 | Expenses Chart - React Twist

Schedule

Study Plan

Exercises

Week 31 - Day 5 | Testing

Schedule

Study Plan

Exercises