JavaScript Object Methods — What is Logged?

Why This Question Matters

If you're just starting with JavaScript, objects are everywhere. They're the bread and butter of the language. But there's a common hurdle for juniors: understanding how to actually get data *out* of an object when you don't know exactly what the keys are, or when you need to transform that data into a list.

The challenge here isn't about complex algorithms; it's about knowing the built-in Object methods. Many beginners try to loop through objects using a for loop (which doesn't work on objects) or get confused between the keys and the values. Knowing how to pivot between an object and an array is a fundamental skill you'll use every single day in a professional codebase.

Understanding the Code

Let's look at the snippet:

const obj = { x: 1, y: 2 }
const keys = Object.keys(obj)
const values = Object.values(obj)
console.log(keys, values)

First, we define a simple object obj. It has two properties: x and y.

Then we hit Object.keys(obj). This method does exactly what it says: it grabs all the property names (the keys) from the object and shoves them into an array. In our case, the keys are "x" and "y". So, keys becomes ['x', 'y'].

Next, we have Object.values(obj). Same logic, different target. This method ignores the keys and just grabs the data assigned to them. Here, that's 1 and 2. So, values becomes [1, 2].

Finally, console.log(keys, values) prints both arrays side-by-side.

Finding the Correct Answer

The correct answer is Option A: ['x', 'y'] [1, 2].

Why? Because Object.keys() and Object.values() always return arrays.

If you saw an option that looked like {x, y} or x, y (without brackets), you can toss it out immediately. Those aren't arrays. If you saw an option where the numbers were in the first array and the letters in the second, they simply swapped the methods.

The logic is straightforward:
- Keys $\rightarrow$ The labels (x, y)
- Values $\rightarrow$ The data (1, 2)

Common Mistakes Developers Make

Even though this looks simple, I see developers trip up on a few things when using these methods in the wild.

1. Assuming Order
For a long time, JavaScript didn't guarantee the order of keys in an object. While modern engines (like V8 in Chrome and Node.js) generally preserve the insertion order for string keys, you shouldn't rely on this for critical logic. If the order of your data matters, use an Array or a Map.

2. Confusing Object.keys with for...in
A for...in loop iterates over all enumerable properties, including those inherited from the object's prototype chain. Object.keys() only gives you the object's *own* properties. This is a huge distinction that can lead to nasty bugs if you're working with class inheritance.

3. Forgetting the Return Type
Juniors sometimes try to access a value directly from Object.keys(obj). Remember: these methods return an array. If you want a specific value, you usually use the key you got from Object.keys() to index back into the original object.

Real-World Usage

You won't just be logging keys and values to the console in a real job. You'll use these methods to transform data.

A classic example is when you receive a JSON response from an API that is structured as an object, but your UI component (like a React list or a Vue table) requires an array to map over.

const userScores = {
  "Alice": 95,
  "Bob": 82,
  "Charlie": 88
};
// I need to loop through these to render a list

const names = Object.keys(userScores);
names.forEach(name => {

  console.log(${name} scored ${userScores[name]});

});

Another common pattern is using Object.values() to perform calculations. If you have an object representing a shopping cart where keys are product IDs and values are prices, you can quickly sum them up:

const cart = { item1: 10.99, item2: 5.50, item3: 20.00 };
const total = Object.values(cart).reduce((acc, price) => acc + price, 0);

Key Takeaways

- Object.keys(obj) returns an array of the object's property names.
- Object.values(obj) returns an array of the object's property values.
- Both methods return arrays, which allows you to use powerful array methods like .map(), .filter(), and .reduce().
- Use these when you need to transform object data into a format that is easier to iterate or manipulate.
- Keep in mind that these only return the object's "own" properties, not inherited ones.