Objects
Besides primitive data types like number and string, there is another important data type in JavaScript called object. Objects are collections of key-value pairs. As such, they can be used as what is often referred to as maps or dictionaries in other languages.
In other languages, all values in a map often need to have the same data type. In JavaScript, only the type of the key is restricted: it has to be a string. The values inside one object can have different types. They can be primitive types like numbers but also arrays, other objects or even functions. This makes objects very versatile so that they are also key entities for object-oriented programming (OOP) in JavaScript.
Creating an Object
You create an object using curly brackets. You can also directly include some entries. For that, state the key first, followed by a colon and the value.
const emptyObject = {};
const obj = {
favoriteNumber: 42,
greeting: 'Hello World',
useGreeting: true,
address: {
street: 'Trincomalee Highway',
city: 'Batticaloa',
},
fruits: ['melon', 'papaya'],
addNumbers: function (a, b) {
return a + b;
},
};
The trailing comma after the last entry is optional in JavaScript.
If the key follows the naming rules for a JavaScript identifier, you can omit the quotation marks. For keys with special characters in the name, you need to use the usual string notation.
const obj = {
'1keyStartsWithNumber': '...',
'key/with/slashes': '...',
'key-with-dashes': '...',
'key with spaces': '...',
'#&()[]{}èä樹keyWithSpecialChars': '...',
};
Retrieving a Value
There are two ways to retrieve the value for a given key, dot notation and bracket notation.
const obj = { greeting: 'hello world' };
obj.greeting;
// => hello world
obj['greeting'];
// => hello world
// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world
Using the dot notation as a shorthand has the same restriction as omitting the quotation marks. It only works if the key follows the identifier naming rules.
Adding or Changing a Value
You can add or change a value using the assignment operator =. Again, there are dot and bracket notations available.
const obj = { greeting: 'hello world' };
obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';
obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';
const key = 'new key 3';
obj[key] = 'new value 3';
Deleting an Entry
You can delete a key-value pair from an object using the delete keyword.
const obj = {
key1: 'value1',
key2: 'value2',
};
delete obj.key1;
delete obj['key2'];
Checking Whether a Key Exists
You can check whether a certain key exists in an object with the hasOwnProperty method.
const obj = { greeting: 'hello world' };
obj.hasOwnProperty('greeting');
// => true
obj.hasOwnProperty('age');
// => false
Looping Through an Object
There is a special for...in loop to iterate over all keys of an object.
const obj = {
name: 'Ali',
age: 65,
};
for (let key in obj) {
console.log(key, obj[key]);
}
// name Ali
// age 65
To avoid subtle errors you should always assume the for...in loop visits the keys in an arbitrary order. Also, be aware that for...in includes inherited keys in its iteration.
Resources:
- https://exercism.org/tracks/javascript/concepts/objects
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
- https://javascript.info/object
Children
- Add or Change a Value
- Check Key Exists
- Definition
- Delete Entry
- Destructuring
- Key Iteration
- Prototypes
- Retrieval
Backlinks