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

It's not possible - no operations can be performed on a property during destructuring. If you use destructuring to extract a property into a variable, that variable will be === to the original property value.

(of course, you could transform the original object's values to Number prior to destructuring, but that's not the same thing)

Answer 5

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

Answer 6

There is a super hacky way of doing this using a getter defined on String.prototype as a helper function.

_{(You probably don't want to do that)}

Object.defineProperty (String.prototype, "asNumber",{
   get: function () { return +this}
});
let input = {latitude: "17.0009", longitude: "82.2108"}
let {latitude:{asNumber:latitude},
     longitude: {asNumber:longitude}} = input

console.log (latitude, longitude)

Let's break that down into simpler steps.

//Extending the `String` prototype means every string 
//will have access to the defined property  via 
//its prototype, so
String.prototype.foo = function () {return `${this}.foo\`} 
//means you can now call foo() like any other string method
"bar".foo() //"bar.foo"`

//A getter allows you to define a function that acts 
//as a property which will be executed upon access. 
let obj = {get getter () {console.log ('Hi');}}
obj.getter // Hi

//Combine those two and you can call functions by 
//accessing properties of strings. 
Object.defineProperty (String.prototype, "asNumber",{
   get: function () { return +this}
});

//Now that you have a property that is available at 
//every string - and make it execute a function; you 
//can convert a string to a number, simply by
//accessing a property
"42".asNumber //42

//To make that work with destructuring assignment, 
//you need to know about another handy feature. You 
//can assign destructured properties to a new 
//variable name.
let {a:b, b:a} = {a:'a', b:'b'};
a; //'b'
b; //'a'

//Since you can nest destructuring assignments, and 
//every string implicitly has a 'asNumber' property, 
//you can destructure that property as well. 

let {lat: {asNumber}} = {lat: "42"};
asNumber //42

//The last thing to know is, there's apparently 
//nothing wrong with using an existing variable as 
//new name for a destructured property. So you can 
//just use the `asNumber` property from the 
//prototype and assign it to the same variable  
//you destructured from the object.
let {lat: {asNumber: lat}} = {lat: "42"};
lat; //42

_{There is nothing wrong with using the same name because only the last variable name will be introduced in the let block's scope}

Answer 7

If you don't mind using lodash, you can try this:

import { mapValues } from 'lodash';

const input = {latitude: "17.0009", longitude: "82.2108"}
const {latitude, longitude} = mapValues(input, Number);

Answer 8

I would probably set things up so that each "object type" I cared about had a corresponding "parser type": an object with the same keys, but whose values are the appropriate parsing functions for each member.

Like so:

"use strict";

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

function Parser(propParsers)
{
    this.propParsers = propParsers;
    this.parse = function (obj) {
        var result = {};
        var propParsers = this.propParsers;
        Object.keys(obj).forEach(function (k) {
            result[k] = propParsers[k](obj[k]);
        });
        return result;
    };
}

var parser = new Parser({
    latitude: Number,
    longitude: Number
});

let {latitude,longitude} = parser.parse(arr);
console.log(latitude);
console.log(longitude);