Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Type Conversion with JavaScript Arrays

By David Walsh on May 7, 2019

JavaScript's loose nature allows developers to employ amazing tricks to do just about anything you'd like. I've detailed how you can filter falsy values in arrays using a filter(Boolean) trick, but reader David Hibshman shared another trick for typecasting array values the same way.

To typecast an array of elements, you can use map and the desired return type:

["1", "9", "-9", "0.003", "yes"].map(Number);
// [1, 9, -9, 0.003, NaN]

I love this trick but you could argue the code itself could be considered confusing, so wrapping it a helper function would be helpful:

function arrToNumber(arr) {
  return arr.map(Number).filter(Boolean);
}

Validation could and should probably be more rigorous but basic validation through typecasting might help you!

Recent Features

By David WalshJuly 28, 2013
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
By David WalshMay 18, 2011
CSS Gradients
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

By David WalshJanuary 6, 2010
Create a Simple Slideshow Using MooTools, Part III: Creating a Class
In my previous two slideshow posts, Create a Simple Slideshow Using MooTools and Create a Simple Slideshow Using MooTools, Part II: Controls and Events, I showed you how to create a slideshow using...
By David WalshAugust 19, 2010
Image Reflections with CSS
Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...

Discussion

jzrskc

["0", "9", "-9", "0.003", "yes", true, false, undefined, null].map(Number);
// [0, 9, -9, 0.003, NaN, 1, 0, NaN, 0]

["0", "9", "-9", "0.003", "yes", true, false, undefined, null].map(parseFloat)
// [0, 9, -9, 0.003, NaN, NaN, NaN, NaN, NaN]

MKM
The .filter(Boolean) part also sees the zeros as booleans and removes those numbers.
BryanYang
very useful!

Type Conversion with JavaScript Arrays

Recent Features

Create a CSS Cube

CSS Gradients

Incredible Demos

Create a Simple Slideshow Using MooTools, Part III: Creating a Class

Image Reflections with CSS

Discussion