Object Methods: keys, values, entries, assign in JavaScript
Introduction
JavaScript provides powerful static methods on the Object constructor for working with object properties and values. These methods are essential for iterating over objects, transforming data, and manipulating object properties. In this article, you’ll learn all major Object methods with practical examples and use cases.
Object.keys()
Basic Usage
// Get array of object keys
const user = {
name: 'Alice',
age: 30,
email: '[email protected]'
};
const keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'email']
// Iterate over keys
Object.keys(user).forEach(key => {
console.log(`${key}: ${user[key]}`);
});
// Output:
// name: Alice
// age: 30
// email: [email protected]
Practical Examples
// Example 1: Count object properties
function countProperties(obj) {
return Object.keys(obj).length;
}
console.log(countProperties({ a: 1, b: 2, c: 3 })); // 3
// Example 2: Check if object is empty
function isEmpty(obj) {
return Object.keys(obj).length === 0;
}
console.log(isEmpty({})); // true
console.log(isEmpty({ name: 'John' })); // false
// Example 3: Get specific keys
function getKeys(obj, filter) {
return Object.keys(obj).filter(key => filter(key));
}
const data = { firstName: 'John', lastName: 'Doe', age: 30 };
console.log(getKeys(data, key => key.includes('Name')));
// ['firstName', 'lastName']
Object.values()
Basic Usage
// Get array of object values
const user = {
name: 'Alice',
age: 30,
email: '[email protected]'
};
const values = Object.values(user);
console.log(values); // ['Alice', 30, '[email protected]']
// Iterate over values
Object.values(user).forEach(value => {
console.log(value);
});
Practical Examples
// Example 1: Sum numeric values
function sumValues(obj) {
return Object.values(obj).reduce((sum, val) => {
return typeof val === 'number' ? sum + val : sum;
}, 0);
}
console.log(sumValues({ a: 10, b: 20, c: 'text' })); // 30
// Example 2: Find maximum value
function getMaxValue(obj) {
const values = Object.values(obj).filter(v => typeof v === 'number');
return Math.max(...values);
}
console.log(getMaxValue({ x: 5, y: 10, z: 3 })); // 10
// Example 3: Check if value exists
function hasValue(obj, value) {
return Object.values(obj).includes(value);
}
console.log(hasValue({ name: 'John', age: 30 }, 'John')); // true
Object.entries()
Basic Usage
// Get array of [key, value] pairs
const user = {
name: 'Alice',
age: 30,
email: '[email protected]'
};
const entries = Object.entries(user);
console.log(entries);
// [['name', 'Alice'], ['age', 30], ['email', '[email protected]']]
// Iterate over entries
Object.entries(user).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
Practical Examples
// Example 1: Convert object to query string
function toQueryString(obj) {
return Object.entries(obj)
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
}
console.log(toQueryString({ name: 'John', age: 30 }));
// 'name=John&age=30'
// Example 2: Convert object to FormData
function toFormData(obj) {
const formData = new FormData();
Object.entries(obj).forEach(([key, value]) => {
formData.append(key, value);
});
return formData;
}
// Example 3: Filter object by values
function filterByValue(obj, predicate) {
return Object.entries(obj)
.filter(([key, value]) => predicate(value))
.reduce((result, [key, value]) => {
result[key] = value;
return result;
}, {});
}
const data = { a: 1, b: 2, c: 3, d: 4 };
console.log(filterByValue(data, v => v > 2)); // { c: 3, d: 4 }
Object.assign()
Basic Usage
// Copy properties from source to target
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 3, c: 4 }
console.log(target); // { a: 1, b: 3, c: 4 } (target is modified)
// Merge multiple objects
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };
const merged = Object.assign({}, obj1, obj2, obj3);
console.log(merged); // { a: 1, b: 2, c: 3 }
Practical Examples
// Example 1: Clone object
function cloneObject(obj) {
return Object.assign({}, obj);
}
const original = { name: 'John', age: 30 };
const clone = cloneObject(original);
clone.name = 'Jane';
console.log(original.name); // 'John' (unchanged)
console.log(clone.name); // 'Jane'
// Example 2: Merge with defaults
function withDefaults(obj, defaults) {
return Object.assign({}, defaults, obj);
}
const defaults = { theme: 'light', language: 'en', fontSize: 14 };
const userSettings = { theme: 'dark' };
console.log(withDefaults(userSettings, defaults));
// { theme: 'dark', language: 'en', fontSize: 14 }
// Example 3: Update object immutably
function updateObject(obj, updates) {
return Object.assign({}, obj, updates);
}
const user = { name: 'Alice', age: 30 };
const updated = updateObject(user, { age: 31 });
console.log(user); // { name: 'Alice', age: 30 }
console.log(updated); // { name: 'Alice', age: 31 }
Object.create()
Basic Usage
// Create object with specific prototype
const proto = {
greet() {
return `Hello, ${this.name}`;
}
};
const person = Object.create(proto);
person.name = 'Alice';
console.log(person.greet()); // 'Hello, Alice'
console.log(person.hasOwnProperty('greet')); // false (inherited)
console.log(person.hasOwnProperty('name')); // true
Practical Examples
// Example 1: Create object with properties
const proto = { type: 'user' };
const user = Object.create(proto, {
name: { value: 'Alice', writable: true },
age: { value: 30, writable: true }
});
console.log(user.name); // 'Alice'
console.log(user.type); // 'user'
// Example 2: Inheritance pattern
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
return `${this.name} makes a sound`;
};
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
const dog = new Dog('Rex', 'Labrador');
console.log(dog.speak()); // 'Rex makes a sound'
Object.defineProperty() and Object.defineProperties()
Basic Usage
// Define single property with descriptor
const obj = {};
Object.defineProperty(obj, 'name', {
value: 'Alice',
writable: true,
enumerable: true,
configurable: true
});
console.log(obj.name); // 'Alice'
// Define multiple properties
Object.defineProperties(obj, {
age: {
value: 30,
writable: true,
enumerable: true
},
email: {
value: '[email protected]',
writable: false,
enumerable: true
}
});
console.log(obj.age); // 30
obj.email = '[email protected]'; // Fails silently (not writable)
Practical Examples
// Example 1: Create read-only property
const config = {};
Object.defineProperty(config, 'API_KEY', {
value: 'secret-key-123',
writable: false,
enumerable: false,
configurable: false
});
console.log(config.API_KEY); // 'secret-key-123'
config.API_KEY = 'new-key'; // Fails silently
// Example 2: Create computed property
const user = { firstName: 'John', lastName: 'Doe' };
Object.defineProperty(user, 'fullName', {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(value) {
[this.firstName, this.lastName] = value.split(' ');
},
enumerable: true
});
console.log(user.fullName); // 'John Doe'
user.fullName = 'Jane Smith';
console.log(user.firstName); // 'Jane'
Object.freeze(), Object.seal(), Object.preventExtensions()
freeze()
// Prevent all modifications
const obj = { name: 'Alice', age: 30 };
Object.freeze(obj);
obj.name = 'Bob'; // Fails silently
obj.email = '[email protected]'; // Fails silently
delete obj.age; // Fails silently
console.log(obj); // { name: 'Alice', age: 30 }
console.log(Object.isFrozen(obj)); // true
seal()
// Prevent adding/removing properties, but allow modification
const obj = { name: 'Alice', age: 30 };
Object.seal(obj);
obj.name = 'Bob'; // OK
obj.email = '[email protected]'; // Fails silently
delete obj.age; // Fails silently
console.log(obj); // { name: 'Bob', age: 30 }
console.log(Object.isSealed(obj)); // true
preventExtensions()
// Prevent adding new properties, but allow modification/deletion
const obj = { name: 'Alice', age: 30 };
Object.preventExtensions(obj);
obj.name = 'Bob'; // OK
delete obj.age; // OK
obj.email = '[email protected]'; // Fails silently
console.log(obj); // { name: 'Bob' }
console.log(Object.isExtensible(obj)); // false
Object.getOwnPropertyNames() and Object.getOwnPropertyDescriptor()
Basic Usage
// Get all property names (including non-enumerable)
const obj = {};
Object.defineProperty(obj, 'hidden', { value: 'secret', enumerable: false });
obj.visible = 'public';
console.log(Object.keys(obj)); // ['visible']
console.log(Object.getOwnPropertyNames(obj)); // ['hidden', 'visible']
// Get property descriptor
const descriptor = Object.getOwnPropertyDescriptor(obj, 'visible');
console.log(descriptor);
// { value: 'public', writable: true, enumerable: true, configurable: true }
Real-World Examples
Example 1: API Response Transformer
// Transform API response
function transformResponse(response) {
return Object.entries(response)
.reduce((result, [key, value]) => {
const newKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
result[newKey] = value;
return result;
}, {});
}
const apiResponse = {
user_name: 'John',
user_email: '[email protected]',
created_at: '2025-01-01'
};
console.log(transformResponse(apiResponse));
// { userName: 'John', userEmail: '[email protected]', createdAt: '2025-01-01' }
Example 2: Configuration Manager
// Configuration manager with defaults
class Config {
constructor(defaults) {
this.defaults = defaults;
this.overrides = {};
}
set(key, value) {
this.overrides[key] = value;
}
get(key) {
return this.overrides[key] !== undefined
? this.overrides[key]
: this.defaults[key];
}
getAll() {
return Object.assign({}, this.defaults, this.overrides);
}
}
const config = new Config({
theme: 'light',
language: 'en',
fontSize: 14
});
config.set('theme', 'dark');
console.log(config.getAll());
// { theme: 'dark', language: 'en', fontSize: 14 }
Example 3: Object Validator
// Validate object against schema
function validate(obj, schema) {
const errors = {};
Object.entries(schema).forEach(([key, validator]) => {
const value = obj[key];
const error = validator(value);
if (error) {
errors[key] = error;
}
});
return Object.keys(errors).length === 0 ? null : errors;
}
const schema = {
name: (value) => !value ? 'Name is required' : null,
email: (value) => !value?.includes('@') ? 'Invalid email' : null,
age: (value) => value < 18 ? 'Must be 18+' : null
};
const user = { name: 'John', email: 'invalid', age: 16 };
console.log(validate(user, schema));
// { email: 'Invalid email', age: 'Must be 18+' }
Example 4: Deep Merge
// Deep merge objects
function deepMerge(target, source) {
Object.entries(source).forEach(([key, value]) => {
if (value && typeof value === 'object' && !Array.isArray(value)) {
target[key] = target[key] || {};
deepMerge(target[key], value);
} else {
target[key] = value;
}
});
return target;
}
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { b: { d: 3 }, e: 4 };
console.log(deepMerge(obj1, obj2));
// { a: 1, b: { c: 2, d: 3 }, e: 4 }
Common Mistakes to Avoid
Mistake 1: Modifying Original with Object.assign()
// ❌ Wrong - Modifies original
const original = { a: 1, b: 2 };
const modified = Object.assign(original, { b: 3 });
console.log(original); // { a: 1, b: 3 } (changed!)
// ✅ Correct - Create new object
const original = { a: 1, b: 2 };
const modified = Object.assign({}, original, { b: 3 });
console.log(original); // { a: 1, b: 2 } (unchanged)
Mistake 2: Shallow Copy Issues
// ❌ Wrong - Shallow copy doesn't copy nested objects
const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);
copy.b.c = 3;
console.log(original.b.c); // 3 (changed!)
// ✅ Correct - Deep copy for nested objects
const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
copy.b.c = 3;
console.log(original.b.c); // 2 (unchanged)
Mistake 3: Forgetting Object.keys() Returns Array
// ❌ Wrong - Trying to use as object
const keys = Object.keys({ a: 1, b: 2 });
console.log(keys.a); // undefined
// ✅ Correct - Use as array
const keys = Object.keys({ a: 1, b: 2 });
console.log(keys[0]); // 'a'
console.log(keys.length); // 2
Summary
Object methods are essential for object manipulation:
- Object.keys() - Get property names
- Object.values() - Get property values
- Object.entries() - Get key-value pairs
- Object.assign() - Copy/merge objects
- Object.create() - Create objects with prototype
- Object.freeze() - Make object immutable
- Object.seal() - Prevent property changes
- Use for data transformation and validation
- Remember shallow vs deep copy
- Combine methods for complex operations
Related Resources
- MDN: Object Methods
- MDN: Object.assign()
- MDN: Object.entries()
- MDN: Object.freeze()
- MDN: Property Descriptors
Next Steps
Continue your learning journey:
- String Methods: Complete Reference
- Array Methods: Complete Reference
- Math Object and Operations
- Date and Time Handling in JavaScript
Comments