⇦ Back

WDX-180

Web Development X

Week 17 | Objects

Week 16 ⇦

Updated: 29/1/2025

⇨ Week 18

Week 17 - Day 1 | Object Creators

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: Object Creators (1/2)
  • Part 2: Object Creators (2/2)

You can find the lecture code here

Lecture Notes & Questions:

  • What is globalThis?
    • globalThis === window (in the browser)
    • globalThis === global (in Node.js)
    • MDN
  • What is [object Object]?
    • if you see ‘[object Object]’, you are probably forcing JS to convert an object to a string (implicitly/automatically).
  • What is Type casting?
    • “Explicit (manual) type conversion, also called type casting, is a type conversion which is explicitly defined within a program (instead of being done implicitly/automatically according to the rules of the language for implicit type conversion).”
      • Implicit/Automatic type conversion:
        • document.body.innerHTML = { a: 1 } => ‘[object Object]’
      • Explicit/Manual type conversion (aka Type Casting):
        • document.body.innerHTML = JSON.stringify({ a: 1 })
  • The strange case of null
    • Remember that null is NOT AN OBJECT, yet typeof null === ‘object’

  • When you see an object method/function call, e.g. person.getName() and you want to find out what this refers to inside the getName function, take a look on the left hand side of the function call: person.getName(), this === person

  • For this we learned about the eventHandler rule (this === event.currentTarget), we learned the object.methodCall() (this === object on the left of the call === object), and when we see a function call that is neither an event handler nor an object method (plain function call), we get: 1) this === Window global object or 2) if we have used “use strict”, this === undefined.

  • IMPORTANT: this is one of the hardest parts in JS.
    • Advice: (1) always try to stop and think about the values of this whenever you encounter it in your code (knowledge check). (2) console.log’s everywhere!
  • Strive for consistency in your code: A variable’s value or a property’s value should always be the same type. Don’t assign a number and then update the property’s or variable’s value to a string.

Suggested material for study & practice:

  • Come up with as many examples as you can, of objects that have similar structure, e.g. Song Objects, Song Playlist Objects, Books, Facebook/Twitter posts, etc.
  • Create Function Constructors to easily create multiple instances of these objects
  • Create Shared functions that you can attach to each object instance through the …spread operator
  • Try to visit websites or think of applications that might be using the same pattern (e.g. Google Spreadsheet, YouTube or Google results, etc.)

References & Resources:

Extra Resources

Photo by ThisIsEngineering

Week 17 - Day 2 | The Tweeter Coding Challenge

Schedule

  • Complete the Coding Challenge

Study Plan

Here’s today’s coding challenge.

Week 17 - Day 3 | The Real Constructors & Prototype

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: Q&A
  • Part 2: The Real Function Constructors and prototype

You can find the lecture code here

Lecture Notes:

  • In HTML, placing a <button> element inside a <form> element, (automatically) makes the button a submit mechanism. When you click it, the form gets submitted to the server and the page reloads. That’s the default Behaviour.
    • Ways to prevent a button inside a form submitting the form:
      • 1) (HTML) Add a type=”button” to the <button>
      • 2) (JS) Add an event.preventDefault() to the click handler of the <button>
      • 3) (JS) Add an event handler on the form “submit” event and use the event.preventDefault() ( form => event listener on “submit”)
  • The new keyword (always before a function call) turns the function call into a constructor call. The function that was called starts behaving differently (from an ordinary function call): someFn() vs new someFn()
    • What changes with the new keyword?
      • 1) We get a new object returned from the call (no need for return statement). Most of the times, we don’t want a return statement. The constructor always returns the object.
  • Functions that are intended to be used as constructors (called with the new keyword) should ALWAYS START WITH A CAPITAL LETTER.

Suggested material for study & practice:

  • Study the MDN article on <button> and learn more about it.
  • Expressions and Operators
  • Study the Operators’ Precedence table
    • define precedence: “the condition of being considered more important than someone or something else; priority in importance, order, or rank.”
  • Study about the hidden attribute
  • Manipulate HTML attributes via JS: setAttribute( key, value ), removeAttribute( key ), toggleAttribute ( key ), getAttribute( key )
  • Off-by-one Error (Obi-wan)
  • Practice: think of 3 different types of objects
    • Declare a single object
    • Separate unique and shared properties
    • Define the constructor
    • Define the prototype
    • Just start simple and go more advanced with the 2nd and 3rd object

Week 17 - Day 4 | The Murdle Table Coding Challenge

Schedule

  • Complete the Coding Challenge

Study Plan

Here’s today’s coding challenge.

Week 17 - Day 5 | Constructors & Prototype

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:

  • Static Object Methods
  • Built-in constructed objects
  • Object.*
  • Function chaining

You can find the lecture code here

Lecture Notes:

  • Can we update the prototype of built-in objects?
    • Yes, but you SHOULD NEVER DO IT!

Suggested material for study & practice:

References & Resources:

  • CSS: user-select: none will disable the automatic selection on click/double click
  • CSS: Don’t use the tag name in your class names, e.g. don’t do .divTableCell, just use .tableCell. Also, don’t use property values in your class names, e.g. .redHeader {} because the values might change in the future.
  • DOMContentLoaded event
  • the .constructor property of objects is a reference to the constructor Function
  • The dunder proto: _ _ proto _ _
  • NEVER EVER update the _ _ proto __
  • NEVER EVER use the _ _ proto _ _ in production (it’s just an educational feature)
  • The Function.prototype property
  • Every single built-in object has its own constructor: new Array(), new Object(), new Date(), new Promise(), etc. and of course their own prototype: Array.prototype, Object.prototype, Date.prototype, etc.
  • Prototype diagram from PyTutor

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!

Week 17 - Weekend Suggestions

If you are in the mood of enjoying related content during the weekend, check out our weekly recommendations here.

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