Array to Object es6 javascript

Question

I am trying to see if there is a smaller way of converting an array to an object in es6. ( I do not have to worry about cross-browser )

I currently have:

function (values) // values being an array.
{   
    let [videos, video_count, page] = values;
    let data = { videos, video_count, page };
    someFunctions(data);
    moreFunctions(data);
}

But I was wondering if it's possible to cut out the first line of the function, let [videos....] part. And somehow inline do the conversion.

I have read through mozilla: Destructuring assignment but I could not see it there. (but I may have understood it wrong) and I am really not clever enough to understand ECMA: ES6 Spec.

I suspect it is not possible and the above is already the simplest I can make it. But if I can get away with not creating the videos, video_count & page tmp variables I would be happier.

Could always do it the old-fashioned way: var data = {videos:values[0], video_count:values[1], page:values[2]}; — Niet the Dark Absol
– Niet the Dark Absol, Commented Oct 13, 2016 at 10:01
It was something I had considered, but wanted to see if there was a es6 way. There seemed to be a way to do almost all of what I wanted, I guess I found a more niche use case. — WORMSS
– WORMSS, Commented Oct 13, 2016 at 10:09
Well, either way you have to name your property values, they won't come out of nowhere. — Niet the Dark Absol
– Niet the Dark Absol, Commented Oct 13, 2016 at 10:12

Mulan · Accepted Answer · 2016-10-13 12:46:18Z

6

You can destructure right in the function parameters

function myFunc([ videos, video_count, page ])
{   
    let data = { videos, video_count, page };
    someFunctions(data);
    moreFunctions(data);
}

myFunc(values);

I do a lot of data abstraction using this technique

// basic abstraction
const ratio = (n, d) => ({n, d});
const numer = ({n}) => n;
const denom = ({d}) => d;

// compound abstraction using selectors
const ratioAdd = (x,y) => ratio(
  numer(x) * denom(y) + numer(y) * denom(x),
  denom(x) * denom(y)
);

// or skip selectors if you're feeling lazy
const printRatio = ({n,d}) => `${n}/${d}`;

console.log(printRatio(ratioAdd(ratio(1,3), ratio(1,4)))); //= 7/12

You seem hell-bent on somehow making the code shorter, so here you go. In this case, "making it shorter" means making it longer first.

// Goal:
obuild(keys,values) //=> ourObject

Generic procedures zip, assign, and obuild should give us what we need. This is vastly superior to @CodingIntigue's answer as it's not one big function that tries to do all of the tasks. Keeping them separate means reducing complexity, and increasing readability and reusability.

// zip :: [a] -> [b] -> [[a,b]]
const zip = ([x,...xs], [y,...ys]) => {
  if (x === undefined || y === undefined)
    return [];
  else
    return [[x,y], ...zip(xs,ys)];
}

// assign :: (Object{k:v}, [k,v]) -> Object{k:v}
const assign = (o, [k,v]) => Object.assign(o, {[k]: v});

// obuild :: ([k], [v]) -> Object{k:v}
const obuild = (keys, values) => zip(keys, values).reduce(assign, {});

let keys = ['a', 'b', 'c'];
let values = [1, 2, 3];

console.log(obuild(keys,values));
// { 'a': 1, 'b': 2, 'c': 3 }

edited Oct 13, 2016 at 12:46

answered Oct 13, 2016 at 10:59

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

WORMSS Over a year ago

This still ends up with tmp variables? Though values is now gone, the three I was mainly trying to remove still exist.

CodingIntrigue Over a year ago

This is vastly superior to @CodingIntigue's answer - Ouch. You're not wrong though, much more readable.

Mulan Over a year ago

@CodingIntrigue I truly mean no harm by it; I'm in the middle of a really annoying task and otherwise probably would've worded that more tactfully.

CodingIntrigue Over a year ago

@naomik No offence taken, it's not an incorrect statement!

WORMSS Over a year ago

@naomik FYI, I went with your destructuring within the function arguments in the end. It looked the neatest so far. Thank you very much.

CodingIntrigue · Accepted Answer · 2016-10-13 10:27:00Z

3

With the given properties and names you have, that's probably the shortest way to achieve your desired result.

However, if you had more fields, you could use reduce to avoid repetition. It's not as readable as the destructuring though:

let data = values.reduce((prev, val, index) => Object.assign(prev, {[["videos", "video_count", "page"][index]]: val} ), {});

You could then abstract that out into a generic function:

const values = ["test1","test2","test3"];
const mapArrayToObject = (array, fields) =>
  array.reduce(
    (prev, val, index) => Object.assign(prev, { [fields[index]]: val } ),
    {}
  );
const data = mapArrayToObject(values, ["videos", "video_count", "page"]);
console.log(data);

answered Oct 13, 2016 at 10:27

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Collectives™ on Stack Overflow

Array to Object es6 javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related