How do I parse a string to number while destructuring?

Question

I am trying to experiment around destructuring assignment. Now I have a case which I trying to cop up with destructuring itself.

For example, I have an input like this:

let input = {latitude: "17.0009", longitude: "82.2108"}

Where latitude and longitude key values are strings, but I want to parse them into a number while destructuring.

let input = {latitude: "17.0009", longitude: "82.2108"}
let {latitude,longitude} = input

console.log(typeof latitude,typeof longitude)

I can see in babel repl that this takes a reference of an object and then access each key. So the above code is the same as:

"use strict";

 var arr = {
   latitude: "17.0009",
   longitude: "82.2108"
  };
 var latitude = arr.latitude,
     longitude = arr.longitude;

I want do something like using the destructuring syntax itself.

"use strict";

var arr = {
  latitude: "17.0009",
  longitude: "82.2108"
};
var latitude = Number(arr.latitude),
    longitude = Number(arr.longitude);

I am open to see some hacks too.

Update

I am able to come with up one hack with the , operator:

let arr = {latitude: "17.0009", longitude: "82.2108"}

let {lat,lng} = ({latitude,longitude} = arr, ({lat:+latitude,lng:+longitude}))

console.log(typeof lat, typeof lng)

On side note:- you must read Moritz Roessler's answer this is hacky but contains good knowledge and information

Answer 1

Destructuring is just a nice way to unpack properties from objects and arrays and assign them to variables. As the trasnpiled code in the question suggests, any kind of operation is not possible.

One hack would be to create 2 more variables (which don't exist in input) and set the default value to the number equivalent of the previously destrucutred properties:

let input = { latitude: "17.0009", longitude: "82.2108" }
let { latitude, longitude, lat = +latitude, long = +longitude } = input

console.log(typeof latitude, typeof longitude, typeof lat, typeof long)

The code approximately trasnpliles to this (Babel):

var latitude = input.latitude,
    longitude = input.longitude,
    lat = input.lat === undefined ? +latitude : input.lat,
    long = input.long === undefined ? +longitude : input.long;

It's just exploiting the order in which the variables are created and assigned property values. Again, this works only if there are no lat or long properties in input. Otherwise, it will fail the ternary condition and lat will be set to input.lat.

---

Something like this would be much easier to read though:

let { latitude, longitude } = input;
let lat = +latitude, 
    long = +longitude;

OR

let [ lat, long ] = [ +latitude, +longitude ]

Answer 2

You could destructure the values, take an array of the values and map the a new data type of the value and assign this values back to the variables.

let input = { latitude: "17.0009", longitude: "82.2108" },
    { latitude, longitude} = input;

[latitude, longitude] = [latitude, longitude].map(Number);

console.log(typeof latitude, latitude);
console.log(typeof longitude, longitude);

Answer 3

You could have a reusable function, like this below:

const numberInputs = input =>
    Object.keys(input).reduce((acc, val) => {
        acc[val] = +input[val];
        return acc;
    }, {});

and then reuse it across...

Then do:

let {latitude,longitude} = numberInputs(input);

console.log(typeof latitude,typeof longitude) //number //number

and get 17.0009 and 82.2108 as numbers...

This way you keep your original object also and make a copy... so you have both original and copy of the object which has numbers as values...

Answer 4

Whilst you cannot perform type conversion within the destructuring expression itself, a possible alternative/workaround could be to destructure the properties within the arguments of a function, and then return an array with the new types within it.

For example, something like the following:

const input = {latitude: "17.0009", longitude: "82.2108"}
const [lat, lng] = (({latitude:a, longitude:b}) => [+a, +b])(input);

console.log(typeof lat, typeof lng); // number number

However, for something like this, I wouldn't use destructuring and probably would resort to regular dot notation:

const input = {latitude: "17.0009", longitude: "82.2108"}
const lat = +input.latitude;
const lng = +input.longitude;

console.log(typeof lat, typeof lng); // number number