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

What's hot (17)

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

Similar to Conditionally add keys in JavaScript (10)

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

More from Ideas2IT Technologies (20)

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

Recently uploaded (20)

Migrating to Azure Cosmos DB the Right Way
Migrating to Azure Cosmos DB the Right Way
Alexander (Alex) Komyagin
 
What is data visualization and how data visualization tool can help.pdf
What is data visualization and how data visualization tool can help.pdf
Varsha Nayak
 
Integrating Survey123 and R&H Data Using FME
Integrating Survey123 and R&H Data Using FME
Safe Software
 
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
joybepari360
 
Open Source Software Development Methods
Open Source Software Development Methods
VICTOR MAESTRE RAMIREZ
 
AI-Powered Compliance Solutions for Global Regulations | Certivo
AI-Powered Compliance Solutions for Global Regulations | Certivo
certivoai
 
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
Aarno Aukia
 
How the US Navy Approaches DevSecOps with Raise 2.0
How the US Navy Approaches DevSecOps with Raise 2.0
Anchore
 
How Insurance Policy Management Software Streamlines Operations
How Insurance Policy Management Software Streamlines Operations
Insurance Tech Services
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
UPDASP a project coordination unit ......
UPDASP a project coordination unit ......
withrj1
 
Software Engineering Process, Notation & Tools Introduction - Part 4
Software Engineering Process, Notation & Tools Introduction - Part 4
Gaurav Sharma
 
AI and Deep Learning with NVIDIA Technologies
AI and Deep Learning with NVIDIA Technologies
SandeepKS52
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
BradBedford3
 
Step by step guide to install Flutter and Dart
Step by step guide to install Flutter and Dart
S Pranav (Deepu)
 
Advanced Token Development - Decentralized Innovation
Advanced Token Development - Decentralized Innovation
arohisinghas720
 
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
usmanch7829
 
Software Engineering Process, Notation & Tools Introduction - Part 3
Software Engineering Process, Notation & Tools Introduction - Part 3
Gaurav Sharma
 
FME as an Orchestration Tool - Peak of Data & AI 2025
FME as an Orchestration Tool - Peak of Data & AI 2025
Safe Software
 
What is data visualization and how data visualization tool can help.pdf
What is data visualization and how data visualization tool can help.pdf
Varsha Nayak
 
Integrating Survey123 and R&H Data Using FME
Integrating Survey123 and R&H Data Using FME
Safe Software
 
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
joybepari360
 
Open Source Software Development Methods
Open Source Software Development Methods
VICTOR MAESTRE RAMIREZ
 
AI-Powered Compliance Solutions for Global Regulations | Certivo
AI-Powered Compliance Solutions for Global Regulations | Certivo
certivoai
 
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
Aarno Aukia
 
How the US Navy Approaches DevSecOps with Raise 2.0
How the US Navy Approaches DevSecOps with Raise 2.0
Anchore
 
How Insurance Policy Management Software Streamlines Operations
How Insurance Policy Management Software Streamlines Operations
Insurance Tech Services
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
UPDASP a project coordination unit ......
UPDASP a project coordination unit ......
withrj1
 
Software Engineering Process, Notation & Tools Introduction - Part 4
Software Engineering Process, Notation & Tools Introduction - Part 4
Gaurav Sharma
 
AI and Deep Learning with NVIDIA Technologies
AI and Deep Learning with NVIDIA Technologies
SandeepKS52
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
BradBedford3
 
Step by step guide to install Flutter and Dart
Step by step guide to install Flutter and Dart
S Pranav (Deepu)
 
Advanced Token Development - Decentralized Innovation
Advanced Token Development - Decentralized Innovation
arohisinghas720
 
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
IMAGE CLASSIFICATION USING CONVOLUTIONAL NEURAL NETWORK.P.pptx
usmanch7829
 
Software Engineering Process, Notation & Tools Introduction - Part 3
Software Engineering Process, Notation & Tools Introduction - Part 3
Gaurav Sharma
 
FME as an Orchestration Tool - Peak of Data & AI 2025
FME as an Orchestration Tool - Peak of Data & AI 2025
Safe Software
 

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.