Efficient Object Looping, Deletion, and Existence Checks in JavaScript
JavaScript Object is a non-primitive data type we store in it multiple and different primitive data type, every object consists of keys (properties) and its values, here is an object example👇
const person = {
firstName: "Ismail",
lastName: "AbuAlmagd",
age: 35,
married: true
};
Loop throw object JavaScript:
there are many ways to iterate over JavaScript object, let me show it👇
1-Usingfor...in
: this statement allows us to iterate over all object properties 👇
for (let key in person) {
console.log(key, person[key]);
}
/*output👇
firstName Ismail
lastName AbuAlmagd
age 35
married true
*/
2.UsingObject.entries():
this statement provided at (ES6), with this statement you can get key and value directly👇
for (let [key, value] of Object.entries(person)) {
console.log(key, value);
}
/*output
firstName Ismail
lastName AbuAlmagd
age 35
married true
*/
3.extracte keys into array by Object.keys then get value by index👇
let keys = Object.keys(person);
// Iterate over properties by index
for (let i = 0; i < keys.length ; i++) {
console.log(keys[i], person[keys[i]]);
}
/*output
firstName Ismail
lastName AbuAlmagd
age 35
married true
*/
Check if key exists in object JavaScript:
there are many ways to check if key exists in object let me show you👇
1-Using hasOwnProperty()
👇
if (person.hasOwnProperty('firstName')) {
console.log('person object has a fristName key');
}else{
console.log('person object has no key equal to fristName');
}
/*output
person object has a fristName key
*/
if (person.hasOwnProperty('secondName')) {
console.log('person object has a secondName key');
}else{
console.log('person object has no key equal to secondName');
}
/*output
person object has no key equal to secondName
*/
2.Usingin
operator:
if ('firstName' in person) {
console.log('person object has a fristName key');
}else{
console.log('person object has no key equal to fristName');
}
/*output
person object has a fristName key
*/
if ('secondName' in person) {
console.log('person object has a secondName key');
}else{
console.log('person object has no key equal to secondName');
}
/*output
person object has no key equal to secondName
*/
Difference betweenin
andhasOwnProperty()
thatin
work even for inherited, On the contraryhasOwnProperty()
didn't.
3-As you can get value of object key by using Square Brackets, so we can check if object have this key or not,
Checking undefined-ness is not accurate as may be the key exist but undefined👇
const cat={
fristName:"brodi",
age:1,
secondName:undefined
}
if(cat['secondName']===undefined){
console.log('the secondName key may didnot exist in person object or exist but hasnot a value ')
}
Delete key from object JavaScript:
1**-Using** delete
operator:
const person={
fristName:"ali",
age:12,
secondName:"mina"
}
delete person['age'];
console.log(person);
/*output
{ fristName: 'ali', secondName: 'mina' }
*/
2-Using object destructing:
This way is immutable, mean we create a new object.
const person={
fristName:"ali",
age:12,
secondName:"mina"
}
const{age:_,...newPerson}=person;
console.log(newPerson);
/*output
{ fristName: 'ali', secondName: 'mina' }
*/
If we print the person
, the old object it's still unmodified.
console.log(person);
/*output
{ fristName: 'ali', age: 12, secondName: 'mina' }
*/
I hope this is useful to you.
you can discover great side projects at my solutrend app.
thanks, stay in touch ismail abo almagd or @SaaSboy on Twitter.
Subscribe to my newsletter
Read articles from ismail abu almagd directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
ismail abu almagd
ismail abu almagd
A software developer who found his passion in building successful saas and learn from the journey.