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 talkMooseX::Datamodel - Barcelona Perl Workshop Lightning talk
MooseX::Datamodel - Barcelona Perl Workshop Lightning talk
Jose Luis Martínez
 
25437 pertemuan25(hitcounter)
25437 pertemuan25(hitcounter)25437 pertemuan25(hitcounter)
25437 pertemuan25(hitcounter)
Universitas Bina Darma Palembang
 
Cómo programar label
Cómo programar labelCómo programar label
Cómo programar label
danna gabriela
 
[Php] navigations
[Php] navigations[Php] navigations
[Php] navigations
Vishal Gurujuwada
 
Flutter Reactive Programming 介紹 - part 1 (Stream)
Flutter Reactive Programming 介紹 - part 1 (Stream)Flutter Reactive Programming 介紹 - part 1 (Stream)
Flutter Reactive Programming 介紹 - part 1 (Stream)
振揚 陳
 
The Funky Given
The Funky GivenThe Funky Given
The Funky Given
Dan Haywood
 
Lodash js
Lodash jsLodash js
Lodash js
LearningTech
 
[Php] navigations
[Php] navigations[Php] navigations
[Php] navigations
Thai Pham
 
与 PHP 和 Perl 使用 MySQL 数据库
与 PHP 和 Perl 使用 MySQL 数据库与 PHP 和 Perl 使用 MySQL 数据库
与 PHP 和 Perl 使用 MySQL 数据库
YUCHENG HU
 
CGI.pm - 3ло?!
CGI.pm - 3ло?!CGI.pm - 3ло?!
CGI.pm - 3ло?!
Anatoly Sharifulin
 
San Francisco Java User Group
San Francisco Java User GroupSan Francisco Java User Group
San Francisco Java User Group
kchodorow
 
PHP file
PHP  filePHP  file
PHP file
tumetr1
 
Vyg monitor
Vyg monitorVyg monitor
Vyg monitor
Anar Godjaev
 
Insertion operation
Insertion operationInsertion operation
Insertion operation
kalpanasatishkumar
 
3
33
3
Puneet Kumar
 
Дмитрий Галинский "Sphinx - как база данных"
Дмитрий Галинский "Sphinx - как база данных"Дмитрий Галинский "Sphinx - как база данных"
Дмитрий Галинский "Sphinx - как база данных"
railsclub
 
Php mysql connectivity
Php mysql connectivityPhp mysql connectivity
Php mysql connectivity
abhikwb
 
MooseX::Datamodel - Barcelona Perl Workshop Lightning talk
MooseX::Datamodel - Barcelona Perl Workshop Lightning talkMooseX::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)Flutter Reactive Programming 介紹 - part 1 (Stream)
Flutter Reactive Programming 介紹 - part 1 (Stream)
振揚 陳
 
[Php] navigations
[Php] navigations[Php] navigations
[Php] navigations
Thai Pham
 
与 PHP 和 Perl 使用 MySQL 数据库
与 PHP 和 Perl 使用 MySQL 数据库与 PHP 和 Perl 使用 MySQL 数据库
与 PHP 和 Perl 使用 MySQL 数据库
YUCHENG HU
 
San Francisco Java User Group
San Francisco Java User GroupSan Francisco Java User Group
San Francisco Java User Group
kchodorow
 
PHP file
PHP  filePHP  file
PHP file
tumetr1
 
Дмитрий Галинский "Sphinx - как база данных"
Дмитрий Галинский "Sphinx - как база данных"Дмитрий Галинский "Sphinx - как база данных"
Дмитрий Галинский "Sphinx - как база данных"
railsclub
 
Php mysql connectivity
Php mysql connectivityPhp 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...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 PrimerJavascript Primer
Javascript Primer
Adam Hepton
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep Dive
Manish Jangir
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Stoyan Stefanov
 
Solving the Riddle of Search: Using Sphinx with Rails
Solving the Riddle of Search: Using Sphinx with RailsSolving 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 ElasticSearchCool bonsai cool - an introduction to ElasticSearch
Cool bonsai cool - an introduction to ElasticSearch
clintongormley
 
Javascript Experiment
Javascript ExperimentJavascript Experiment
Javascript Experiment
wgamboa
 
Data Structure In C#
Data Structure In C#Data Structure In C#
Data Structure In C#
Shahzad
 
Course set three full notes
Course set three full notesCourse 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...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 PrimerJavascript Primer
Javascript Primer
Adam Hepton
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep Dive
Manish Jangir
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning 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 RailsSolving 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 ElasticSearchCool bonsai cool - an introduction to ElasticSearch
Cool bonsai cool - an introduction to ElasticSearch
clintongormley
 
Javascript Experiment
Javascript ExperimentJavascript Experiment
Javascript Experiment
wgamboa
 
Data Structure In C#
Data Structure In C#Data Structure In C#
Data Structure In C#
Shahzad
 

More from Ideas2IT Technologies (20)

Version comaparison in JavaScript
Version comaparison in JavaScriptVersion comaparison in JavaScript
Version comaparison in JavaScript
Ideas2IT Technologies
 
Currying in JavaScript
Currying in JavaScriptCurrying in JavaScript
Currying in JavaScript
Ideas2IT Technologies
 
JS Testing Frameworks
JS Testing FrameworksJS 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 JavascriptCool 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 JavaScriptIterables and Iterators in JavaScript
Iterables and Iterators in JavaScript
Ideas2IT Technologies
 
String comparison in javascript
String comparison in javascriptString comparison in javascript
String comparison in javascript
Ideas2IT Technologies
 
JavaScript symbols
JavaScript symbolsJavaScript symbols
JavaScript symbols
Ideas2IT Technologies
 
Json.parse() in JavaScript
Json.parse() in JavaScriptJson.parse() in JavaScript
Json.parse() in JavaScript
Ideas2IT Technologies
 
Bubble sort in Java Script
Bubble sort in Java ScriptBubble sort in Java Script
Bubble sort in Java Script
Ideas2IT Technologies
 
Performance analysis in merging arrays - JavaScript
Performance analysis in merging arrays - JavaScriptPerformance analysis in merging arrays - JavaScript
Performance analysis in merging arrays - JavaScript
Ideas2IT Technologies
 
Nullish coalescing in JavaScript
Nullish coalescing in JavaScriptNullish coalescing in JavaScript
Nullish coalescing in JavaScript
Ideas2IT Technologies
 
What is Big O in JavaScript - Part-1
What is Big O in JavaScript - Part-1What is Big O in JavaScript - Part-1
What is Big O in JavaScript - Part-1
Ideas2IT Technologies
 
Variable hoisting in JavaScript
Variable hoisting in JavaScriptVariable hoisting in JavaScript
Variable hoisting in JavaScript
Ideas2IT Technologies
 
Formidable ES6 spread operator in JavaScript
Formidable ES6 spread operator in JavaScriptFormidable ES6 spread operator in JavaScript
Formidable ES6 spread operator in JavaScript
Ideas2IT Technologies
 
Logging in JavaScript - Part-5
Logging in JavaScript - Part-5Logging in JavaScript - Part-5
Logging in JavaScript - Part-5
Ideas2IT Technologies
 
Logging in JavaScript - Part-4
Logging in JavaScript - Part-4Logging in JavaScript - Part-4
Logging in JavaScript - Part-4
Ideas2IT Technologies
 
Logging in JavaScript - Part-3
Logging in JavaScript - Part-3Logging in JavaScript - Part-3
Logging in JavaScript - Part-3
Ideas2IT Technologies
 
Logging in JavaScript - part-2
Logging in JavaScript - part-2Logging in JavaScript - part-2
Logging in JavaScript - part-2
Ideas2IT Technologies
 
Logging in JavaScript - part-1
Logging in JavaScript - part-1Logging in JavaScript - part-1
Logging in JavaScript - part-1
Ideas2IT Technologies
 
Array vs set in JavaScript
Array vs set in JavaScriptArray 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 JavascriptCool 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 JavaScriptIterables and Iterators in JavaScript
Iterables and Iterators in JavaScript
Ideas2IT Technologies
 
Performance analysis in merging arrays - JavaScript
Performance analysis in merging arrays - JavaScriptPerformance 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-1What 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 JavaScriptFormidable ES6 spread operator in JavaScript
Formidable ES6 spread operator in JavaScript
Ideas2IT Technologies
 

Recently uploaded (20)

Why Tapitag Ranks Among the Best Digital Business Card Providers
Why Tapitag Ranks Among the Best Digital Business Card ProvidersWhy Tapitag Ranks Among the Best Digital Business Card Providers
Why Tapitag Ranks Among the Best Digital Business Card Providers
Tapitag
 
Beyond the code. Complexity - 2025.05 - SwiftCraft
Beyond the code. Complexity - 2025.05 - SwiftCraftBeyond the code. Complexity - 2025.05 - SwiftCraft
Beyond the code. Complexity - 2025.05 - SwiftCraft
Dmitrii Ivanov
 
Orion Context Broker introduction 20250509
Orion Context Broker introduction 20250509Orion Context Broker introduction 20250509
Orion Context Broker introduction 20250509
Fermin Galan
 
How to Install and Activate ListGrabber Plugin
How to Install and Activate ListGrabber PluginHow to Install and Activate ListGrabber Plugin
How to Install and Activate ListGrabber Plugin
eGrabber
 
Digital Twins Software Service in Belfast
Digital Twins Software Service in BelfastDigital Twins Software Service in Belfast
Digital Twins Software Service in Belfast
julia smits
 
GC Tuning: A Masterpiece in Performance Engineering
GC Tuning: A Masterpiece in Performance EngineeringGC Tuning: A Masterpiece in Performance Engineering
GC Tuning: A Masterpiece in Performance Engineering
Tier1 app
 
Artificial hand using embedded system.pptx
Artificial hand using embedded system.pptxArtificial hand using embedded system.pptx
Artificial hand using embedded system.pptx
bhoomigowda12345
 
Top 12 Most Useful AngularJS Development Tools to Use in 2025
Top 12 Most Useful AngularJS Development Tools to Use in 2025Top 12 Most Useful AngularJS Development Tools to Use in 2025
Top 12 Most Useful AngularJS Development Tools to Use in 2025
GrapesTech Solutions
 
!%& IDM Crack with Internet Download Manager 6.42 Build 32 >
!%& IDM Crack with Internet Download Manager 6.42 Build 32 >!%& IDM Crack with Internet Download Manager 6.42 Build 32 >
!%& IDM Crack with Internet Download Manager 6.42 Build 32 >
Ranking Google
 
sequencediagrams.pptx software Engineering
sequencediagrams.pptx software Engineeringsequencediagrams.pptx software Engineering
sequencediagrams.pptx software Engineering
aashrithakondapalli8
 
wAIred_LearnWithOutAI_JCON_14052025.pptx
wAIred_LearnWithOutAI_JCON_14052025.pptxwAIred_LearnWithOutAI_JCON_14052025.pptx
wAIred_LearnWithOutAI_JCON_14052025.pptx
SimonedeGijt
 
Troubleshooting JVM Outages – 3 Fortune 500 case studies
Troubleshooting JVM Outages – 3 Fortune 500 case studiesTroubleshooting JVM Outages – 3 Fortune 500 case studies
Troubleshooting JVM Outages – 3 Fortune 500 case studies
Tier1 app
 
Adobe Media Encoder Crack FREE Download 2025
Adobe Media Encoder  Crack FREE Download 2025Adobe Media Encoder  Crack FREE Download 2025
Adobe Media Encoder Crack FREE Download 2025
zafranwaqar90
 
What Do Candidates Really Think About AI-Powered Recruitment Tools?
What Do Candidates Really Think About AI-Powered Recruitment Tools?What Do Candidates Really Think About AI-Powered Recruitment Tools?
What Do Candidates Really Think About AI-Powered Recruitment Tools?
HireME
 
Sequence Diagrams With Pictures (1).pptx
Sequence Diagrams With Pictures (1).pptxSequence Diagrams With Pictures (1).pptx
Sequence Diagrams With Pictures (1).pptx
aashrithakondapalli8
 
How to Troubleshoot 9 Types of OutOfMemoryError
How to Troubleshoot 9 Types of OutOfMemoryErrorHow to Troubleshoot 9 Types of OutOfMemoryError
How to Troubleshoot 9 Types of OutOfMemoryError
Tier1 app
 
Wilcom Embroidery Studio Crack Free Latest 2025
Wilcom Embroidery Studio Crack Free Latest 2025Wilcom Embroidery Studio Crack Free Latest 2025
Wilcom Embroidery Studio Crack Free Latest 2025
Web Designer
 
Adobe InDesign Crack FREE Download 2025 link
Adobe InDesign Crack FREE Download 2025 linkAdobe InDesign Crack FREE Download 2025 link
Adobe InDesign Crack FREE Download 2025 link
mahmadzubair09
 
Top Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdf
Top Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdfTop Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdf
Top Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdf
evrigsolution
 
Deploying & Testing Agentforce - End-to-end with Copado - Ewenb Clark
Deploying & Testing Agentforce - End-to-end with Copado - Ewenb ClarkDeploying & Testing Agentforce - End-to-end with Copado - Ewenb Clark
Deploying & Testing Agentforce - End-to-end with Copado - Ewenb Clark
Peter Caitens
 
Why Tapitag Ranks Among the Best Digital Business Card Providers
Why Tapitag Ranks Among the Best Digital Business Card ProvidersWhy Tapitag Ranks Among the Best Digital Business Card Providers
Why Tapitag Ranks Among the Best Digital Business Card Providers
Tapitag
 
Beyond the code. Complexity - 2025.05 - SwiftCraft
Beyond the code. Complexity - 2025.05 - SwiftCraftBeyond the code. Complexity - 2025.05 - SwiftCraft
Beyond the code. Complexity - 2025.05 - SwiftCraft
Dmitrii Ivanov
 
Orion Context Broker introduction 20250509
Orion Context Broker introduction 20250509Orion Context Broker introduction 20250509
Orion Context Broker introduction 20250509
Fermin Galan
 
How to Install and Activate ListGrabber Plugin
How to Install and Activate ListGrabber PluginHow to Install and Activate ListGrabber Plugin
How to Install and Activate ListGrabber Plugin
eGrabber
 
Digital Twins Software Service in Belfast
Digital Twins Software Service in BelfastDigital Twins Software Service in Belfast
Digital Twins Software Service in Belfast
julia smits
 
GC Tuning: A Masterpiece in Performance Engineering
GC Tuning: A Masterpiece in Performance EngineeringGC Tuning: A Masterpiece in Performance Engineering
GC Tuning: A Masterpiece in Performance Engineering
Tier1 app
 
Artificial hand using embedded system.pptx
Artificial hand using embedded system.pptxArtificial hand using embedded system.pptx
Artificial hand using embedded system.pptx
bhoomigowda12345
 
Top 12 Most Useful AngularJS Development Tools to Use in 2025
Top 12 Most Useful AngularJS Development Tools to Use in 2025Top 12 Most Useful AngularJS Development Tools to Use in 2025
Top 12 Most Useful AngularJS Development Tools to Use in 2025
GrapesTech Solutions
 
!%& IDM Crack with Internet Download Manager 6.42 Build 32 >
!%& IDM Crack with Internet Download Manager 6.42 Build 32 >!%& IDM Crack with Internet Download Manager 6.42 Build 32 >
!%& IDM Crack with Internet Download Manager 6.42 Build 32 >
Ranking Google
 
sequencediagrams.pptx software Engineering
sequencediagrams.pptx software Engineeringsequencediagrams.pptx software Engineering
sequencediagrams.pptx software Engineering
aashrithakondapalli8
 
wAIred_LearnWithOutAI_JCON_14052025.pptx
wAIred_LearnWithOutAI_JCON_14052025.pptxwAIred_LearnWithOutAI_JCON_14052025.pptx
wAIred_LearnWithOutAI_JCON_14052025.pptx
SimonedeGijt
 
Troubleshooting JVM Outages – 3 Fortune 500 case studies
Troubleshooting JVM Outages – 3 Fortune 500 case studiesTroubleshooting JVM Outages – 3 Fortune 500 case studies
Troubleshooting JVM Outages – 3 Fortune 500 case studies
Tier1 app
 
Adobe Media Encoder Crack FREE Download 2025
Adobe Media Encoder  Crack FREE Download 2025Adobe Media Encoder  Crack FREE Download 2025
Adobe Media Encoder Crack FREE Download 2025
zafranwaqar90
 
What Do Candidates Really Think About AI-Powered Recruitment Tools?
What Do Candidates Really Think About AI-Powered Recruitment Tools?What Do Candidates Really Think About AI-Powered Recruitment Tools?
What Do Candidates Really Think About AI-Powered Recruitment Tools?
HireME
 
Sequence Diagrams With Pictures (1).pptx
Sequence Diagrams With Pictures (1).pptxSequence Diagrams With Pictures (1).pptx
Sequence Diagrams With Pictures (1).pptx
aashrithakondapalli8
 
How to Troubleshoot 9 Types of OutOfMemoryError
How to Troubleshoot 9 Types of OutOfMemoryErrorHow to Troubleshoot 9 Types of OutOfMemoryError
How to Troubleshoot 9 Types of OutOfMemoryError
Tier1 app
 
Wilcom Embroidery Studio Crack Free Latest 2025
Wilcom Embroidery Studio Crack Free Latest 2025Wilcom Embroidery Studio Crack Free Latest 2025
Wilcom Embroidery Studio Crack Free Latest 2025
Web Designer
 
Adobe InDesign Crack FREE Download 2025 link
Adobe InDesign Crack FREE Download 2025 linkAdobe InDesign Crack FREE Download 2025 link
Adobe InDesign Crack FREE Download 2025 link
mahmadzubair09
 
Top Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdf
Top Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdfTop Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdf
Top Magento Hyvä Theme Features That Make It Ideal for E-commerce.pdf
evrigsolution
 
Deploying & Testing Agentforce - End-to-end with Copado - Ewenb Clark
Deploying & Testing Agentforce - End-to-end with Copado - Ewenb ClarkDeploying & Testing Agentforce - End-to-end with Copado - Ewenb Clark
Deploying & Testing Agentforce - End-to-end with Copado - Ewenb Clark
Peter Caitens
 

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.
  翻译: