reading-notes

Problem Domain, Objects, and the DOM

JavaScript Object Basics

Describing an Object to a Non-Technical Friend

You could describe an object as a “package” or container used to keep related information and actions organized in one place. Instead of having a bunch of separate, loose notes (variables) and instructions (functions) scattered around, you bundle them together into one named unit. For example, if you were describing a person, the object would hold all their specific details—like their name and age—along side things they can do, like introducing themselves.

Advantages of Creating Object Literals

An object literal is when you write out the contents of an object directly using curly braces {}. Some key advantages include:

• Efficiency: It is more efficient to send a single object (for example, to a server) than to send many individual data items.
• Organization: It keeps related data and functionality “locked away” in its own package, which prevents your code from getting messy or having different parts of your program accidentally clash with one another.
• Readability: It is easier to work with than an array when you want to identify specific items by a name rather than just a number in a list.

How Objects Differ from Arrays

The main difference lies in how you access the information inside them:

• Arrays map numerical indices (0, 1, 2…) to values.
• Objects map strings (names) to values. Because they use names instead of just numbers, objects are sometimes called “associative arrays”.

When to Use Bracket Notation Instead of Dot Notation

While dot notation (e.g., person.age) is generally preferred because it is easier to read, you must use bracket notation when the property name is stored in a variable.

Example: If you have a function that needs to look up a property, but you don’t know which one until the function is actually running, you would use brackets:

const person = { name: "Bob", age: 32 };
let propertyName = "name"; 

// This works because it looks for the value stored in the variable
console.log(person[propertyName]); // Output: "Bob"

// This would NOT work because it would look for a property literally named "propertyName"
console.log(person.propertyName); // Output: undefined

Bracket notation is also required when you want to set a property name dynamically, such as using a value typed into a text input by a user.

Evaluating the Code: The Keyword this

Understanding this in JavaScript

What does this refer to?

Let’s evaluate the following code:

const dog = {

name: 'Spot',

age: 2,

color: 'white with black spots',

humanAge: function (){

console.log(`${this.name} is ${this.age*7} in human years`);

}

}

Inside the humanAge function, this refers to the dog object itself.

When you call dog.humanAge(), JavaScript sets the context of this to whatever is “to the left of the dot.” Because this points to dog, the code interprets the properties as follows:

• this.name becomes dog.name (“Spot”)
• this.age becomes dog.age (2)

The Advantages of Using this

Using this instead of hardcoding the variable name (like dog.name) provides several key benefits:

• Dynamic Context: If you were to rename the dog variable to myPet, the function would still work perfectly. If you had hardcoded dog.name inside the function, the code would break after the rename.
• Reusability: You can use the same function across different objects. For example, if you had a cat object with the same function, this.name would correctly point to the cat’s name without you having to rewrite the logic.
• Maintainability: It follows the DRY (Don’t Repeat Yourself) principle. You define the logic once, and it automatically adapts to whichever object is currently executing it.

In the context of an object method, the term this refers to the current object the code is being executed in (or the object the method was called on).

The Advantage of Using this: The primary advantage is that it allows the same method definition to be reused for multiple objects. Because this points to whatever object is currently “active,” the code can access the specific data for that particular instance without needing to know the object’s name ahead of time. This becomes essential when using constructors to create many different objects from a single template, ensuring each object can correctly refer to its own unique properties.

Introduction To The DOM

The Document Object Model (DOM) is a programming interface and an object-oriented representation of web documents, such as HTML, XML, or SVG files. It represents the structure of a document in memory as a logical tree, where each branch ends in a node containing objects. This model allows programs to access and manipulate the page’s structure, style, and content.

The relationship between the DOM and JavaScript can be described through the following key points:

• Access and Manipulation: While the DOM is not a programming language itself, it provides the API (Application Programming Interface) that JavaScript uses to interact with web pages. Without the DOM, JavaScript would have no model or “understanding” of elements like headers, tables, or text within a browser.
• Distinct Entities: The DOM is not part of the core JavaScript language. JavaScript is a scripting language that can be used in many contexts (like Node.js), while the DOM is a Web API specifically built to model web documents.
• Language Independence: The DOM was designed to be independent of any specific programming language. Although it is most commonly used with JavaScript, it can be implemented in other languages, such as Python.
• Practical Use: When you write a script to change a heading or add a new paragraph, you are writing in JavaScript but using the DOM to access the document’s elements and its tree structure. For example, methods like document.querySelector() or document.createElement() are part of the DOM API that JavaScript calls to perform actions.