[JavaScript] The Building Blocks of Data Management: Object Definition and Property Manipulation

2026年1月28日

Overview

In programming, it is inefficient to manage related data like names, IDs, and statuses using separate, disconnected variables. In JavaScript, an Object allows you to group these pieces of information into a single package. Beyond just storing data, objects can also contain logic called Methods, making them the perfect structure for defining the components of your application. This article explains how to structure and manipulate objects using the configuration data of a web app as an example.

Specifications

Object Literals `{ ... }`

An object is defined by placing a comma-separated list of key: value pairs inside curly braces {}.

Component	Example	Description
Property	`theme: 'dark'`	Static data. Can store strings, numbers, booleans, arrays, or even other objects.
Method	`save: () => { ... }`	A function or action associated with the object.

Input: A group of related data to be defined.
Output: A structured object.
Access Methods: Use Dot Notation (object.key) or Bracket Notation (object['key']).

Basic Usage

1. Basic Definition and Access

You can group related information into a single variable for easier management.

// Application configuration definition
const appConfig = {
    version: 1.5,
    appName: 'MyEditor',
    isProMode: true
};

// Accessing data
console.log(appConfig.appName); // "MyEditor"

2. Nested Structures and Methods

Objects can contain other objects or even functions to represent complex data and actions.

const gameCharacter = {
    name: 'Hero',
    stats: { // Nested object
        hp: 100,
        mp: 50
    },
    items: ['Sword', 'Potion'], // Array property
    attack: () => { // Method
        console.log('Attacked!');
    }
};

console.log(gameCharacter.stats.hp); // 100
gameCharacter.attack(); // "Attacked!"

Full Code (HTML / JavaScript)

The following example demonstrates a “System Configuration” dashboard. It manages environment settings as an object and displays the status on the screen, including nested data and method execution.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Configuration</title>
    <style>
        .config-panel {
            font-family: 'Consolas', 'Monaco', monospace;
            max-width: 450px;
            background-color: #282c34;
            color: #abb2bf;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        h3 {
            margin-top: 0;
            color: #61afef;
            border-bottom: 1px solid #3e4451;
            padding-bottom: 10px;
        }
        .config-group {
            margin-bottom: 15px;
        }
        .label {
            color: #e06c75;
            margin-right: 10px;
        }
        .value {
            color: #98c379;
        }
        .nested {
            margin-left: 20px;
            border-left: 2px solid #3e4451;
            padding-left: 10px;
        }
        .btn-action {
            background-color: #61afef;
            color: #282c34;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            margin-top: 10px;
        }
        .btn-action:hover {
            background-color: #4aa3ee;
        }
        #log-area {
            margin-top: 15px;
            font-size: 0.9em;
            color: #d19a66;
        }
    </style>
</head>
<body>

<div class="config-panel">
    <h3>System Configuration</h3>
    
    <div class="config-group">
        <span class="label">App Name:</span>
        <span id="conf-name" class="value">--</span>
    </div>
    
    <div class="config-group">
        <span class="label">Display Settings:</span>
        <div class="nested">
            <div>Theme: <span id="conf-theme" class="value">--</span></div>
            <div>Resolution: <span id="conf-res" class="value">--</span></div>
        </div>
    </div>

    <div class="config-group">
        <span class="label">Enabled Modules:</span>
        <span id="conf-modules" class="value">--</span>
    </div>

    <button id="btn-save" class="btn-action">Save Settings (Execute Method)</button>
    <div id="log-area"></div>
</div>

<script src="config_manager.js"></script>
</body>
</html>

JavaScript

/**
 * System Configuration Management Script
 * Defining and manipulating complex object structures
 */

// 1. Definition of configuration data
const systemConfig = {
    // Basic properties
    appName: 'DevDashboard Pro',
    version: 2.0,
    
    // Nested object (Display settings)
    display: {
        theme: 'Dark Mode',
        resolution: '1920x1080',
        zoomLevel: 100
    },

    // Property containing an array
    modules: ['Analytics', 'Debugger', 'CloudSync'],

    // Method definition (Simulating a save process)
    saveSettings: function() {
        const timestamp = new Date().toLocaleTimeString();
        return `Settings saved successfully at ${timestamp}.`;
    }
};

// DOM elements
const elName = document.getElementById('conf-name');
const elTheme = document.getElementById('conf-theme');
const elRes = document.getElementById('conf-res');
const elModules = document.getElementById('conf-modules');
const btnSave = document.getElementById('btn-save');
const logArea = document.getElementById('log-area');

/**
 * Function to render configuration to the UI
 */
const renderConfig = () => {
    // Accessing the first level
    elName.textContent = systemConfig.appName;

    // Accessing the second level (nested)
    elTheme.textContent = systemConfig.display.theme;
    elRes.textContent = systemConfig.display.resolution;

    // Joining array elements
    elModules.textContent = systemConfig.modules.join(', ');
};

/**
 * Event handler for the save button
 */
const onSaveClick = () => {
    // Execute the method inside the object
    const message = systemConfig.saveSettings();
    
    // Display the result
    logArea.textContent = message;
    console.log('Saved:', systemConfig);
};

// Initial render
renderConfig();

// Event listener
btnSave.addEventListener('click', onSaveClick);

Custom Points

Adding/Changing Properties: You can add new properties or overwrite existing ones at any time using systemConfig.newProp = 'Value';.
Shorthand Notation: In ES6, if a variable name and a property name are the same, you can use shorthand like { name, age } instead of { name: name, age: age }.

Cautions

Const Objects are Mutable: Declaring an object with const only prevents the reassignment of the variable itself. You can still modify internal properties using obj.key = 'newValue'. To make an object completely immutable, use Object.freeze().
Accessing Non-existent Properties: Accessing a missing key like systemConfig.unknownKey will return undefined rather than throwing an error. However, accessing a property of an undefined value (e.g., systemConfig.unknown.key) will cause an error. Consider using Optional Chaining (?.) for safety.

Advanced Usage

Freezing Objects (Immutability)

For critical objects like configuration values that should not be changed during app execution, protect them with Object.freeze().

const serverSettings = Object.freeze({
    host: 'api.example.com',
    port: 443
});

// This change will be ignored (or throw an error in strict mode)
serverSettings.port = 8080; 

console.log(serverSettings.port); // Remains 443

Summary

The Object {} is a central character in JavaScript data structures. It allows you to package related data and functions, organize them into hierarchies, and access them intuitively using dot notation. By moving away from lists of individual variables and managing data in meaningful units, you can significantly improve the readability and maintainability of your code.

よかったらシェアしてね！