How to "dereference" an object?

Question

In JavaScript, how do you dereference an object returned by a function?

For example this:

var tmp = getTextProperties();
font   = tmp.font;
size   = tmp.size;
color  = tmp.color;
bold   = tmp.bold;
italic = tmp.italic;

PHP has the list() construct which does something similar:

list($font, $size, $color, $bold, $italic) = getTextProperties();

JS has destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment — Ramanlfc, Dec 05 '18 at 17:13
Possible duplicate of [Javascript equivalent of PHP's list()](https://stackoverflow.com/questions/1954426/javascript-equivalent-of-phps-list) — Eaten by a Grue, Dec 05 '18 at 17:15
based on your question, `getTextProperties()` returns an object, not an array. — Eaten by a Grue, Dec 05 '18 at 17:26
@billynoah Not a duplicate, for the reason you just stated - this question is about objects, not arrays. I'va also submitted edits to this question — markmoxx, Dec 05 '18 at 17:34
@markmoxx - imo, the dupe question asks the same question, though it's answers there do fail to address objects. I think there's more value in adding your answer there – which it looks like you've done and +1 for that. — Eaten by a Grue, Dec 05 '18 at 17:44

score 6 · Accepted Answer · answered Dec 05 '18 at 17:17

6

With ES6, you can destructure an object as follows:

var { font, size, color, bold, italic } = getTextProperties();

See JavaScript Destructuring assignment

answered Dec 05 '18 at 17:17

markmoxx

1,450
1
11
20

you should add this answer to the linked it - I don't believe it's mentioned there and this one's likely to get closed – Eaten by a Grue Dec 05 '18 at 17:26
@billynoah Thanks, just added it. – markmoxx Dec 05 '18 at 17:29
@billynoah I removed it, as I realised it's not asking the same question. In PHP's list() function, you specify the variable names you want to assign the values to. In JS's destructuring, you have to specify the variable names which **already exist** in the object you're destructuring. – markmoxx Dec 05 '18 at 17:54
@billynoah ...which is the definitive difference between dereferencing, and destructuring. – markmoxx Dec 05 '18 at 17:55
I see your point but not sure it's critical to either question. Since this one explicitly mentions "dereference" and asks for something similar to `list()` it seems like a dupe to me. – Eaten by a Grue Dec 05 '18 at 18:08
@markmoxx as of now (in the future!), we have new ways of destrcuturing. We can now rename and assign defaults in destructuring statements. Ponder this: `let obj = {a,: 5, b: 6, c: [7,8],d: {e: 9, f: 10}};` – Werlious Aug 13 '20 at 20:50

Werlious · Answer 2 · 2020-08-13T21:21:44.127

To add onto what @markmoxx said, as of now (form the future!), we have new ways of destructuring. We can now rename and assign defaults in destructuring statements. Ponder this:

let obj = {a,: 5, b: 6, c: [7,8],d:[9,10]e: {f: 11, g: 12}};

let {a: first, b: second, c: arr, d: [innerFirst, innerSecond], e: {f: objFirst, g: objSecond}, h = "default1", i: [defaultArr1 = "default2", defaultArr2 = "default3"], j: {k: objDefault1 = "default4"} } = obj;

console.log(first, second, arr, innerFirst, innerSecond, objFirst, objSecond, h, defaultArr1,defaultArr2, objDefault1);

// This outputs: 
5, 6, [7,8],9,10,11,12,"default1","default2","default3","default4"

So, now we have more control over destructuring assignments.

Edit: for congruence

PHP's list function is mostly for arrays (mostly). And at that, has some weird behavior (reverse assignment depending on php version, etc). Destructuring in javascript is different. Even with the renaming syntax above, you still need to know the object keys/array indices. Also (this may be a matter of preference but), destructuring in javascript has more power, in that arrays and objects can both be destructured, to any nested depth, while allowing you to rename and assign defaults. But be warned, because destructuring can easy get out of hand. Consider this example of over-zelous destructuring:


const NameView = ({context: { state: [ state, update ], id, display: {tag, size = 32, type = "text", style: { wrapper: outerouter = "card", content: innerouter = "content", banner: {wrapper: outerinner = "title",content: innerinner = "content"} } } } }) => (
    <div className={outerouter}>
        <input className={innerouter} type={type} maxlength={size} size={size} value={name} id={id} name={id} onChange={(e) => update(e.target.value)}/>
        <div className={outerinner}>
            <label for={id} className={innerinner}>{tag}</label>
        </div>
    </div>
)

How to "dereference" an object?

2 Answers2