SlideShare a Scribd company logo
{
...conditionally,
...add,
...keys
}
const aboutAuthor = {};
if (info.bio) {
aboutAuthor.bio = info.bio;
}
if (info.books) {
aboutAuthor.books = info.books;
}
if (info.email) {
aboutAuthor.email = info.email;
}
if (info.website) {
aboutAuthor.website = info.website;
}
...and it keeps growing
We usually define keys inside an object conditionally
like how its shown below,
But, Is there a way to make this cleaner?
Using spread operator
const aboutAuthor = {
...(info.bio && { bio: info.bio }),
...(info.books && { books: info.books }),
...(info.email && { email: info.email }),
...(info.website && { website: info.website })
};
In the above snippet, you can see that the keys get
inserted into the aboutAuthor object only if the
keys are available in the info object.
Similarly, you can smartly play with spread operator
to make your code more cleaner.

More Related Content

PPTX
Python002
Shahjalal Hossain
 
PDF
Uncovering Iterators
sdevalk
 
PPT
Recursive in CakePHP
Ketan Patel
 
PDF
BDD de fuera a dentro
Luismi Cavallé
 
PDF
Lecture 5 - Interaction with for each and while loops
Syed Afaq Shah MACS CP
 
PDF
Cucumber on the JVM with Groovy
Richard Paul
 
PPTX
My_sql_with_php
Ishaq Shinwari
 
DOCX
Conexion php
Luis Reategui Vargas
 
Uncovering Iterators
sdevalk
 
Recursive in CakePHP
Ketan Patel
 
BDD de fuera a dentro
Luismi Cavallé
 
Lecture 5 - Interaction with for each and while loops
Syed Afaq Shah MACS CP
 
Cucumber on the JVM with Groovy
Richard Paul
 
My_sql_with_php
Ishaq Shinwari
 
Conexion php
Luis Reategui Vargas
 

What's hot (17)

PPTX
MooseX::Datamodel - Barcelona Perl Workshop Lightning talk
Jose Luis Martínez
 
DOC
25437 pertemuan25(hitcounter)
Universitas Bina Darma Palembang
 
DOCX
Cómo programar label
danna gabriela
 
TXT
[Php] navigations
Vishal Gurujuwada
 
PPTX
Flutter Reactive Programming 介紹 - part 1 (Stream)
振揚 陳
 
PPTX
The Funky Given
Dan Haywood
 
PDF
Lodash js
LearningTech
 
PDF
[Php] navigations
Thai Pham
 
PDF
与 PHP 和 Perl 使用 MySQL 数据库
YUCHENG HU
 
PDF
CGI.pm - 3ло?!
Anatoly Sharifulin
 
PDF
San Francisco Java User Group
kchodorow
 
PPT
PHP file
tumetr1
 
TXT
Vyg monitor
Anar Godjaev
 
PPTX
Insertion operation
kalpanasatishkumar
 
PPT
Дмитрий Галинский "Sphinx - как база данных"
railsclub
 
DOCX
Php mysql connectivity
abhikwb
 
MooseX::Datamodel - Barcelona Perl Workshop Lightning talk
Jose Luis Martínez
 
25437 pertemuan25(hitcounter)
Universitas Bina Darma Palembang
 
Cómo programar label
danna gabriela
 
[Php] navigations
Vishal Gurujuwada
 
Flutter Reactive Programming 介紹 - part 1 (Stream)
振揚 陳
 
The Funky Given
Dan Haywood
 
Lodash js
LearningTech
 
[Php] navigations
Thai Pham
 
与 PHP 和 Perl 使用 MySQL 数据库
YUCHENG HU
 
CGI.pm - 3ло?!
Anatoly Sharifulin
 
San Francisco Java User Group
kchodorow
 
PHP file
tumetr1
 
Vyg monitor
Anar Godjaev
 
Insertion operation
kalpanasatishkumar
 
Дмитрий Галинский "Sphinx - как база данных"
railsclub
 
Php mysql connectivity
abhikwb
 
Ad

Similar to Conditionally add keys in JavaScript (10)

PDF
Write better python code with these 10 tricks | by yong cui, ph.d. | aug, 202...
amit kuraria
 
PPT
Javascript Primer
Adam Hepton
 
PPTX
Javascript Objects Deep Dive
Manish Jangir
 
PPT
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
PPT
Advanced JavaScript
Stoyan Stefanov
 
PDF
Solving the Riddle of Search: Using Sphinx with Rails
freelancing_god
 
ODP
Cool bonsai cool - an introduction to ElasticSearch
clintongormley
 
PPT
Javascript Experiment
wgamboa
 
PPT
Data Structure In C#
Shahzad
 
DOCX
Course set three full notes
geekinlibrariansclothing
 
Write better python code with these 10 tricks | by yong cui, ph.d. | aug, 202...
amit kuraria
 
Javascript Primer
Adam Hepton
 
Javascript Objects Deep Dive
Manish Jangir
 
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
Advanced JavaScript
Stoyan Stefanov
 
Solving the Riddle of Search: Using Sphinx with Rails
freelancing_god
 
Cool bonsai cool - an introduction to ElasticSearch
clintongormley
 
Javascript Experiment
wgamboa
 
Data Structure In C#
Shahzad
 
Course set three full notes
geekinlibrariansclothing
 
Ad

More from Ideas2IT Technologies (20)

PDF
Version comaparison in JavaScript
Ideas2IT Technologies
 
PDF
Currying in JavaScript
Ideas2IT Technologies
 
PDF
JS Testing Frameworks
Ideas2IT Technologies
 
PDF
Cool usage of Encoding and Decoding a URI in Javascript
Ideas2IT Technologies
 
PDF
Iterables and Iterators in JavaScript
Ideas2IT Technologies
 
PDF
String comparison in javascript
Ideas2IT Technologies
 
PDF
JavaScript symbols
Ideas2IT Technologies
 
PDF
Json.parse() in JavaScript
Ideas2IT Technologies
 
PDF
Bubble sort in Java Script
Ideas2IT Technologies
 
PDF
Performance analysis in merging arrays - JavaScript
Ideas2IT Technologies
 
PDF
Nullish coalescing in JavaScript
Ideas2IT Technologies
 
PDF
What is Big O in JavaScript - Part-1
Ideas2IT Technologies
 
PDF
Variable hoisting in JavaScript
Ideas2IT Technologies
 
PDF
Formidable ES6 spread operator in JavaScript
Ideas2IT Technologies
 
PDF
Logging in JavaScript - Part-5
Ideas2IT Technologies
 
PDF
Logging in JavaScript - Part-4
Ideas2IT Technologies
 
PDF
Logging in JavaScript - Part-3
Ideas2IT Technologies
 
PDF
Logging in JavaScript - part-2
Ideas2IT Technologies
 
PDF
Logging in JavaScript - part-1
Ideas2IT Technologies
 
PDF
Array vs set in JavaScript
Ideas2IT Technologies
 
Version comaparison in JavaScript
Ideas2IT Technologies
 
Currying in JavaScript
Ideas2IT Technologies
 
JS Testing Frameworks
Ideas2IT Technologies
 
Cool usage of Encoding and Decoding a URI in Javascript
Ideas2IT Technologies
 
Iterables and Iterators in JavaScript
Ideas2IT Technologies
 
String comparison in javascript
Ideas2IT Technologies
 
JavaScript symbols
Ideas2IT Technologies
 
Json.parse() in JavaScript
Ideas2IT Technologies
 
Bubble sort in Java Script
Ideas2IT Technologies
 
Performance analysis in merging arrays - JavaScript
Ideas2IT Technologies
 
Nullish coalescing in JavaScript
Ideas2IT Technologies
 
What is Big O in JavaScript - Part-1
Ideas2IT Technologies
 
Variable hoisting in JavaScript
Ideas2IT Technologies
 
Formidable ES6 spread operator in JavaScript
Ideas2IT Technologies
 
Logging in JavaScript - Part-5
Ideas2IT Technologies
 
Logging in JavaScript - Part-4
Ideas2IT Technologies
 
Logging in JavaScript - Part-3
Ideas2IT Technologies
 
Logging in JavaScript - part-2
Ideas2IT Technologies
 
Logging in JavaScript - part-1
Ideas2IT Technologies
 
Array vs set in JavaScript
Ideas2IT Technologies
 

Recently uploaded (20)

PPTX
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
PDF
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
PDF
New Download FL Studio Crack Full Version [Latest 2025]
imang66g
 
PPTX
classification of computer and basic part of digital computer
ravisinghrajpurohit3
 
PDF
Teaching Reproducibility and Embracing Variability: From Floating-Point Exper...
University of Rennes, INSA Rennes, Inria/IRISA, CNRS
 
PDF
Balancing Resource Capacity and Workloads with OnePlan – Avoid Overloading Te...
OnePlan Solutions
 
PDF
New Download MiniTool Partition Wizard Crack Latest Version 2025
imang66g
 
PDF
lesson-2-rules-of-netiquette.pdf.bshhsjdj
jasmenrojas249
 
PPTX
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
PDF
An Experience-Based Look at AI Lead Generation Pricing, Features & B2B Results
Thomas albart
 
PDF
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
PDF
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
PPTX
Odoo Integration Services by Candidroot Solutions
CandidRoot Solutions Private Limited
 
PDF
Applitools Platform Pulse: What's New and What's Coming - July 2025
Applitools
 
PPT
Activate_Methodology_Summary presentatio
annapureddyn
 
PPTX
Presentation about variables and constant.pptx
kr2589474
 
PDF
advancepresentationskillshdhdhhdhdhdhhfhf
jasmenrojas249
 
PDF
Adobe Illustrator Crack Full Download (Latest Version 2025) Pre-Activated
imang66g
 
PPTX
oapresentation.pptx
mehatdhavalrajubhai
 
PDF
Bandai Playdia The Book - David Glotz
BluePanther6
 
Contractor Management Platform and Software Solution for Compliance
SHEQ Network Limited
 
On Software Engineers' Productivity - Beyond Misleading Metrics
Romén Rodríguez-Gil
 
New Download FL Studio Crack Full Version [Latest 2025]
imang66g
 
classification of computer and basic part of digital computer
ravisinghrajpurohit3
 
Teaching Reproducibility and Embracing Variability: From Floating-Point Exper...
University of Rennes, INSA Rennes, Inria/IRISA, CNRS
 
Balancing Resource Capacity and Workloads with OnePlan – Avoid Overloading Te...
OnePlan Solutions
 
New Download MiniTool Partition Wizard Crack Latest Version 2025
imang66g
 
lesson-2-rules-of-netiquette.pdf.bshhsjdj
jasmenrojas249
 
slidesgo-unlocking-the-code-the-dynamic-dance-of-variables-and-constants-2024...
kr2589474
 
An Experience-Based Look at AI Lead Generation Pricing, Features & B2B Results
Thomas albart
 
Jenkins: An open-source automation server powering CI/CD Automation
SaikatBasu37
 
Appium Automation Testing Tutorial PDF: Learn Mobile Testing in 7 Days
jamescantor38
 
Odoo Integration Services by Candidroot Solutions
CandidRoot Solutions Private Limited
 
Applitools Platform Pulse: What's New and What's Coming - July 2025
Applitools
 
Activate_Methodology_Summary presentatio
annapureddyn
 
Presentation about variables and constant.pptx
kr2589474
 
advancepresentationskillshdhdhhdhdhdhhfhf
jasmenrojas249
 
Adobe Illustrator Crack Full Download (Latest Version 2025) Pre-Activated
imang66g
 
oapresentation.pptx
mehatdhavalrajubhai
 
Bandai Playdia The Book - David Glotz
BluePanther6
 

Conditionally add keys in JavaScript

  • 2. const aboutAuthor = {}; if (info.bio) { aboutAuthor.bio = info.bio; } if (info.books) { aboutAuthor.books = info.books; } if (info.email) { aboutAuthor.email = info.email; } if (info.website) { aboutAuthor.website = info.website; } ...and it keeps growing We usually define keys inside an object conditionally like how its shown below, But, Is there a way to make this cleaner?
  • 3. Using spread operator const aboutAuthor = { ...(info.bio && { bio: info.bio }), ...(info.books && { books: info.books }), ...(info.email && { email: info.email }), ...(info.website && { website: info.website }) }; In the above snippet, you can see that the keys get inserted into the aboutAuthor object only if the keys are available in the info object. Similarly, you can smartly play with spread operator to make your code more cleaner.