[JavaScript] Choosing the Right Object Static Methods to Extract Properties as Arrays

2026年1月29日

Overview

When processing data within a JavaScript object or extracting specific values, the static methods of the Object class are extremely effective. By using these methods, you can extract necessary information from complex data structures into an array format. This allows you to process data efficiently by combining these results with array methods like forEach or map. This article explains three major methods standardized in ES2017 that are essential for modern web development.

Specifications (Input/Output)

Method	Purpose	Return Value
Object.keys()	Extracts enumerable property names.	An array of property names (keys).
Object.values()	Extracts the values of the properties.	An array of property values.
Object.entries()	Extracts pairs of keys and values.	A 2D array where each element is `[key, value]`.

Basic Usage

By passing an object as an argument to these methods, you can retrieve the information stored within that object as an array. Once the data is in an array format, you can easily perform loop operations to manipulate every element inside the object sequentially.

Full Code Implementation (HTML / JAVASCRIPT)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Infrastructure Status Monitor</title>
</head>
<body>
    <div id="status-panel">
        <h2>Infrastructure Monitoring Log</h2>
        <div id="output-area"></div>
        <hr>
        <button id="btn-keys">Extract Keys Only</button>
        <button id="btn-values">Extract Values Only</button>
        <button id="btn-entries">Extract Pairs</button>
    </div>
    <script type="module" src="main.js"></script>
</body>
</html>

JavaScript

/**
 * Object managing server status information
 * Scenario: Infrastructure monitoring log analysis
 */
const serverStatus = {
  serverId: "SVR-10024",
  status: "active",
  loadAverage: 0.45,
  operator: "mori"
};

const outputArea = document.getElementById('output-area');

/**
 * Renders the extraction results to the screen
 * @param {string} label - Name of the process
 * @param {Array} data - Extracted array data
 */
const displayResult = (label, data) => {
  const resultString = JSON.stringify(data);
  outputArea.innerHTML = `<strong>${label}:</strong><br><code>${resultString}</code>`;
  console.log(`${label}:`, data);
};

// Extracting Keys (Property Names)
document.getElementById('btn-keys').addEventListener('click', () => {
  const keys = Object.keys(serverStatus);
  displayResult('Object.keys', keys);
});

// Extracting Property Values
document.getElementById('btn-values').addEventListener('click', () => {
  const values = Object.values(serverStatus);
  displayResult('Object.values', values);
});

// Extracting Key-Value Pairs
document.getElementById('btn-entries').addEventListener('click', () => {
  const entries = Object.entries(serverStatus);
  displayResult('Object.entries', entries);
});

Customization Points

You can customize the display format on the screen by changing JSON.stringify inside the displayResult function to something like join(', '). Furthermore, if you add new properties to the monitoring object (serverStatus), the script will dynamically extract all elements without requiring any manual updates to the extraction logic.

Important Considerations

The order of elements in the resulting array generally follows the order of definition, except for numeric keys. However, since the specification does not strictly guarantee this order, you should perform a manual sort on the array if a specific sequence is required for your logic. It is also important to note that these methods only target “own” properties of the object; inherited properties from the prototype chain are not extracted. Finally, ensure that the variable passed is a valid object, as passing null or undefined will result in a TypeError.

Advanced Applications

Combining Object.entries() with destructuring assignment makes the code within loops much more concise when you need to handle both keys and values simultaneously.

/**
 * Formats log data and outputs it to the console
 * @param {Object} dataObj 
 */
const printLog = (dataObj) => {
  // Loop utilizing array destructuring
  Object.entries(dataObj).forEach(([key, value]) => {
    console.log(`Attribute: ${key.toUpperCase()} / Config Value: ${value}`);
  });
};

printLog(serverStatus);

Summary

Using the static methods keys, values, and entries appropriately greatly improves the flexibility of data manipulation in JavaScript. It is a standard practice to choose keys when you only need property names, values when you want to aggregate the data content, and entries when you need to process both keys and values as a set.

Since these methods are widely used in everything from modern frontend development to Node.js backend processing, mastering the pattern of converting objects to arrays is essential. Once converted, all powerful standard array methods become available, which helps in writing clean code and avoiding redundant loop syntax.

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