![](/img/og_image_header.webp)
Building a Default Settings System Using the Spread Operator
by Hexagon, 2 minutes read javascript guide
Today, We'll have a look at how the spread operator works by building a small system for managing default settings and overrides.
In many applications, you often need a set of default settings as a baseline configuration. However, it's equally crucial to allow users or developers to customize these settings when necessary. The challenge is to create a system that seamlessly combines default settings with user-defined preferences without creating complex conditional logic.
Enter the Spread Operator
JavaScript introduced the spread operator (...
) as a concise way to manipulate
arrays and objects. It's also a powerful tool for merging objects, which makes
it perfect for our default settings system.
Defining Default Settings
const defaultSettings = {
apiKey: "your-api-key",
apiUrl: "https://api.example.com",
timeout: 5000,
debugMode: false,
};
Here, you've established a set of default settings, including an API key, API URL, timeout duration, and a debug mode flag.
Building the Default Settings System
Now, let's create a function that merge in user-defined settings while preserving the defaults:
function applySettings(defaultSettings, userSettings) {
return { ...defaultSettings, ...userSettings };
}
In this function, the magic happens with the spread operator. It merges the
defaultSettings
with userSettings
. Any values provided in userSettings
will override the corresponding defaults, while unspecified settings will still
fall back to the defaults.
Using Your Default Settings
Now that you have your applySettings
function in place, you can easily apply
it to any object of user-defined settings:
const userSettings = {
apiKey: "custom-api-key",
timeout: 10000,
};
const finalSettings = applySettings(defaultSettings, userSettings);
console.log(finalSettings);
In this example, you're overriding the apiKey
and timeout
settings, while
leaving apiUrl
and debugMode
to use the defaults. The result will be an
object with merged settings:
{
apiKey: 'custom-api-key',
apiUrl: 'https://api.example.com',
timeout: 10000,
debugMode: false,
}
Wrapping up
It's as simple as that. Now you have a basic understanding of the spread operator and a handy default settings system with minimal code.