TL;DR

Until recently, I always thought that when casting any JavaScript value to a string, both String(somevar) and "" + somevar were equivalent. Well, they are not, and I have been wrong all along.

const symbol = Symbol();

console.log(String(symbol)); // “Symbol()”

// For string concatenation involving a symbol,
// throws a TypeError exception.
console.log("" + symbol);

If it is any consolation, they both produce the same result for most JavaScript values. However, it’s possible to create custom JavaScript objects for which they differ in results.

Continue reading to find out more…

Background

The majority of programming languages out there provide mechanisms for converting between value types either implicitly (type coercion) or explicitly (type casting), of which JavaScript is not an exception.

There are times when the JavaScript engine needs a value to be of a certain type before it can be able to carry out some operations on it. In such cases, the JavaScript engine implicitly coerces the value to the required type.

However, type conversions can be done explicitly in code. The following example shows how to explicitly cast a JavaScript value to its boolean equivalent (the result depends on whether the value is truthy or falsy):

// Using the global Boolean function
var boolean = Boolean(value);

// Using the double-NOT(!!) trick
var boolean = !!value;

From this point going forward, more emphasis will be laid on explicitly casting JavaScript values to strings.

Type Casting (To String)

Just as we saw earlier with casting values to booleans, similar approaches can be taken to cast JavaScript values to strings.

// Using the global String function
var string = String(value);

// Using string concatenation(+) with empty string
var string = "" + value;

For a long time, I have always thought that both approaches for casting to a string will produce the same string for any JavaScript value. And guess what? I have been wrong all along, and not just me alone, as we will find out shortly.

The first obvious difference between the two casting approaches can be seen with JavaScript symbols. Using the global String() function will return the symbol’s descriptive string, while string concatenation will throw a TypeError exception.

const symbol = Symbol();

console.log(String(symbol)); // “Symbol()”

// For string concatenation involving a symbol,
// throws a TypeError exception.
console.log("" + symbol);

Case Study

For most JavaScript values and objects, both approaches will produce the same string result. However, it is very possible to create custom JavaScript objects for which they differ in results.

Consider the following code snippet:

The createSalaryObject() function returns a custom JavaScript object that defines its own valueOf and toString methods. Also, casting the salary object to a string using the two approaches produced different results.

Why the Difference

To understand the reason for the difference between the two approaches, we need to first understand how they work (as described in the ECMAScript Language specification).

String(value)

• If value is not specified, return an empty string.
• If value is a symbol, return the symbol’s descriptive string — for example: "Symbol(description)".
• Else, return the result of the abstract operation ToString(value).

Here is how the ToString(argument) abstract operation works:

Now let’s apply all we’ve seen above to the salary object we saw in the code snippet from before:

// Since `salary` is an object
String(salary) => ToString(salary)

// Also, because `salary` is of type object
ToString(salary) => ToString(ToPrimitive(salary, hint = string))

// Therefore we can say:
String(salary) => ToString(ToPrimitive(salary, hint = string))

” ” + value

1. Convert both operands to primitive values using the ToPrimitive(value) abstract operation.
2. If any of the primitives from (1) above is a string, convert both primitives to strings using the ToString(primitive) abstract operation.
3. If there are no errors so far, return the result of concatenating both strings from (2) above.

Now let’s apply all we’ve seen above to the salary object we saw in the code snippet from before:

// First converting operands to primitives
"" + salary => ToPrimitive("") + ToPrimitive(salary)

// Because ToPrimitive("") => "" (which is a string),
// the above becomes:
"" + salary => ToString("") + ToString(ToPrimitive(salary))

// Since ToString("") => "",
// we can further simplify the above to:
"" + salary => "" + ToString(ToPrimitive(salary))

// Since one of the operands is an empty string,
// it is safe to say that the string concatenation will
// return the other operand:
"" + salary => ToString(ToPrimitive(salary))

The Difference

If we compare the outcomes of both approaches, we will notice that the difference results from the ToPrimitive abstract operation.

// ToPrimitive (with string hint)
String(salary) => ToString(ToPrimitive(salary, hint = string))

// ToPrimitive (without hint)
"" + salary => ToString(ToPrimitive(salary))

For String(value), the ToPrimitive operation is carried out with the string hint. While for "" + value, the operation is done without hint. Except for JavaScript symbols (which we have seen already), therein lies the difference between the two approaches.

This difference can only manifest itself, if the value being cast is some kind of custom JavaScript object, just like our salary object.

Now that we know where the difference comes from, let’s examine how the ToPrimitive abstract operation handles hints.

The ToPrimitive Operation

The ToPrimitive abstract operation has three possible hints: number, string and default (when no hint is provided).

If the target object (say input) has a [Symbol.toPrimitive] property defined on it, the following steps are taken:

1. Let result be the return value of input[Symbol.toPrimitive](hint).
   This will throw a TypeError exception if [Symbol.toPrimitive] is not a function. The hint argument can be one of "number", "string" and "default".
2. If result is an object, throw a TypeError exception.
3. Return result.

Otherwise, the following happens:

1. If the hint is string,

• Let result be the return value of input.toString().
• If result is an object, update result with the return value of input.valueOf().
• If result is an object, throw a TypeError exception.
• Return result.

2. Otherwise,

• Let result be the return value of input.valueOf().
• If result is an object, update result with the return value of input.toString().
• If result is an object, throw a TypeError exception.
• Return result.

Now that we understand how the ToPrimitive abstract operation works, let’s see the resulting values for the salary object from before.

For String(salary) we have:

String(salary) => ToString(ToPrimitive(salary, hint = string))

// The `salary` object lacks a [Symbol.toPrimitive] method
// Also, hint is string — so start with salary.toString()
ToPrimitive(salary, hint = string) => salary.toString()

// Since salary.toString() returns "USD 150000",
// which is not an object
ToPrimitive(salary, hint = string) => "USD 150000"

// Therefore, we have:
String(salary) => ToString("USD 150000")
String(salary) => "USD 150000"

For "" + salary we have:

"" + salary => ToString(ToPrimitive(salary))

// The `salary` object lacks a [Symbol.toPrimitive] method
// Also, hint is not string — so start with salary.valueOf()
ToPrimitive(salary) => salary.valueOf()

// Since salary.valueOf() returns 150000,
// which is not an object
ToPrimitive(salary) => 150000

// Therefore, we have:
"" + salary => ToString(150000)
"" + salary => "150000"

You can learn more about the ToPrimitive abstract operation from the ECMAScript Language Specification.

Minified JavaScript Code

Most JavaScript code minification or compression tools attempt to replace certain values and tokens in the original code with more compact values or expressions in the minified code.

Here are some common examples:

+----------------------+----------+
| Original             | Minified |
+----------------------+----------+
| true                 | !0       |
| false                | !1       |
| 1000                 | 1e3      |
| Infinity             | 1/0      |
+----------------------+----------+

It’s very possible that due to some kind of configuration, some JavaScript code minification or compression tools might replace String(someValue) with ""+x, where x is the mangled variable name for someValue.

And if someValue is like the salary object we saw in the previous example, then it means the output from the minified code will differ from that of the original code.

Type Casting Safely

For safety, you might consider defining a [Symbol.toPrimitive] method on custom objects, especially those that define their own valueOf or toString methods.

For example, the createSalaryObject() function we saw earlier could be modified as follows to define a [Symbol.toPrimitive] method on the salary object that will be returned:

Defining a [Symbol.toPrimitive] method on custom objects might be an overkill. The code might rely on some third-party library that also defines custom objects. It might even be that the environment the code will run in does not support JavaScript symbols.

An alternative option will be to use String.call() to cast custom objects to strings instead of String(), since it is less likely that code minification tools will compress the former to a string concatenation expression.

+-----------------------------------+----------------------+
| Original                          | Minified             |
+-----------------------------------+----------------------+
| String(someValue)                 | ""+x                 |
| String.call(null, someValue)      | String.call(null,x)  |
| String.call(someValue, someValue) | String.call(x,x)     |
+-----------------------------------+----------------------+

Using String.call() severally in the original code might cause an increase in the size of the minified code. To prevent this, a custom helper function can be defined once and then used whenever a value needs to be explicitly cast to a string.

function toStringHelper(value) {
  return String.call(value, value);
}

Share & Manage Reusable JS Components with Bit

Use Bit (Github) to share, document, and manage reusable components from different projects. It’s a great way to increase code reuse, speed up development, and build apps that scale.

Bit supports Node, TypeScript, React, Angular, Vue, and more.

Bit. Composable software.

Your Feedback

Thanks for making out time to go through this post.

• Remember to drop your feedback or questions in the comments.
• If you found this post insightful, go ahead, and hit the Clap button as much as you can to help others find it easily.
• You can follow me on Twitter (@gladchinda) to get notifications about more insightful content coming up soon.

Happy coding…

JavaScript Type Casting Gone Wrong was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

TL;DR

Since JavaScript arrays are basically objects (with special behavior for index properties), they are valid targets for object destructuring. Hence, making the following destructuring statements equivalent.

// Array to be destructured
const RGB = [255, 180, 151];

// Array Destructuring
const [red, green, blue] = RGB;

// Object Destructuring (equivalent)
const {0: red, 1: green, 2: blue} = RGB;

Using the object destructuring syntax makes for more flexible and complex destructuring of arrays and array-like objects, where it wouldn't be possible or reasonable otherwise to use array destructuring, due to limitations.

Continue reading to find out more…

Background

The syntax for destructuring objects was added to the ECMAScript Language Specification starting from ES2015 (popularly known as ES6). This syntax makes it possible to break down complex JavaScript values like objects into simpler parts that can be assigned to local variables.

The destructuring syntax comes in two basic flavors:

1. Array destructuring

// Array that will be destructured
const RGB = [255, 180];

// Array Destructuring
// Skip the first item
// Set a default value (51) for the third item (`blue`)
const [, green, blue = 51] = RGB;

console.log(green); // 180
console.log(blue); // 51

2. Object destructuring

// Object that will be destructured
const AUTHOR = {
  name: "Glad Chinda",
  lang: "JavaScript"
};

// Object Destructuring
// Declare a local variable (`language`) for `lang`
// Set a default value (16) for `age`
const {name, lang: language, age = 16} = AUTHOR;

console.log(name); // "Glad Chinda"
console.log(lang); // undefined
console.log(language); // "JavaScript"
console.log(age); // 16

However, it is possible to have a destructuring syntax that is a mix of both flavors, nested in a certain way.

In this post, we will focus on destructuring for arrays and other JavaScript iterables. If you are not already familiar with the destructuring syntax, you can check out ES6 Destructuring: The Complete Guide to learn more.

Array Destructuring

The array destructuring syntax proves useful for a number of applications. A very common application of array destructuring is in swapping variables.

Without the array destructuring syntax, swapping the values of two variables will always require a third temporary variable. With array destructuring, let’s just say that won’t be necessary.

// Variables to be swapped
let width = 1280;
let height = 720;

// Swapping Variables (without array destructuring)
// A temporary variable is required
let temp = width;

width = height;
height = temp;

// Swapping Variables (with array destructuring)
[width, height] = [height, width];

Another very common use of the array destructuring syntax is in combination with the rest parameter syntax for cloning arrays.

// Array to be cloned
const scores = [23, 27, 22, 41, 35];

// Clone the `scores` array
const [...scoresClone] = scores;

console.log(scoresClone); // [23, 27, 22, 41, 35]
console.log(scores === scoresClone); // false

Array destructuring isn’t limited to arrays alone (unlike the name implies), rather it can also be used with JavaScript iterables of all kinds such as strings, sets, array-like objects like arguments object, etc.

// Destructuring a String
const [firstChar, ...otherChars] = "Hello";

// Destructuring a Set
const [,, thirdItem] = new Set([1, 2, 3, 4, 5]);

console.log(firstChar); // "H"
console.log(otherChars); // ["e", "l", "l", "o"]
console.log(thirdItem); // 3

Limitations of Array Destructuring

Let’s say we have an array ITEMS of 100 items and we want to assign the value of the 3rd item in the array to a variable named thirdItem. Basically, that can be done as follows:

// METHOD 1 — Using Item Index
// The 3rd item will be at index 2
const thirdItem = ITEMS[2];

// METHOD 2 — Using Array Destructuring
// Simply skip the first two items
const [,, thirdItem] = ITEMS;

Now that was easy since we only needed the third item. What if we were interested in the last item instead? In that case, doing the assignment using the array destructuring syntax wouldn’t make any sense, because it literally means we have to skip the first 99 items(using commas) to get to the last item.

And that’s just for an array of 100 items. It’s even worse when the number of items in the array is not known at compile time. Getting the last item in the array will require knowing the length of the array — something like this:

// Accessing the last item in the ITEMS array
const lastItem = ITEMS[ITEMS.length — 1];

One might think for a moment here, that array destructuring can again be combined with the rest parameter syntax to solve this problem.

// Throws a SyntaxError
// Rest parameter element must always be the last element
const [...skippedItems, lastItem] = ITEMS;

The combination of array destructuring and rest parameter, as shown above, fails with a SyntaxError due to the limitations placed on the rest parameter element:

1. You can only have one rest parameter element.
2. The rest parameter element, whenever present, must be the last element.

Is there a different approach we can try?
Since fundamentally, JavaScript arrays are objects (with special behaviors), one would guess that they should be valid targets for object destructuring.

Object Destructuring to the Rescue

According to the ECMAScript Language Specification, an array object is an exotic object that gives special treatment to array index property keys. What that means is that each index in the array is a valid property key of the array.

Hence, the following destructuring statements are equivalent (for an array):

// Array to be destructured
const RGB = [255, 180, 151];

// Array Destructuring
const [red, green, blue] = RGB;

// Object Destructuring (equivalent)
const {0: red, 1: green, 2: blue} = RGB;

Coming back to our problem from before with this new knowledge, we can get the last item in the ITEMS array and assign it to the lastItem variable like so:

// Using object destructuring
// The last(100th) item will be at index 99
const { 99: lastItem } = ITEMS;

Pushing further, let’s say we want to access items in sparse positions of the ITEMS array — for example the first, third, middle (50th), and last items. While it might be impractical to achieve that using the array destructuring syntax, it is a piece of cake when using the object destructuring syntax.

// Using object destructuring
// ITEMS array contains 100 items
const {
  0: firstItem,
  2: thirdItem,
  49: middleItem,
  99: lastItem
} = ITEMS;

It is also important at this point to note that the order of index properties does not matter when using object destructuring.

// Using object destructuring
// Order of index properties does not matter
const {
  2: thirdItem,
  99: lastItem,
  49: middleItem,
  0: firstItem
} = ITEMS;

More with Object Destructuring

When using object destructuring for arrays, we are not limited to only the index properties of the array object — we can also access other enumerable named properties existing on the array such as length.

// Using object destructuring
// Get the first item and the length
const { 0: firstItem, length } = ITEMS;

Using the object destructuring syntax, it becomes possible to access computed properties. For example, we can get the first, middle, and last items of the ITEMS array using computed properties as follows:

// Using object destructuring
// Get the first, middle and last items
const {
  0: firstItem,
  [ITEMS.length — 1]: lastItem,
  [Math.floor(ITEMS.length / 2)]: middleItem
} = ITEMS;

We can modify the previous code snippet, introducing the length property of the array, like so:

// Using object destructuring
// Get the length and first, middle and last items
const {
  length,
  0: firstItem,
  [length — 1]: lastItem,
  [Math.floor(length / 2)]: middleItem
} = ITEMS;

And if we choose to assign the value of the length property to a local variable with a different name, we can do this:

// Using object destructuring
// Get the length and first, middle and last items
// The length is assigned to the `size` variable
const {
  length: size,
  0: firstItem,
  [size — 1]: lastItem,
  [Math.floor(size / 2)]: middleItem
} = ITEMS;

Going Beyond Arrays

The object destructuring syntax we’ve explored so far does not work for only JavaScript arrays. It can be used for strings and other kinds of array-like objects in JavaScript with special behavior for index properties — such as a function’s arguments object.

Object destructuring for string:

// String to be destructured
const STRING = "Hello World!";

// Object destructuring for string
const {length, [length — 1]: lastChar} = STRING;

console.log(length); // 12
console.log(lastChar); // "!"

📖 Further Reading

For a more in-depth understanding of the destructuring syntax in JavaScript, the following resources will prove very useful.

1. ES6 Destructuring: The Complete Guide
2. Destructuring assignment
3. ES6 In Depth: Destructuring
4. Destructuring assignment

Conclusion

Using array destructuring has potential limitations when trying to destructure values in sparse positions of an array or array-like object. For example, it can be very daunting to get the last item in a large array using array destructuring.

However, switching to object destructuring provides more flexibility to handle even more complex destructuring on arrays and array-like objects. You are not just limited to index properties when using object destructuring—named and computed properties can be destructured as well if they are enumerable.

Your Feedback

Thanks for making out time to go through this post.

• Remember to drop your feedback or questions in the comments.
• If you found this post insightful, go ahead, and hit the Clap button as much as you can to help others find it easily.
• You can follow me on Twitter (@gladchinda) to get notifications about more insightful content coming up soon.

Happy coding…

Destructuring JavaScript Arrays Object(ively) was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

Following the trend these last couple of years, you can agree that dark mode design is gradually becoming a thing. Most of the popular applications, and even devices, have rolled out releases that feature a dark mode (night mode) color scheme.

Dark mode emphasizes the use of light-colored text and elements on a dark background — while maintaining good contrast. The reasoning behind this is somewhat straightforward — viewing the content in dark mode is not just easier on the eyes but also conserves device battery, as expressed by this Popular Science article.

TL;DR

• Building apps with dark mode theming has become pretty common these days, hence it makes sense to understand some of the major ingredients needed to implement it — themes, switch, and context.
• Simply letting the user toggle between light and dark modes via a simple switch can be counter-intuitive, especially when the user has a preferred color scheme already configured on the device or browser. Hence the need to detect and stay in sync with the user’s preferred color scheme on the device.
• For React applications running on the web, CSS media queries alongside the window.matchMedia API can be leveraged for detecting and observing changes to the user’s preferred color scheme. React Native 0.62, on the other hand, ships with the Appearance API and the useColorScheme hook for the same purpose.
• Depending on the app requirement, it is possible to use a combination that involves both inheriting the user’s preferred color scheme set on the device and allowing the user to manually override the app’s theme at any time, via some preferences.

This post will not focus on building a design system or a UI library that enables theming. I recommend you learn it by looking at others' design systems. You can use cloud component hubs like Bit.dev to explore components from different component libraries.

When you start building your own themeable UI components, make sure to publish them yourself to Bit.dev. This way you’ll have your own “toolbox”, a collection of reusable and themeable UI components to use in your future apps.

Dark Mode Implementation

There are so many great dark mode implementations out there, and it has become very common these days to see web applications (such as blogs) include some kind of widget (like a switch) for toggling between viewing their content in either light mode or dark mode.

Let’s examine a typical dark mode (color scheme) implementation for a React application. We will focus on three (3) major ingredients:

1. Themes
2. Switch
3. Context

Themes

Configure styles for both dark theme and light theme. Also, define mechanism for persisting current theme (e.g using local storage). Here is what the theme.js module looks like:

Switch

Define the mechanism for switching between both themes. The mechanism should be available to the user via a dark mode toggle switch that can be interacted with. Here is what the DarkModeToggleSwitch component looks like:

Context

Switching between themes should also change the app-level theme context, thereby causing the app to re-render with the appropriate styles. Here is the main App.js component that handles the context switching logic and passes it down the whole app.

Device Consideration

Most devices these days (smartphones, tablets, laptops, etc) provide a setting for enabling the dark mode color scheme at a system-wide level. Some even provide additional options for scheduling when to enable dark mode — usually dependent on the time of the day.

Also, we now have browsers providing browser-level color scheme settings either as a built-in feature, via a browser extension, or via some preference simulator. Usually, the browser-level color scheme tends to override the system-wide color scheme setting on the device.

While it can be quite useful to allow the user to quickly toggle between light mode and dark mode with a simple switch at the app-level, it might be counter-intuitive sometimes, especially when the user already has a system-wide color scheme set on the device or at the browser-level.

Hence, being able to know the preferred color scheme of the user’s device or browser becomes very important. Thankfully, CSS media queries together with the window.matchMedia Web API has got us covered.

Color Scheme Detection

The CSS Media Queries Level 5 specification adds the prefers-color-scheme feature that reflects the user’s desire to view the page’s content in a light or dark color theme. The possible values for this feature as defined in that specification are as follows:

• dark — User prefers a dark color theme
• light — User prefers a light color theme
• no-preference — User hasn’t indicated any preference

Detecting the user’s preferred color scheme and modifying the styles appropriately is pretty straightforward using CSS. However, that isn’t so helpful to us when building React apps that are aware of the user’s preferred color scheme. For that, we will need the means to detect the color scheme from JavaScript code — that’s what window.matchMedia is for.

Staying in Sync

While detecting the user’s current preferred color scheme is an important first step, staying in sync with changes to the user’s color scheme preference is as important — to ensure the app responds or re-renders accordingly to reflect the changes.

One way to go about this is to set up a media query change listener. When window.matchMedia is called, it returns a MediaQueryList object. We have already seen the matches property of this object — which returns a boolean value that indicates whether the media query matches.

However, we can also register a change event listener on the MediaQueryList object to detect when the media query no longer matches.

Now that we have a pretty solid idea of how to detect and stay in sync with the user’s preferred color scheme, we can proceed with refactoring our initial React application — to make it aware of the user’s device color scheme.

Hooking up React

Currently, switching the theme of our React app requires user interaction (click interaction) with the dark mode toggle switch. However, we want to refactor the application to inherit the user’s preferred (system-wide) color scheme as it has been set on the device.

Wait a minute, that will mean we no longer need the dark mode toggle switch. The app should be able to detect and stay in sync with the system-wide color scheme. To achieve this, we will aggregate all the techniques we’ve just seen about color scheme detection into a custom React hook — which we will call useColorScheme.

The useColorScheme Hook

Before we dive into defining the useColorScheme custom React hook, let’s create the module with a couple of helper functions as follows:

Here, we have defined two helper functions:

• resolveTargetColorScheme — Accepts a target color scheme as its argument and returns either 'dark' or 'light'. Notice that if the specified target color scheme is 'no-preference' or cannot be parsed into any of the schemes in the COLOR_SCHEMES list, then the DEFAULT_TARGET_COLOR_SCHEME value is returned instead.
• getCurrentColorScheme — This returns an object with its query property set to a MediaQueryList object that matches the current user preferred color scheme, and its scheme property set to the name of the current color scheme as it appears on the COLOR_SCHEMES list. Notice that the function caches the MediaQueryList objects to avoid re-creating them each time.

Now, here comes the useColorScheme hook function:

Quite a number of interesting things are going on inside this useColorScheme hook. Let’s quickly run through them from top to bottom.

• Using the useRef() hook, create two mutable ref objects: isMounted (holds a boolean value indicating that the component is still mounted) and colorScheme (holds the current color scheme object returned from a call to the getCurrentColorScheme function).
• Resolve targetScheme by calling the resolveTargetColorScheme function with what was passed to the hook as the target color scheme. Notice the use of the useMemo() hook to ensure that the value is not recomputed except the hook is called with a different target color scheme value.
• The initial scheme state function calls the getCurrentColorScheme function and initializes the colorScheme ref object with the returned object. It then sets the initial scheme state to the value of the returned object’s scheme property.
• The useEffect() hook is used to initialize the isMounted ref object to true when the component is mounted and also to set up a change listener on the MediaQueryList object of the current colorScheme ref object. The cleanup function sets isMounted to false and removes the previously set change listener. Notice that the useEffect() side-effect will be called only once since the dependencies list is an empty array ([]).
• The schemeChangeHandler function runs when the user’s color scheme has changed. When executed, it removes the change listener from the current MediaQueryList object, updates the colorScheme ref with the new object returned from getCurrentColorScheme, updates the scheme state if the component is still mounted, and finally sets up a change listener on the new MediaQueryList object of the current colorScheme ref object.
• Finally, the hook returns a boolean — true if the current scheme state matches the color scheme resolved as targetScheme, and false otherwise.

That was a mouthful. With the useColorScheme hook in place, all that remains now is to modify the App component from before to use the hook.

Modify the App Component

After making a couple of modifications to the App component, we should be good to go. Here is what the updated App.js module is expected to look like:

Notice that we are no longer rendering the dark mode toggle switch. Also, there is no longer a toggle function for switching between color schemes. Switching between color schemes is now as easy as changing the color scheme preference on either the device or the browser (if available), and then the app updates accordingly.

An aside on React Native

Before we move ahead, let’s briefly consider how we can apply the above concept to React Native apps. Interestingly, react-native from version 0.62 now ships with the Appearance API and the useColorScheme hook — which is very useful for detecting and staying in sync with the user-preferred color scheme.

• Detecting the current user preferred color scheme will require using the getColorScheme method of the Appearance API as follows:

• Staying in sync with changes to the user preferred color scheme will require using the useColorScheme hook as follows:

If you are using a version of react-native that was released prior to version 0.62, the react-native-appearance package can be used as an alternative.

Best of Both Worlds

With the new modifications, our React app is now able to change its theme to reflect the user’s preferred color scheme at the device or browser level. However, it has completely lost the ability for the user to manually override the app theme at any time. Now the question is: “Why have either when we can have both?”

For that to happen, we will need to refactor our React application to support both behaviors. This will require that we maintain an additional setting on the app to enable the user to decide if he wants to inherit the system-wide color scheme or manually override it.

First, let’s begin the refactoring with the theme.js file from before. Here is what the updated module will look like:

Here, we are exporting a new InheritSystem object for getting and updating the theme.inherit_system setting value. Notice how the __themeSettingFactory__ function was used as a convenience function for creating the settings objects.

Next, we will extract all color scheme logic from the App component into a custom React hook — which we will call useTheme. Here is what the hook looks like:

In the useTheme hook, we are bringing in everything we have done so far into one place. Notice how we determine the theme by first checking the inheritSystem state to determine if we should use the dark state from the user’s device or the user’s manually set darkMode state.

Also, we defined a __stateToggleFactory__ higher-order helper function for creating toggle functions for the two states: darkMode and inheritSystem.

The useTheme custom hook returns an object with theme, darkMode and inheritSystem properties. Both the darkMode and inheritSystem properties are objects themselves with two properties: on — which is the boolean value of the state, and toggle — which is the toggle function for the state.

Finally, we will go ahead and refactor the App component from before to use the useTheme hook we just created. The final App.js file should now look like this:

Notice that the App component now looks cleaner and less bloated. Also, we have removed the rendering logic for the color scheme controls — they can be rendered in any way as required for the application.

Final Note

At last, the article comes to a close. In the course of this article, we’ve been able to consider how we can factor in the user preferred system-wide color scheme into our React apps. We’ve also been able to consider how we can bring color scheme manual override functionality into the mix.

While localStorage was used throughout this article for persisting preference values, you are not in any way limited to using it. Based on your app requirements, it is possible to get and update preference values via the traditional HTTP Cookies, an API Service, or any other form of storage mechanism available to you.

Rendering logic has been skipped throughout the article to keep the code snippets as concise as possible. In a real app, you are free to handle rendering as you deem fit or based on your app requirements. Also, you are at liberty to manage theming with whatever package works for you — for example, using styled-components theming.

Learn More

• Theming React Components with CSS Variables
• Create a Modular React Component Library
• How to Use the Web Storage API

How to Sync Your React App with the System Color Scheme was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

Radios (or radio buttons) and checkboxes are very important input elements commonly found in so many forms on the web.

Checkboxes are used where multiple values from a list of predefined values may apply — for example, marking multiple files for deletion from a list of files.

Radio buttons on the other hand are used where only one value is applicable — for example, selecting gender from a list.

In this tutorial, we’ll examine using a step-by-step approach, how to improve the aesthetics and appearance of radios and checkboxes using CSS while still preserving the accessibility of the input elements.

In order to fully appreciate this tutorial, a basic understanding of CSS — selectors and style rules is required. However, you don’t really have to be a CSS expert to follow through.

Motivation

When it comes to appearances, radios and checkboxes are somewhat awkward and inconsistent across different browsers. Often times, a uniform appearance is desired for checkboxes and radio buttons, irrespective of the browser being used.

Most CSS frameworks like Bootstrap already provide custom styling for the appearance of these input elements. However, if you are not using a CSS framework, you may need to be able to customize your own checkboxes and radio buttons — hence this tutorial.

Design Blueprint

Here is an outline of steps to follow in order to create a customized radio button or checkbox. In this list, I will keep referring to a checkbox or radio button as just input element.

• Ensure you have a label for the input element.
  Wrap the input element with a <label></label> element and attach a label text for the input element if necessary. This is also useful for maintaining the accessibility of the input element.
• Add the customization element after the input element.
  The customization element is an empty element that will hold all the styles for the custom appearance of the input. It must come after the input element and they must both have the same parent element.
• Make the native input element go away.
  Add the necessary styles to prevent the native input element from being visually presented. Avoid using styles that will remove the input element from the visual flow of the page, since they will be ignored by screen readers and will also impact keyboard accessibility negatively.

• Customize all you want.
  Add the necessary styles to the customization element to get the desired custom appearance of the input. Use the :checked pseudo-class to add styles based on the checked state of the input element.CSS generated content may be used if necessary, leveraging on ::before and ::after pseudo-elements.

Implementation

We will go ahead and implement our customizations based on the design blueprints we’ve just seen. We’ll start with a minimalistic markup for the custom input element and then the styles.

Basic Markup

Here is a sample markup HTML for the input element.

The checkbox element here is defined with a check-custom class. The customization element for the checkbox is given a class of check-toggle.

Using classes in this way makes it easy to opt in or out of the customization. For example — if the check-custom class is not passed, the native checkbox is shown instead.

Hide the Native Element

You could easily attach the hidden attribute to the input element to prevent it from being visually presented like so:

<input type="checkbox" class="check-custom" hidden>

However, this should be discouraged. CSS styles should be used to hide the native input element instead.

Here is a simple style definition to ensure that the native input element is not visually presented.

Here, an attribute selector and a .check-custom class selector are used with the input type selector to ensure that the styles apply to only checkboxes with the specified class.

Customize the Checkbox

First, we will add the basic styles for the appearance of the checkbox as follows:

Notice how the general sibling combinator (A ~ B) was used in the selector to target the customization element after the input element. Here it is again:

input[type='checkbox'].check-custom ~ .check-toggle

This selector will match any element with a check-toggle class, that is a direct sibling of and comes after any checkbox input element with a check-custom class.

Finally, it’s time to add styles for the various states of the check box.

Notice here that I have used an inline SVG of a white checkmark in addition to a blue derivative color as the background for the custom checkbox when it is checked.

Though I have used very simple styles here, it is completely up to you to use as much styling as will be required for the customization you desire.

Here are the complete styles for the custom checkbox:

Comparison Demo

Here is a very simple demo, comparing the appearances of the custom and native checkboxes. (Additional styles have been applied to aid the visual presentation)

Implementing Custom Radio Button

We’ve already seen an implementation for a custom checkbox. Let’s quickly see how we can implement a custom radio button by following the design blueprint we saw earlier.

Basic Markup

Here is a sample markup HTML for the radio button.

Here, we have changed the input type to radio. We have also retained the class names on the elements for consistency.

Before we go on to writing the styles for our custom radio button, let’s have a fair idea of what our radio button should look like.

Here is a side-by-side comparison between the appearance of our custom radio button and the native one.

Styling the Radio Button

From the screenshot above, it can be seen that our custom radio button has something that looks like a small box at its middle when it is in checked state.

To create that box for the checked state, we will leverage on the ::after pseudo-element of the customization element.

All other styles are almost the same with what we saw before for the checkbox. Here are the styles needed to create our custom radio button.

Notice here that we are now using the input[type=’radio’] base selector to ensure that we are targeting only radio buttons. Remember again that it’s completely up to you to style the custom radio button however you seem fit.

Case Study: Toggle Switch

There are a couple of use cases for customized checkboxes and radio buttons that may not be so apparent. One of these is the toggle switch.

A toggle switch can be seen as a checkbox that toggles between two values based on its checked and unchecked state — usually having the appearance of a switch.

We can modify the styles for the customization element of our custom checkbox to give it the appearance of a switch.

The Markup

Let’s start with a sleight modification of the markup to add a toggle-switch class to the input element. Here is what it is:

Checkbox — Why not Radio?

Notice, in the markup for the toggle switch, that we are using an input type of checkbox for the toggle switch. A good question will be — “Can we also use a radio input element?”

The answer is NO. The reason is due to the difference in the toggle behavior of a radio button and a checkbox when they are already in checked state.

A radio button on its own cannot be unchecked by mere user interaction when already in checked state. Hence, it is not ideal for use as a toggle switch.

This simple demo shows the difference between using a radio button and a checkbox as the basis for a toggle switch.

The Styles

We will make a couple of modifications to the styles for the customization element to make it look like a switch.

A typical switch consists of an outer frame and an inner slider that aligns to either the left or right side of the frame depending on the state of the switch.

To achieve this design, we will leverage on the ::before and ::after pseudo-elements of the customization element. The ::before pseudo-element will be the outer frame, while the ::after pseudo-element will be the inner slider.

The resulting toggle switch will look like the following screenshot — (Additional styles have been applied to aid the visual presentation)

Here are the styles for the toggle switch:

About Accessibility

For all the customizations we did in this tutorial, we were able to ensure that our custom radio buttons and checkboxes remained accessible — which is a very good feat by the way.

Hence, tab focusing, check toggling with spacebar and all other accessibility characteristics of the input elements are preserved. This is possible because:

• the <label></label> element was used to wrap the input elements. Hence always remember to wrap the native input element and the customization element in a parent <label> element.
• the native input elements are still preserved in the visual flow of the page, even though they are not visually presented.

Another important improvement on the accessibility of our customized elements will be to add a text or element that provides a readable label — using any of the following options:

• a child element or text within the parent <label> element.
• a hidden label text specified using the aria-label attribute.
• a separate element linked to the input element using the aria-labelledby attribute.

Still on ARIA attributes, you can also use the aria-checked attribute together with the basic checked to indicate checked state of the input elements.

For the toggle switch, you should add the ARIA role role=”switch” to the input element to indicate that it is a toggle switch.

Finally, always ensure that you employ adequate styles for the focus state of the input element in order to provide a useful visual cue.

Conclusion

Finally, we’ve come to the end of this tutorial and we’ve seen a very simple design blueprint that can guide us in making cosmetic changes to native radio buttons and checkboxes with just CSS, and still preserving their accessibility.

Like stated in the tutorial, you are not restricted to the customization styles used in the tutorial. In fact, it’s completely up to you to style the custom elements however you seem fit.

Clap & Follow

If you found this article insightful, feel free to give some rounds of applause if you don’t mind.

You should follow me on Medium (Glad Chinda) for updates on more insightful articles like this one. You can also follow me on my Twitter handle (@gladchinda).

Enjoy coding…

Hacking Custom Checkboxes And Radios was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

Conditionals are a very important aspect of the syntax of every programming language. If you have been programming for sometime in any of the popular languages, you should already be familiar with the if..elif..else or switch conditional statements. They are very useful for making decisions in programs.

For example, let’s say a treasure chest has been designed such that only Glad (that’s me) should be able to open it. This logic can be programmatically represented (in Python) as follows:

Although, the previous code snippet was written in Python syntax, this article is strictly for JavaScript. However, most of the techniques shown here may be applied to a couple other programming languages.

I promise from this moment that you will not find any other line of code in this article written in the syntax of any other programming language besides JavaScript.

In this article, more emphases will be laid on conditional expressions (using logical operators) in JavaScript and how they can be used to make codes shorter, than on conditional statements.

Expressions vs Statements

Before proceeding, you need to be able to distinguish between expressions and statements in JavaScript. Here is a very simple analogy:

Expressions are to JavaScript what phrases are to grammar, while statements are to JavaScript what sentences are to grammar.

An expression is any phrase that the JavaScript engine can evaluate to produce a value.

For example: literals, assignments, function expressions, logical, bitwise or arithmetic operations, object property access, function invocations, eval, etc.

The following code snippet show some JavaScript expressions:

A statement is any sentence or command that the JavaScript engine can execute to make something happen or cause some side-effect.

For example: conditionals, variable or function declarations, loops, throw, return, try/catch/finally, etc.

Some JavaScript expressions like assignments and function invocations may have side-effects, and as a result can usually be used as statements (expression statements).

Conditions and Booleans

A critical requirement of every conditional is the condition. The condition is what determines the decision to be made in the program.

In JavaScript, this condition can be any valid expression. Usually, this condition expression, however complex it is, is evaluated to one of two values called booleans: either true or false.

A proper understanding of how the JavaScript engine converts these condition expressions to booleans is necessary for writing correct and predictable conditional logic.

Here are two fundamental concepts that can enable us to understand the conversions:

• Identifying truthy and falsy values
• Understanding short-circuiting in logical operations

Truthy vs Falsy

Every value in JavaScript can be classified as either truthy or falsy. The falsy values in JavaScript are as follows:

• '' or "" or ``(an empty string)
• 0 or -0 (the number 0)
• null
• undefined
• NaN
• false

Every other value besides the ones in this list are truthy values. Whenever JavaScript expects a boolean value, truthy values are implicitly coerced to true while falsy values are implicitly coerced to false.

However, if you want to be deliberate or explicit about the type coercion, you can use the native Boolean function to convert any value its corresponding boolean.

You can also use the logical NOT (!) operator to convert a value to a boolean. The ! operator converts it’s operand to the inverse boolean value, hence, it always evaluates to a boolean value.

Using the ! operator evaluates to false on truthy values and true on falsy values. To convert a value to its corresponding boolean, you need to use the ! operator twice.

Short-Circuiting

The AND (&&) and OR (||) logical operators both require two operands, and are used to perform Boolean operations on their operands.

Given that the two operands are booleans (true or false),

• && operation returns true only when both operands are true, otherwise it returns false.
• || operation returns false only when both operands are false, otherwise it returns true.

Note that the && operator has a higher precedence than the || operator, and as such, is usually evaluated first. Hence, when they are used together in an expression, you may use parentheses (()) for grouping in order to alter the evaluation order. Consider the following code snippet:

When using these operators, the first operand is always evaluated. However, the second operand may never be evaluated depending on the result from evaluating the first operand. This behavior is known as short-circuiting.

The && and || operations do not always produce a boolean value. Generally, they can produce just any value. Here is a more concise description of their behavior based on short-circuiting:

• && operator first evaluates its first operand. If the resulting value is truthy, it evaluates the second operand and returns its value. However, if the value of the first operand is falsy, the second operand is never evaluated, it just returns the falsy value from the first operand.

• || operator first evaluates its first operand. If the resulting value is truthy, the second operand is never evaluated, it just returns the truthy value from the first operand. However, if the value of the first operand is falsy, it evaluates the second operand and returns its value.

Replacing Statements with Expressions

You now have a clear understanding of the short-circuiting concept and how condition expressions get converted to booleans.

Next, you will see how some conditional statements can be converted to simple expressions. You will also see how such conversions can make your code look more compact and shorter.

1. Simple If Statements

Very simple if statements can easily be replaced with conditional expressions by leveraging on the concept of short-circuiting. Consider the following code snippet:

In this code snippet, the if statement ensures that the deletePost()function is only invoked when the condition evaluates to true.

This simple if statement can be replaced with a very simple conditional expression as shown in the following code snippet:

Though this conditional expression works in a similar fashion as the previous if statement, they are actually different.

The conditional expression produces a value, which means it can be assigned to a variable, or used any other place where a value is required.

Remember that using conditional expressions like this means you have to be very careful about short-circuiting caveats. It is very possible that an operand may not be evaluated as we saw in the previous section on short-circuiting.

2. If…Else Statements

Consider the following dummy code snippet for determining the strength of a password:

The intent of this code snippet is very simple — check if the password is more than 7 characters long. If it is, then set the strength variable to “Strong”, otherwise set it to “Weak”.

The previous code snippet can be shortened to the following:

This code snippet does exactly what the previous one does, all in just one line. This looks pretty good already. The following code snippet tries to review the evaluation of the conditional expression.

There is a better way of writing these kinds of if...else conditional expressions — using the conditional operator also called the ternary operator. Its syntax looks like the following:

The previous code snippet can hence be rewritten using the ternary operator as follows:

Although the code snippet using logical operators works in a similar fashion as the snippet using the ternary operator (for this example), it is important to know that they are not substitutes.

It is much safer to use the ternary operator for cases like this except you really know what you are doing.

Consider the following code snippet to understand the danger of using logical operators for cases like this:

Here is another very familiar conditional statement that was usually found in cross-browser AJAX libraries.

Using logical operators, the previous code snippet can be rewritten like this (indentations are used to aid readability):

However, using the ternary operator, it can be written like this:

Notice in this code snippet that the ternary operator is nested, which is useful for dealing with more involved if...else conditions.

Tips and Shortcuts

In this section, you will see some helpful tips and shortcuts that can be useful when working with conditions and logical operators.

Normalizing to Boolean

You have already seen how to explicitly convert a JavaScript value to its equivalent boolean value, either by using the native Boolean function or by using the double NOT (!!) operators.

Let’s say you want to normalize value such that you always get a boolean as follows:

• If value is a boolean, return value as it is.
• If value is not a boolean, default to a boolean value of your choice - either true or false.

The following code snippet shows how this can be done (functions are being used here):

De Morgan’s Laws

If you are familiar with Boolean Algebra you should already know about the De Morgan’s laws. These laws also apply to JavaScript logical operators.

The following code snippet demonstrates the laws:

Boolean Identities

When dealing with booleans, there are some known identities that are always true. Given that A, B and C are boolean values, the following code snippet shows some of these identities.

Multiple Ternary Operators

You have seen in an earlier code snippets that ternary operators can be nested to handle more involved if...else conditional logic.

However, there are a few things you need to know about the precedence and associativity of the ternary operator to enable you use them effectively in complex expressions.

• The ternary operator has a lower precedence than logical operators and most other operators. Hence it is evaluated last when used together with operators of higher precedence.

• The ternary operator has a right-to-left associativity. Hence, when multiple ternary operators are used in the same expression, they are parsed from right to left.

When using multiple ternary operators in an expression, you may need to use parentheses (()) to alter the evaluation order. Here is an example:

More JavaScript for Experts

If you are interested in related articles that expose other ways you can improve your JavaScript codes, then don’t hesitate to go through these articles:

1. Cool JavaScript Shortcuts and Tips for Everyday Use
2. Hacks for Creating JavaScript Arrays
3. JavaScript ES6: 5 new abstractions to improve your code
4. ES6 Destructuring: The Complete Guide
5. JavaScript typeof

Conclusion

Having reached the end of this article, I’m sure you can now be able to identify areas in your code where these tips and techniques can be applied to improve your code like that of an expert.

Clap & Follow

If you found this article insightful, feel free to give some rounds of applause if you don’t mind.

You can also follow me on Medium (Glad Chinda) for more insightful articles you may find helpful. You can also follow me on Twitter (@gladchinda).

Enjoy coding…

Conditional JavaScript for Experts was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

A very important aspect of every programming language is the data types and structures available in the language. Most programming languages provide data types for representing and working with complex data. If you have worked with languages like Python or Ruby, you should have seen data types like lists, sets, tuples, hashes, dicts, and so on.

In JavaScript, there are not so many complex data types — you simply have arrays and objects. However, in ES6, a couple of data types and structures were added to the language, such as symbols, sets, and maps.

Arrays in JavaScript are high-level list-like objects with a length property and integer properties as indexes.

In this article, I share a couple of hacks for creating new JavaScript arrays or cloning already existing ones.

Creating Arrays: The Array Constructor

The most popular method for creating arrays is using the array literal syntax, which is very straightforward. However, when you want to dynamically create arrays, the array literal syntax may not always be the best method. An alternative method is using the Array constructor.

Here is a simple code snippet showing the use of the Array constructor.

From the previous snippet, we can see that the Array constructor creates arrays differently depending on the arguments it receives.

New Arrays: With Defined Length

Let’s look more closely at what happens when creating a new Array of a given length. The constructor just sets the length property of the array to the given length, without setting the keys.

From the above snippet, you may be tempted to think that each key in the array was set to a value of undefined. But the reality is that those keys were never set (they don’t exist).

The following illustration makes it clearer:

This makes it useless to attempt to use any of the array iteration methods such as map(), filter() or reduce() to manipulate the array. Let’s say we want to fill each index in the array with the number 5 as a value. We will attempt the following:

We can see that map() didn’t work here, because the index properties don’t exist on the array — only the length property exists.

Let’s see different ways we can fix this issue.

1. Using Array.prototype.fill()

The fill() method fills all the elements of an array from a start index to an end index with a static value. The end index is not included. You can learn more about fill() here.

Note that fill() will only work in browsers with ES6 support.

Here is a simple illustration:

Here, we have been able to fill all the elements of our created array with 5. You can set any static value for different indexes of the array using the fill() method.

2. Using Array.from()

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object. You can learn more about Array.from() here.

Note that Array.from() will only work in browsers with ES6 support.

Here is a simple illustration:

Here, we now have true undefined values set for each element of the array using Array.from(). This means we can now go ahead and use methods like .map() and .filter() on the array, since the index properties now exist.

One more thing worth noting about Array.from() is that it can take a second argument, which is a map function. It will be called on every element of the array. This makes it redundant calling .map() after Array.from().

Here is a simple example:

3. Using the Spread Operator

The spread operator (...), added in ES6, can be used to spread the elements of the array, setting the missing elements to a value of undefined. This will produce the same result as simply calling Array.from() with just the array as the only argument.

Here is a simple illustration of using the spread operator:

You can go ahead and use methods like .map() and .filter() on the array, since the index properties now exist.

Using Array.of()

Just like we saw with creating new arrays using the Array constructor or function, Array.of() behaves in a very similar fashion. In fact, the only difference between Array.of() and Array is in how they handle a single integer argument passed to them.

While Array.of(5) creates a new array with a single element, 5, and a length property of 1, Array(5) creates a new empty array with 5 empty slots and a length property of 5.

var array1 = Array.of(5); // [5]
var array2 = Array(5); // Array(5) {length: 5}

Besides this major difference, Array.of() behaves just like the Array constructor. You can learn more about Array.of() here.

Note that Array.of() will only work in browsers with ES6 support.

Converting to Arrays: Array-likes and Iterables

If you have been writing JavaScript functions long enough, you should already know about the arguments object — which is an array-like object available in every function to hold the list of arguments the function received. Although the arguments object looks much like an array, it does not have access to the Array.prototype methods.

Prior to ES6, you would usually see a code snippet like the following when trying to convert the arguments object to an array:

With Array.from() or the spread operator, you can conveniently convert any array-like object into an array. Hence, instead of doing this:

var args = Array.prototype.slice.call(arguments);

you can do either of these:

// Using Array.from()
var args = Array.from(arguments);

// Using the Spread operator
var args = [...arguments];

These also apply to iterables as shown in the following illustration:

Case Study: Range Function

As a case study before we proceed, we will create a simple range() function to implement the new array hack we just learned. The function has the following signature:

range(start: number, end: number, step: number) => Array<number>

Here is the code snippet:

In this code snippet, we used Array.from() to create the new range array of dynamic length and then populate it sequentially incremented numbers by providing a mapping function.

Note that the above code snippet will not work for browsers without ES6 support except if you use polyfills.

Here are some results from calling the range() function defined in the above code snippet:

You can get a live code demo by running the following pen on Codepen:

Cloning Arrays: The Challenge

In JavaScript, arrays and objects are reference types. This means that when a variable is assigned an array or object, what gets assigned to the variable is a reference to the location in memory where the array or object was stored.

Arrays, just like every other object in JavaScript, are reference types. This means that arrays are copied by reference and not by value.

Storing reference types this way has the following consequences:

1. Similar arrays are not equal.

Here, we see that although array1 and array2 contain seemingly the same array specifications, they are not equal. This is because the reference to each of the arrays points to a different location in memory.

2. Arrays are copied by reference and not by value.

Here, we attempt to copy array1 to array2, but what we are basically doing is pointing array2 to the same location in memory that array1 points to. Hence, both array1 and array2 point to the same location in memory and are equal.

The implication of this is that when we make a change to array2 by removing the last item, the last item of array1 also gets removed. This is because the change was actually made to the array stored in memory, whereas array1 and array2 are just pointers to that same location in memory where the array is stored.

Cloning Arrays: The Hacks

1. Using Array.prototype.slice()

The slice() method creates a shallow copy of a portion of an array without modifying the array. You can learn more about slice() here.

The trick is to call slice() either with0 as the only argument or without any arguments at all:

// with O as only argument
array.slice(0);

// without argument
array.slice();

Here is a simple illustration of cloning an array with slice():

Here, you can see that array2 is a clone of array1 with the same items and length. However, they point to different locations in memory, and as a result are not equal. You also notice that when we make a change to array2 by removing the last item, array1 remains unchanged.

2. Using Array.prototype.concat()

The concat() method is used to merge two or more arrays, resulting in a new array, while the original arrays are left unchanged. You can learn more about concat() here.

The trick is to call concat() either with an empty array([]) as argument or without any arguments at all:

// with an empty array
array.concat([]);

// without argument
array.concat();

Cloning an array with concat() is quite similar to using slice(). Here is a simple illustration of cloning an array with concat():

3. Using Array.from()

Like we saw earlier, Array.from() can be used to create a new array which is a shallow-copy of the original array. Here is a simple illustration:

4. Using Array Destructuring

With ES6, we have some more powerful tools in our toolbox such as destructuring, spread operator, arrow functions, and so on. Destructuring is a very powerful tool for extracting data from complex types like arrays and objects.

You can learn more about destructuring from this article.

The trick is to use a technique called rest parameters, which involves a combination of array destructuring and the spread operator as shown in the following snippet:

let [...arrayClone] = originalArray;

The above snippet creates a variable named arrayClone which is a clone of the originalArray. Here is a simple illustration of cloning an array using array destructuring:

Cloning: Shallow versus Deep

All the array cloning techniques we’ve explored so far produce a shallow copy of the array. This won’t be an issue if the array contains only primitive values. However, if the array contains nested object references, those references will remain intact even when the array is cloned.

Here is a very simple demonstration of this:

Notice that modifying the nested array in array1 also modified the nested array in array2 and vice-versa.

The solution to this problem is to create a deep copy of the array and there are a couple of ways to do this.

1. The JSON technique

The easiest way to create a deep copy of an array is by using a combination of JSON.stringify() and JSON.parse().

JSON.stringify() converts a JavaScript value to a valid JSON string, while JSON.parse() converts a JSON string to a corresponding JavaScript value or object.

Here is a simple example:

The JSON technique has some flaws especially when values other than strings, numbers and booleans are involved.

These flaws in the JSON technique can be majorly attributed to the manner in which the JSON.stringify() method converts values to JSON string.

Here is a simple demonstration of this flaw in trying to JSON.stringify() a value containing nested function.

2. Deep Copy Helper

A viable alternative to the JSON technique will be to implement your own deep copy helper function for cloning reference types whether they be arrays or objects.

Here is a very simple and minimalistic deep copy function called deepClone:

Now this is not the best of deep copy functions out there, like you will soon see with some JavaScript libraries — however, it performs deep copying to a pretty good extent.

3. Using JavaScript Libraries

The deep copy helper function we just defined is not robust enough in cloning all the kinds of JavaScript data that may be nested within complex objects or arrays.

JavaScript libraries like Lodash and jQuery provide more robust deep copy utility functions with support for different kinds of JavaScript data.

Here is an example that uses _.cloneDeep() from the Lodash library:

Here is the same example but using $.extend() from the jQuery library:

Conclusion

In this article, we have been able to explore several techniques for dynamically creating new arrays and cloning already existing ones, including converting array-like objects and iterables to arrays.

We have also seen how some of the new features and enhancements introduced in ES6 can enable us to effectively perform certain manipulations on arrays.

We used features like destructuring and the spread operator for cloning and spreading arrays. You can learn more about destructuring from this article.

Clap & Follow

If you found this article insightful, you are free to give some rounds of applause if you don’t mind.

You can also follow me on Medium (Glad Chinda) for more insightful articles you may find helpful. You can also follow me on Twitter (@gladchinda).

Happy hacking…

Hacks for Creating JavaScript Arrays was originally published in We’ve moved to freeCodeCamp.org/news on Medium, where people are continuing the conversation by highlighting and responding to this story.

JavaScript has been around for quite sometime now. Although, it only started becoming very popular in the last few years. The results of surveys conducted by StackOverflow in 2017 prove JavaScript to be the most commonly used programming language. With almost 75% of developers in the world being web developers, there is a very high chance that 3 out of every 5 developers use JavaScript.

For the few years I have worked with JavaScript, there are a few JavaScript shortcuts I tend to use often. In this article, I will be sharing a couple of them, hoping that a few JavaScript developers out there will find them useful.

1. Values: truthy and falsy

Most new JavaScript developers may be aware of the built-in data types in JavaScript. However, not so many may know about JavaScript’s classification of truthy and falsy values.

Anytime JavaScript expects a boolean value, a truthy value will behave like true, whereas a falsy value works like false. These are the falsy values:

1. 0
2. -0
3. null
4. undefined
5. ''
6. NaN
7. false

As you can see, even an empty string is considered a falsy value. All other values besides the above mentioned are truthy values.

The ! operator can be used to convert any value to a boolean. When using the ! operator with values, truthy values evaluate to false, while falsy values evaluate to true. You can use the double (!!) operator to get the corresponding boolean for any value.

Let’s say a variable person can either contain an object or null. You can verify that the person variable is not null, by using the following condition:

if (person !== null) { ... }

Considering that null is falsy while every other object is truthy, you can use this (less strict condition):

if (person) { ... }

2. Type Conversion: Number and String

One of the most common things you find yourself doing in JavaScript is using arithmetic operators: +, -, *, /. These operators expect operands that are numbers. So when any of the operands is not a number, JavaScript implicitly coerces it into a number. But there are times when you may not get the result you may be expecting, especially when you are using the + operator. This is majorly because the + operator is also used for string concatenation. See the following snippet:

As you can see, implicit type coercion may not always give you the result you are expecting. This is because of how JavaScript handles type conversion especially for objects. The difference is due to the order in which JavaScript calls the toString() and valueOf() methods on the object for object-to-primitive conversion.

Now here is the trick. The + operator when used as a unary operator always converts its operand to a number. Hence, the following:

Using the unary + operator on a value is functionally equivalent to casting the value using the Number() function.

+new Date === Number(new Date); // true

The + operator can also be used to convert values to string. Concatenate an empty string('') to any value using the + operator to convert the value to a string.

Using the + operator to convert values to string is functionally equivalent to casting values to string using the String() function.

([100, 50] + '') === String([100, 50]); // true

3. Short-Circuiting

When working with the (|| and &&) logical operators, you may have noticed an interesting behavior called short-circuiting. Here is how it works:

The logical && operator returns the first operand if it is falsy, otherwise it returns the second operand.

The logical && short-circuiting is commonly used as a replacement for very simple if statements as shown in the following snippet:

Note that using short-circuiting actually returns a value since it is a JavaScript expression. Hence, the result of a short-circuiting operation can be stored in a variable or used anywhere JavaScript expects a value.

var personProfile = person && fetchProfile(person);

However, using if statement does not return a value because it is a JavaScript statement.

The logical || operator returns the first operand if it is truthy, otherwise it returns the second operand.

The logical || short-circuiting is commonly used when assigning fallback values to local variables as shown in the following snippet:

In the following snippet, short-circuiting is used to create two functions that always return a boolean value. If the first argument is a boolean value, it is returned, otherwise the desired fallback boolean value is returned.

4. Ternary Operator

The ternary operator can be used as a substitute for very simple if/else statements. Here is the syntax:

(condition) ? (return value if truthy) : (return value if falsy)

The ternary operation requires 3 operands. The first is a condition value or expression. The second is a value or expression that is evaluated and returned if the condition is truthy. The third is a value or expression that is evaluated and returned if the condition is falsy.

Here is a quick example showing how to use the ternary operation as a shortcut for simple if/else statements.

This feels good already, but it gets more interesting knowing that ternary operations can be nested. The ternary operator has a right-to-left associativity. Hence, the following expression:

a ? b : c ? d : e ? f : g

is evaluated as:

(a ? b : (c ? d : (e ? f : g)))

Nested ternary operations can be used as alternatives to multiple if/else statements. Here is a simple example:

Notice how concise the ternary operation is in comparison to using multiple if/else statements.

Note that the ternary operation returns a value since it is a JavaScript expression. Hence, the result of a ternary operation can be stored in a variable or used anywhere JavaScript expects a value. That is the reason why the value of the ternary operation could be returned from the boundedValue() function.

5. Working with Numbers

Random Numbers

As a JavaScript developer, it is possible that you have used Math.random() at one point or the other. The Math.random() function returns a floating-point, pseudo-random number in the range from 0 inclusive up to but not including 1.

console.log(Math.random()); // 0.684408535330514

If you want to create a random floating-point number in the range from 0 inclusive up to but not including let’s say 10, you multiply Math.random() by 10.

console.log(Math.random() * 10); // 8.368613312939646

Math.random() when combined with other functions like Math.floor() or Math.ceil() can be used for some cool number generation combos.

Here is a simple function that generates a random integer from 1 to the given maxvalue.

Min/Max Numbers

The Math.min() and Math.max() functions also come in very handy when trying to deal with bounded numbers. For example the previous boundedValue() example can be implemented using Math.min() and Math.max() as follows:

Number Base Conversion

In JavaScript, number literals are primitives. However, you can access any method available on number objects created using the Number() constructor, one of which is toString().

The Number.prototype.toString() method accepts a radix integer argument which specifies the base to which the number must be converted. If this argument is not specified, it defaults to 10, which means the number is left the same way and then converted to a string.

Hence, you can convert a number to different bases as shown in the following snippet:

(255).toString(); // "255"
(255).toString(2); // "11111111"
(255).toString(8); // "377"
(255).toString(16); // "ff"

Cool huh? The following snippet shows a function rgbToHex() for converting RGB color value to hex color value.

Conclusion

In this article, I have shared a couple of JavaScript tips and shortcuts that you may find very helpful at certain points while writing JavaScript programs.

If none of the tips shared in this article is new to you, then that’s really lovely. However, if you are one of the few people who adopted a thing or two from this article, then I’m glad you did find it helpful. Do well to give some rounds of applause in that case.

You can also follow me on Twitter at @gladchinda and on Medium as I share more contents you may find helpful.

Happy Coding…

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

Cool JavaScript Shortcuts and Tips for Everyday Use was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

Can you forget about the title of this article for a moment? The article you are about to read has nothing to do with a chemical reaction or how you react to circumstances. However, it has everything to do with React applications.

What does Reacting Responsively even mean?

It’s simply the title of the article you are reading. Jokes apart, you can take it to mean the technique of building responsive-aware components in React applications. This usually involves what I would call responsive rendering. We will get back to this in a moment.

Responsive Design

Responsive design is not a new concept. If you’ve been around for sometime in the web development space there is very high chance you already know what this means. Responsive design simply is the technique of designing user interfaces that can adapt to different screen sizes.

What usually comes to your mind when you hear responsive design?

For the majority of front-end engineers, it is likely CSS media queries, which is one of the most fundamental aspects of responsive design.

For some others, it could be one of the plethora of CSS frameworks — like Bootstrap, Foundation, Bulma, etc — since virtually all CSS frameworks have built-in responsive design utilities.

In fact, if you have ever heard of mobile-first design, then you have heard of responsive design in disguise, because that’s what it’s all about.

While our focus isn’t on doing a detailed exposé on responsive design, we will however take a look at media queries, since it is one of the most fundamental aspects of responsive design, and also the concept on which this article is based.

Here is what a typical media query looks like.

Yay, we finally got to write some code. Here we are simply defining display styles for a fictitious .app-nav element on our app that is meant to display the navigation menu for the app.

First, we set the initial styles to display the mobile-friendly version of the navigation element with the .mobile class and hide the full version for wider screens.

Then, we use a media query to ensure that the full version is displayed for screens with viewport width as wide as or wider than 992px instead of the mobile version.

Some advanced CSS frameworks like Bootstrap even make it possible to achieve something this simple using the built-in responsive classes in your app markup, without having to write a single line of CSS.

For example, with Bootstrap 4, all we have to do to achieve the same effect is to change our markup to look like the following snippet (no CSS required).

Here, we use some of the built-in responsive classes in Bootstrap to achieve the same effect without writing any CSS. Bootstrap uses the concept of breakpoints to classify screen sizes based on viewport width. So large screens are taken to be screens with viewport width greater than or equal to (≥) 992px.

The end result is that our app navigation menu is able to adapt to different screen sizes and change it’s display as required. We can simply say our app navigation menu is responsive.

Responsive Rendering

In the previous examples, each app navigation element remains in the DOM even when it is not displayed. With React, we should be able to prevent those elements that shouldn’t be displayed from rendering in the first place. I call this responsive rendering.

There are a handful of packages that can be used achieve this in React. But for this article, we will be using the react-responsive package.

Here is what our previous example could look like using the react-responsive package in our React application.

Here, we use the media query testing capability provided by the react-responsive package to test the current viewport width and render only the appropriate navigation menu for our app — the other versions are not rendered at all.

The matches parameter of the child function of the MediaQuery component has a value of true if the viewport width is a minimum of 992px, otherwise, its value is false.

The end result of this responsive rendering is that our React app now renders only the appropriate version of the navigation menu based on the current viewport width.

Conclusion

In this article, we have been able to move from just designing responsive interfaces using basic CSS media queries and CSS frameworks, to reacting responsively using the react-responsive package to build responsive-aware React components.

While we tried to be very simplistic in this article, there are still a lot more advanced stuffs you can do with react-responsive using complex media query props as suited for your app requirements.

I do hope you found this article helpful. Happy Coding!!!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

Reacting Responsively was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

JavaScript is currently one of the most used programming languages in the world, being used across different platforms ranging from web browsers, mobile devices, VR, web servers, etc. Although the language has not changed a lot through the years when compared to other programming languages, there are some recent changes that are worth taking note of, because of the expressive power they add to the language — some of which are: template literals, destructuring, spread operator, arrow functions, classes, etc.

In this tutorial, our major focus will be on learning how to harness the power of destructuring to simplify our JavaScript programs. Before we dive into the what and how of destructuring I think the why should be considered. If you already use TypeScript or a modern JavaScript framework like React, Vue, Preact, Angular, etc, you may already be familiar with destructuring. However, there is a possibility that by going through this tutorial, you may learn a few new stuffs about destructuring you may not have known.

For this tutorial, it is assumed you already have some prior experience writing JavaScript code. There is a chance that some of the code snippets may not work on your browser depending on the version of the browser, since all the ES6 and ES7 features are not yet fully supported in all browsers. You may opt to test the code snippets on Codepen or your favorite online JavaScript live editor. Another alternative would be using the Babel transpiler to get it to work on your browser.

Why Destructuring?

To explain the why of destructuring, we will consider a scenario which most of us might be familiar with or might have come across at one time or the other when coding in JavaScript. Imagine we have the data of a student including scores in three subjects(Maths, Elementary Science, English) represented in an object and we need to display some information based on this data. We could end up with something that looks like this:

With the above code snippet, we would achieve the desired result. However, there are a few caveats to writing code this way. One of which is — you can easily make a typo and instead of writing scores.english for example, you write score.english which will result in an error. Again, if the scores object we are accessing is deeply nested in another object, the object access chain becomes longer which could mean more typing. These may not seem to be much an issue, but with destructuring we can do the same in a more expressive and compact syntax.

What is Destructuring?

Destructuring simply implies breaking down a complex structure into simpler parts. In JavaScript, this complex structure is usually an object or an array. With the destructuring syntax, you can extract smaller fragments from arrays and objects. Destructuring syntax can be used for variable declaration or variable assignment. You can also handle nested structures by using nested destructuring syntax.

Using destructuring, the function from our previous snippet will look like this:

There is a chance that the code in the last snippet didn’t go down well with you. If that’s the case, then follow up with the tutorial till you get to the end — I assure you it will all make sense. Let’s continue to learn how we can harness the power of destructuring.

Object Destructuring

What we saw in that last snippet is a form of object destructuring being used as an assignment to a function. Let’s explore what we can do with object destructuring starting from the ground up. Basically, you use an object literal on the left-hand-side of an assignment expression for object destructuring. Here is a basic snippet:

Here we used object destructuring syntax to assign values to three variables: firstname, lastname and country using the values from their corresponding keys on the student object. This is the most basic form of object destructuring.

The same syntax can be used in variable assignment as follows:

The above snippet shows how to use object destructuring to assign new values to local variables. Notice that we had to use a pair of enclosing parentheses (()) in the assignment expression. If omitted, the destructuring object literal will be taken to be a block statement, which will lead to an error because a block cannot appear at the left-hand-side of an assignment expression.

Default Values

Trying to assign a variable corresponding to a key that does not exist on the destructured object will cause the value undefined to be assigned instead. You can pass default values that will be assigned to such variables instead of undefined. Here is a simple example.

Here we assigned a default value of 25 to the age variable. Since the age key does not exist on the person object, 25 is assigned to the age variable instead of undefined.

Using Different Variable Names

So far, we have been assigning to variables that have the same name as the corresponding object key. You can assign to a different variable name using this syntax: [object_key]:[variable_name]. You can also pass default values using the syntax: [object_key]:[variable_name] = [default_value]. Here is a simple example.

Here we created three local variables namely: fullname, place and years that map to the name, country and age keys respectively of the person object. Notice that we specified a default value of 25 for the years variable in case the age key is missing on the person object.

Nested Object Destructuring

Referring back to our initial destructuring example, we recall that the scores object is nested in the student object. Let’s say we want to assign the Maths and Science scores to local variables. The following code snippet shows how we can use nested object destructuring to do this.

Here, we defined three local variables: name, maths and science. Also, we specified a default value of 50 for science in case it does not exist in the nested scores object. Notice that, scores is not defined as a variable. Instead, we use nested destructuring to extract the maths and science values from the nestedscores object.

When using nested object destructuring, be careful to avoid using an empty nested object literal. Though it is valid syntax, it actually does no assignment. For example, the following destructuring does absolutely no assignment.

Array Destructuring

By now you are already feeling like a destructuring ninja, having gone through the rigours of understanding object destructuring. The good news is that array destructuring is very much similar and straight forward so let’s dive in right away.

In array destructuring, you use an array literal on the left-hand-side of an assignment expression. Each variable name on the array literal maps to the corresponding item at the same index on the destructured array. Here is a quick example.

In this example, we have assigned the items in the rgb array to three local variables: red, green and blue using array destructuring. Notice that each variable is mapped to the corresponding item at the same index on the rgb array.

Default Values

If the number of items in the array is more than the number of local variables passed to the destructuring array literal, then the excess items are not mapped. But if the number of local variables passed to the destructuring array literal exceed the number of items in the array, then each excess local variable will be assigned a value of undefined except you specify a default value.

Just as with object destructuring, you can set default values for local variables using array destructuring. In the following example, we would set default values for some variables in case a corresponding item is not found.

You can also do an array destructuring assignment. Unlike with object destructuring, you don’t need to enclose the assignment expression in parentheses. Here is an example.

Skipping Items

It is possible to skip some items you don’t want to assign to local variables and only assign the ones you are interested in. Here is an example of how we can assign only the blue value to a local variable.

We used comma separation(,) to omit the first two items of the rgb array, since we only needed the third item.

Swapping Variables

One very nice application of array destructuring is in swapping local variables. Imagine you are building a photo manipulation app and you want to be able to swap the height and width dimensions of a photo when the orientation of the photo is switched between landscape and portrait. The old-fashioned way of doing this will look like the following.

The above code snippet performs the task, although we had to use an additional variable to copy the value of one of the swapped variables. With array destructuring, we can perform the swap with a single assignment statement. The following snippet shows how array destructuring can be used to achieve this.

Nested Array Destructuring

Just as with objects, you can also do nested destructuring with arrays. The corresponding item must be an array in order to use a nested destructuring array literal to assign items in it to local variables. Here is a quick example to illustrate this.

In the code above, we assigned hex variable and used nested array destructuring to assign to the red, green and blue variables.

Rest Items

Sometimes you may want to assign some items to variables, while ensuring that the remaining items are captured (assigned to another local variable). The new rest parameter syntax (...param) added in ES6 can be used with destructuring to achieve this. Here is a quick example.

Here you can see that after we assigned the first and third items of the rainbow array to red and yellow respectively, we used the rest parameters syntax (...param) to capture and assign the remaining values to the otherColors variable. This is referred to as the rest items variable. Note however that the rest parameter, if used, must always appear as the last item in the destructuring array literal otherwise an error will be thrown.

There are some nice applications of rest items that are worth considering. One of which is cloning arrays.

Cloning Arrays

In JavaScript, arrays are reference types and hence they are assigned by reference instead of being copied. So in the following snippet, both the rainbow and the rainbowClone variables point to the same array reference in memory and hence any change made to rainbow is also applied to rainbowClone and vice-versa.

The following code snippet shows how we can clone an array in the old-fashioned(ES5) way — Array.prototype.slice and Array.prototype.concat to the rescue.

Here is how you can use array destructuring and the rest parameter syntax to create an array clone.

Mixed Destructuring

There are cases when you are working with a pretty complex object/array structure and you need to assign some values from it to local variables. A good example would be an object with several deeply nested objects and arrays. In cases like this, you can use a combination of object destructuring and array destructuring to target certain parts of the complex structure as required. The following code shows a simple example.

Destructured Function Parameters

Destructuring can also be applied on function parameters to extract values and assign them to local variables. Note however that the destructured parameter cannot be omitted (it is required) otherwise it throws an error. A good use case is the displaySummary() function from our initial example that expects a student object as parameter. We can destructure the student object and assign the extracted values to local variables of the function. Here is the example again:

Here we extracted the values we need from the student object parameter and assigned them to local variables: name, maths, english and science. Notice that although we have specified default values for some of the variables, if you call the function with no arguments you will get an error because destructured parameters are always required. You can assign a fallback object literal as default value for the student object and the nested scores object in case they are not supplied to avoid the error as shown in the following snippet.

Conclusion

In this tutorial, we have explored the ES6 destructuring syntax and various ways we can utilize it in our code. If you are already pretty familiar with JavaScript destructuring, you may have learnt a few new stuffs as well. Although we used the rest parameter syntax at several points, it is worth noting that there is still more you can achieve with rest parameters. You can check Spread Syntax and Rest Parameters for more details.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

ES6 Destructuring: The Complete Guide was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

Few years back, while working on some PHP applications, I always saw myself needing to generate random strings or numbers to use in a database field, or to use as a random filename or random token, the list goes on. Usually, I would create function libraries to handle that for me. But then, I thought I should just create a package that handles all those functionalities, and then I can plug it into my PHP application if I need it. That’s how the Keygen package came to be.

Keygen is a PHP package for generating simple random character sequences of any desired length. It ships with four generators, namely: numeric, alphanumeric, token and bytes. It has a very simple interface and supports method chaining — making it possible to generate simple random keys with just one line of code.

What you will love about Keygen

Most PHP frameworks ship with built-in helpers or libraries to handle random string generation but here are a few reasons and use cases you should consider using the Keygen package:

• Expressive Interface: Method chaining makes it very easy to generate random keys with just one line of code.
• Saves Time: You may save yourself some more time trying to reinvent the wheel (implement your own random key generation logic).
• Seamless Key Affixes: It’s very easy to add a prefix or suffix to the random generated string.
• Key Transformations: You can process the random generated string through a queue of callables before it is finally outputted.
• Key Mutations: You can control manipulations and mutations of multiple Keygen instances.
• Bulk Key Generation: The next release (currently on alpha) adds functionality to generate multiple keys at once.

I will recommend you subscribe to the Keygen repository on GitHub to get development updates and know when new releases roll-out. Feel free to bring in your contributions to the project.

gladchinda/keygen-php

Getting Started with Keygen

Keygen is available on the Packagist repository and can be installed as a dependency for your project using Composer.

composer require gladcodes/keygen

If you want to try out the latest development version v1.2.0-alpha , you can install it with the the following command:

composer require gladcodes/keygen dev-v1.2.0-alpha

Then in your project you can do something like this:

Using Key Affixes and Transformations

The Keygen package provides two methods: prefix() and suffix(), for adding affixes to the beginning and/or end of generated keys. Each method takes a string as the first parameter which specifies the affix.

When affixes are specified in a generator, the length of the generated key includes the string length of the affixes (inclusive affixes). This behaviour can be controlled by passing an optional boolean value as the first parameter of the generate() method. The value truedisables inclusive affixes. If the boolean value is omitted, it defaults to false (enables inclusive affixes). Here is a simple demonstration.

The Keygen package also allows for one or more transformations to be applied on keys before they are generated. A transformation is simply a callable that can take the generated key as the first argument and returns a string. Each transformation is executed on the generated key in the same order they are specified before the key is returned. Here is a simple example.

Helpful Resources

You can get more help on how to use the Keygen package by checking the Usage Guides and the Documentation for the current stable release. If you are trying out the latest development version v1.2.0-alpha to experiment with new features like: enhanced expressive syntax, bulk key generations, random length keys, improved key mutations, improved key transformations, etc then you can checkout the Docs for detailed information.

For Laravel developers, this article will help you get started with using the Keygen package in your Laravel applications.

Laravel Random Keys with Keygen