Javascript Objects Cheatsheet
📣 Sponsor
With arrays, there are usually a set number of specific things you want to achieve. Below is a list of pretty much any action you would want to perform on objects, and how to do it in Javascript. If you have any more, please tell me via twitter and I will add them (along with a link to your social media of choice).
1. Update a Property of an Object
Use the =
operator:
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
// Updates myAge to 2043
object.myAge = 2043
2. Turn an Object's Keys into an Array
Use keys()
:
let object = {
'myName' : 'Name',
'myAge' : 1043
}
// Returns [ 'myName', 'myAge' ];
let keys = Object.keys(object);
3. Turn an Object's Values into an Array
Use values()
:
let object = {
'myName' : 'Name',
'myAge' : 1043
}
// Returns [ 'Name', 1043 ];
let values = Object.values(object);
4. Turn Array or Map sets into an Object
Use fromEntries
:
let arrSets = [ ['myName', 'Name'], ['myAge', 1043] ]
/* Returns {
'myName' : 'Name',
'myAge' : 1043
} */
let generateObject = Object.fromEntries(arrSets);
5. Shallow Clone an Object
Use assign()
or ...
:
let object = {
'myName' : 'Name',
'myAge' : 1043
}
// Creates a copy of object, which we can edit separately
let newObject = Object.assign({}, object);
// Creates a copy of object, which we can edit separately
let anotherClone = { ...object };
6. Deep Clone an Object with only variables
Use JSON.parse(JSON.stringify())
:
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
// Creates a copy of object, which we can edit separately
let newObject = JSON.parse(JSON.stringify(object));
newObject.myName.FirstName = 'Hello';
console.log(newObject, object);
/*
Returns {
myAge: 1043,
myName: {
FirstName: "Hello",
SecondName: "Surname"
}
}, {
myAge: 1043,
myName: {
FirstName: "Name",
SecondName: "Surname"
}
} */
7. Merge two objects into the original variable
Use assign()
:
let object = { 'myName' : 'Name' }
let objectTwo = { 'myAge' : 1043 }
Object.assign(object, objectTwo);
console.log(object, objectTwo);
/* Returns {
myAge: 1043,
myName: "Name"
}, {
myAge: 1043
} */
8. Merge two objects into a new variable
Use ...
.
let object = { 'myName' : 'Name' }
let objectTwo = { 'myAge' : 1043 }
let newObject = { ...object, ...objectTwo }
console.log(object, newObject);
/* Returns {
myName: "Name"
}, {
myName: "Name",
myAge: 1043
} */
Note: if you merge two objects with ...
, and there are duplicate keys (i.e. both have myAge), the second Object will overwrite the first.
9. Prevent new items being added to an object, but allow previous items to be changed
Use preventExtensions()
:
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
Object.preventExtensions(object);
// Throws a TypeError
object.myLocation = '123 Fake Street';
10. Prevent any changes to an object
Use freeze()
:
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
Object.freeze(object);
// Throws a TypeError
object.myLocation = '123 Fake Street';
// Throws a TypeError
object.myAge = 2043
11. Turn Object into a String
Use JSON.stringify()
:
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
// Returns {"myName":{"FirstName":"Name","SecondName":"Surname"},"myAge":1043}
console.log(JSON.stringify(object))
12. Turn String into an Object
Use JSON.parse()
:
let stringObject = '{"myName":{"FirstName":"Name","SecondName":"Surname"},"myAge":1043}';
/* Returns {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
} */
console.log(JSON.parse(object))
13. Check if Object has a property
Use hasOwnProperty()
:
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
// Returns true
console.log(object.hasOwnProperty('myName'))
14. Make a Property of an Object Unwritable so you can't change it
Use defineProperty()
and change writable
:
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
Object.defineProperty(object, 'myAge', {
writable: false,
});
// object.myAge remains 1043
object.myAge = 2043;
15. Ignore certain properties when using a for loop
Use defineProperty()
and change enumerable
. If we set enumerable to false, that item will be ignored in forEach
loops.
let object = {
'myName' : {
'FirstName' : 'Name',
'SecondName' : 'Surname'
},
'myAge' : 1043
}
Object.defineProperty(object, 'myAge', {
enumerable: false,
});
// Returns only 'myAge'
Object.keys(object).forEach(function(item) {
console.log(item);
});
16. Convert Object to Array sets
Use entries()
:
let object = {
'myName' : 'Name',
'myAge' : 1043
}
// Returns [ [ 'myName', 'Name' ], [ 'myAge', 1043 ]];
let entries = Object.entries(object);
More Tips and Tricks for Javascript
- How Promises and Await work in Javascript
- Javascript Add Event Listener to Multiple Elements
- Javascript Immediately invoked function expressions (IIFE)
- How JSON works in Javascript
- Using the New Google Analytics API to Get Most Popular Pages
- Javascript Ordinals: Adding st, nd, rd and th suffixes to a number
- How does the Javascript logical AND (&&) operator work?
- Javascript ShadowRealms
- Javascript Proxy: Using Javascript Proxies like a Pro
- Javascript Shallow Copies - what is a Shallow Copy?