1. Reference Guide

Key Vocabulary

Term Definition Example
Object A JavaScript structure containing key-value pairs {name: "Steve"}
Key The name of a property name
Value The information stored under a key "Steve"
Property A key-value pair in an object name: "Steve"
Dot Notation Accessing or modifying a property using a period (.) character.name
Bracket Notation Accessing a property using square brackets and a string key character["name"]
Nested Object An object stored inside another object character_info: {level: 10}
Array An ordered list of values skills: ["Attack", "Heal"]
JSON A text format used to store and transfer structured data {"name":"Steve"}
JSON.stringify() Converts an object into a JSON string JSON.stringify(user)
JSON.parse() Converts JSON string into a JavaScript object JSON.parse(jsonString)
Undefined The value returned when a property does not exist character.element

JavaScript Objects vs. JSON Syntax

Feature JavaScript Object JSON
Keys Quotes optional Double quotes required
Dot Notation (obj.key) Supported Not supported directly (returns undefined on string)
Functions Allowed Not allowed
Comments Allowed in JavaScript Not allowed
Trailing commas Can be allowed Not allowed
Purpose Used directly in JavaScript memory Store and transfer data as text
Conversion JSON.stringify() JSON.parse()

2. LxD Cycle

Empathize: Beginners often confuse JavaScript objects with JSON because the two look very similar. Students may forget that JSON has stricter rules than JavaScript objects, such as requiring double quotes around keys and not allowing functions, comments, or trailing commas. Students may also struggle to access object properties using dot notation or understand when to parse JSON before applying dot notation.

Define:

  • POV: JavaScript students need to understand the difference between JavaScript objects and JSON and know how to use dot notation to read and modify parsed object properties.

  • Learning Goal: Students will create JavaScript objects, access object properties using dot notation, understand JSON syntax rules, convert JavaScript objects to JSON strings, and parse JSON strings back into JavaScript objects to manipulate them.

Ideate:

  • HMW Question: How might we help students recognize how dot notation works on JavaScript objects versus JSON strings?

  • HMW Question: How might we make JSON useful and understandable by connecting it to something familiar, such as a game character profile?

  • Activity: Students create and personalize a game-character object, access properties using dot notation, identify valid and invalid JSON, convert JavaScript objects into JSON strings, parse JSON strings back into JavaScript objects, and build a personalized character sheet using nested objects and arrays.

Prototype & Test: In our trial run, students understood basic JS objects but got confused when trying to use dot notation directly on unparsed JSON text strings. We added an explicit example comparing string properties vs. parsed object properties to resolve this confusion.

3. CS111 Requirements

This lesson covers introductory data structure and data format concepts from MiraCosta College CS 111. The lesson ensures students understand how key-value pairs and standardized serialization text formats manage data.

The CS 111 concepts covered in this lesson include:

  • Understanding Object Literals: Students learn how JavaScript objects store key-value data in key-value structures.
  • Mastering Dot & Bracket Notation: Students practice accessing and mutating object properties dynamically using dot notation (obj.key) and bracket notation (obj['key']).
  • Distinguishing In-Memory Objects vs. Standardized JSON Text: Students learn why JSON requires strict formatting (e.g., double-quoted keys, no trailing commas) for cross-platform data exchange.
  • Serializing Objects with JSON.stringify(): Students convert complex in-memory JavaScript structures into formatted JSON text strings.
  • Parsing Text with JSON.parse(): Students parse structured JSON text back into actionable JavaScript objects to access properties via dot notation.
  • Working with Nested Structures: Students practice traversing multi-level nested objects and arrays.

4. Lesson Plan

Learning Objective: By the end of this lesson, you will be able to create a JavaScript object, manipulate properties with dot notation, serialize objects into JSON strings using JSON.stringify(), and parse JSON strings back into objects using JSON.parse().

*Success Criteria:f* You can create a JavaScript object, access properties using dot notation, explain why dot notation cannot be used directly on raw JSON text, use JSON.stringify(), use JSON.parse(), and create nested objects containing arrays.

Tech Talk: Objects, Dot Notation, and JSON

A JavaScript object stores related information using key-value pairs.

To read or update a property inside an object, JavaScript uses dot notation: object.key.

  • Example: character.name accesses the name property.
  • Important: You can ONLY use dot notation on live JavaScript objects in memory. You CANNOT use dot notation on a raw JSON string until you convert it back into an object with JSON.parse().

JSON stands for JavaScript Object Notation. Even though JavaScript is in the name, JSON is not JavaScript code—it is a text string format used to store and transfer data across systems.

5. Code Examples

A. Character Profile & Dot Notation

Dot notation allows you to retrieve values (Ex: character.name) or reassign existing values (Ex: character.level = 11). Try changing the character attributes and see the updated outputs!

Code Runner Challenge

Personalize your character profile and use dot notation.

View IPYNB Source 
%%js
// CODE_RUNNER: Personalize your character profile and use dot notation.
const character = {
    name: "Steve",
    level: 10,
    health: 80,
    class: "Warrior"
};

// Reading properties via dot notation
console.log("Name:", character.name);
console.log("Level:", character.level);
console.log("Health:", character.health);
console.log("Class:", character.class);

// Updating properties via dot notation
character.level = 11;
character.health = 100;
console.log("Updated Level:", character.level);
console.log("New Health Property:", character.health);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

B. Dot Notation on Raw JSON Strings vs. Parsed Objects

A common mistake beginners make is trying to use dot notation on a raw JSON string. Because JSON text is stored as a string, using dot notation directly on the string returns undefined. A JSON string must be parsed with JSON.parse before dot notation can be used. Try running the code runner and seeing the outputs of each function.

Code Runner Challenge

Demonstrating dot notation on JSON strings vs parsed objects.

View IPYNB Source 
%%js
// CODE_RUNNER: Demonstrating dot notation on JSON strings vs parsed objects.
const jsonData = `{
    "name": "Steve",
    "level": 10,
    "class": "Warrior",
    "online": true
}`;

// 1. Attempting dot notation directly on a JSON text string (Returns undefined)
console.log("JSON string .name:", jsonData.name);

// 2. Parsing the JSON string into a JS Object first
const parsedData = JSON.parse(jsonData);

// 3. Using dot notation on the parsed object (Works!)
console.log("Parsed Object .name:", parsedData.name);
console.log("Parsed Object .level:", parsedData.level);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

C. Converting Objects with JSON.stringify() and JSON.parse()

JSON.stringify() converts a JavaScript object into a JSON string. JSON.parse() converts that JSON string back into a JavaScript object so dot notation can be used again.

Code Runner Challenge

Convert an object to JSON and back.

View IPYNB Source 
%%js
// CODE_RUNNER: Convert an object to JSON and back.
const user = {
    username: "PLAYER_1",
    password: 12345,
    isOnline: false
};

const jsonString = JSON.stringify(user);
console.log("JSON string:", jsonString);

const parsedUser = JSON.parse(jsonString);
console.log("JavaScript object (accessed via dot notation):");
console.log("Username:", parsedUser.username);
console.log("isOnline:", parsedUser.isOnline);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

D. Chaining Dot Notation with Nested Objects and Exploring Arrays

When dealing with nested objects, you can chain dot notation (e.g., character.character_info.level) to access nested values. An array is a special type of object that stores an ordered collection of multiple values under a single variable. An array is zero-indexed, where the first value is 0, the second is at 1, and so on. Look to skills as as an example of an array.

Code Runner Challenge

Create and access a nested character object.

View IPYNB Source 
%%js
// CODE_RUNNER: Create and access a nested character object.
const character = {
    name: "Steve",
    username: "PLAYER_1",
    character_info: {
        level: 10,
        class: "Warrior",
        health: 100
    },
    skills: ["Attack", "Defend", "Heal"]
};

// Chained dot notation for nested objects
console.log("Name:", character.name);
console.log("Level (chained dot notation):", character.character_info.level);
console.log("Class (chained dot notation):", character.character_info.class);
// Accessing array elements within the object
console.log("First Skill (dot + bracket notation):", character.skills[0]);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

6. Hacks & Practice Tasks

Prepare for your IPYNB submission

Submit your work by creating a notebook in VS Code, saving it in your portfolio repository as an .ipynb file, committing it to GitHub, and submitting the link through the designated submission form.

Popcorn Hack: Character Object & Dot Notation

Create your own JavaScript object representing a game character. Your object must contain a name, level, class, health, and at least three skills in an array. Access and log each property using dot notation.

Remember, if you forget how to do anything, you can go back to the previous examples to refresh!

Code Runner Challenge

Popcorn Hack - Create your own character object and use dot notation.

View IPYNB Source 
%%js
// CODE_RUNNER: Popcorn Hack - Create your own character object and use dot notation.
const character = {

};

// Accessing properties using dot notation
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Homework Hack: JSON Character Sheet & Dot Notation

Create a character sheet using a JavaScript object containing name, username, a nested character_info object (level, class, health), and skills array.

Then:

  1. Access and display the properties using chained dot notation.
  2. Convert the object into a JSON string using JSON.stringify().
  3. Print the JSON string and attempt dot notation directly on the string.
  4. Parse the JSON string back into an object using JSON.parse().
  5. Print the parsed object and access properties using dot notation.

Remember, if you forget how to do anything, you can go back to the previous examples to refresh!

Code Runner Challenge

Homework - Create a character sheet, convert to JSON, and test dot notation.

View IPYNB Source 
%%js
// CODE_RUNNER: Homework - Create a character sheet, convert to JSON, and test dot notation.
const character_sheet = {

};

// 1. Access properties via dot notation


// 2. Convert to JSON string


// 3. Parse back into JS Object
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Grading Plan

This assignment is worth 1 point total. Earn 0.2 points for each completed requirement:

  • 0.25 points: Popcorn hack creates character object and uses dot notation successfully.
  • 0.25 points: Homework object created with nested data and accessed via chained dot notation.
  • 0.25 points: Object correctly converted to JSON string with JSON.stringify().
  • 0.25 points: JSON string parsed back with JSON.parse() and properties accessed via dot notation.

7. Lesson Revisions

Revision Made: We added more code examples and descriptions for them. We moved the Reference Guide earlier in the lesson, before the LxD Cycle and Lesson Plan. We also added sections explaining dot notation.

8. Feedback Evidence

9. References

Mozilla. Working with JSON. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/JSON

W3Schools. JavaScript JSON Reference. https://www.w3schools.com/jsref/jsref_obj_json.asp

Submit Assignment

Self-Assessment

Rate your work on this assignment, then add a short reflection. All 5 fields are required before you can submit.

Technical Excellence

Rate the technical quality of your work on this assignment — your use of tools, problem-solving, and technical growth.

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend
Communication

Rate how clearly you communicated your work and process — explanations, documentation, and collaboration or help-seeking.

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model
Work Habits

Rate your work habits on this assignment — time management, persistence, responsibility, and follow-through.

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model
AI Orchestration

Rate how effectively you used AI tools to support your work — prompting, verifying, extending, or accelerating your development process.

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend

This submits the code from this lesson's code runner(s) below as a Gist for automatic review. Save each runner with its 💾 button before submitting.

    Need to update a submission later? Open the submissions dashboard.