Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested Objects in JavaScript</title>
</head>
<body>
 
<h1>JavaScript Nested Objects</h1>
 
<script>
    const student = {
        name: "John Doe",
        age: 21,
        address: {
            street: "123 Main St",
            city: "Springfield",
            zip: "12345"
        },
        courses: {
            math: {
                teacher: "Mrs. Smith",
                grade: "A"
            },
            science: {
                teacher: "Mr. Brown",
                grade: "B"
            }
        },
        scores: {
            math: 95,
            science: 88,
            english: 92
        }
    };
 
   
    console.log("Student's Name:", student.name);
    console.log("City:", student.address.city);
    console.log("Math Teacher:", student.courses.math.teacher);
 
 
    student.address.zip = "54321";
    console.log("Updated Zip Code:", student.address.zip);
 
    
    student.courses.history = {
        teacher: "Ms. Green",
        grade: "A-"
    };
    console.log("Added History Course:", student.courses.history);
 
 
    delete student.scores.english;
    console.log("Scores after deletion:", student.scores);
</script>
 
</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter