How to use special characters (like hyphen) in destructuring assignment syntax? [duplicate] - javascript

This question already has answers here:
How to destructure object properties with key names that are invalid variable names?
(3 answers)
Closed 7 months ago.
I'm curious of why that seems impossible:
const {a, b, 'special-one'} = { a:1, b:2, 'special-one': 3 };
// output => missing : after property id
Will it be possible to find that syntax working in future ES versions ?
Thanks for your lights :)

Rename the variable within the destructure statement, you can't have a variable with a hyphen in it's name. You can rename using the syntax below, see MDN: Assigning to new variable names
A property can be unpacked from an object and assigned to a variable
with a different name than the object property.
const {
a,
b,
'special-one': specialOne
} = {
a: 1,
b: 2,
'special-one': 3
};
console.log(specialOne);

special-one can't be the variable name. So you need another name for that like specialOne. Use : after the key name for new variable name.
const {a, b, 'special-one':specialOne} = { a:1, b:2, 'special-one': 3 };
console.log(specialOne)
In the above case you have a plain string as key name. But if there is an expression you will need to use []
let keyName = 'special-one'
const {a, b, [keyName]:specialOne} = { a:1, b:2, 'special-one': 3 };
console.log(specialOne)

Related

How to get value from object using string of object path in typescript without using eval? [duplicate]

This question already has answers here:
Accessing nested JavaScript objects and arrays by string path
(44 answers)
Closed 29 days ago.
In JS/typescript, lets say I have an object like this
var obj = {
a: {
b:{
c:1
}
}
}
And I have a string "b.c". How can I evaluate this using only those variables and get the value 1 from the object without using hacks like eval since typescript would complain.
Thanks
It I understood you question, the keys are known, if so you can use the '[]' to access it :
const a = b.c
is the same thing as
const a = b['c']
but in the second case you can of course use a variable.
Applying this to your object, it would look something like this :
const obj = {
a: {
b: {
c: 1
}
}
}
const outerKey = 'a'
const middleKey = 'b'
const innerKey = 'c'
const value = obj[outerKey][middleKey][innerKey]
console.log(value)
Hope it helped you !

What is the difference between these types of destructuring [duplicate]

This question already has answers here:
Destructuring and rename property
(2 answers)
Closed 3 years ago.
I've seen this in a repository, but I'm not quite sure what is exactly happening. Is the var value replaced or is the child question of value taken from var data?
const { value: question } = data;
const { value } = data;
Destructuring properties of an object
const { value } = data;
creates a block-scoped constant named value, and assigns to it data.value.
It's identical to
const value = data.value;
Destructuring properties of an object under a different variable name
const { value: question } = data;
creates a block-scoped constant named question, and assigns to it data.value.
It's identical to
const question = data.value;
A property can be unpacked from an object and assigned to a variable with a different name than the object property.
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
Here, for example, var {p: foo} = o takes from the object o the property named p and assigns it to a local variable named foo.
MDN - Destructuring assignment

Access internal Property Name to Compute New Property in ES6 [duplicate]

This question already has answers here:
Self-references in object literals / initializers
(30 answers)
Closed 7 years ago.
I have object. I want to add properties but I want to compute the suffix for all properties in my object during definition.
var myObject = {
foo: "bar",
[ "prop_" + "Access foo property: foo" ]: 42
};
Below is my expected output:
{
foo: "bar",
prop_bar: 42
}
It's not the case that i'm unable to achieve it. i can able to achieve by the below snippet and its working fine but i want this to be done during declaration.
let myObject = {
foo: "bar"
};
myObject[ "prop_" + myObject['foo'] ] = 'hello'
Note to Reviewers: I have already reviewed the below questions.
Is there a shorthand for this in ES6/ES7?
ES6 Object Literal Property Value Shorthand
How to use ES6 computed property names in node / iojs?
ES6 Computed (dynamic) property names
I feel that there will be better solution than above approach, below are my questions.
What is best approach for this scenario?
How many ways we can achieve this ?
Its not possible during declaration ?
You can create factory function to do this, e.g.:
const create = v => ({
foo: v,
["prop_" + v]: 42
});
let myObject = create("bar");
or inline:
let myObject = (v => ({
foo: v,
["prop_" + v]: 42
}))("bar");

How can an object's property access other property? [duplicate]

This question already has answers here:
Self-references in object literals / initializers
(30 answers)
Closed 8 years ago.
Why can't i do something like this in javascript?
var big = { a:1, b:2, c:3, d:big.a }
How can an object's one property access another?
//--------------------------------edited as below ----------------------------------
Thanks for all the answers, now i found another question:
when i do this:
var big = {
a : 1,
b : 2,
c : 3,
d : this.a
}
console.log(big.d);
It's undefined
However, when i do this:
var big = {
a : 1,
b : 2,
c : 3,
d : function(){console.log(this.a)}
}
big.d();
It logs out 1
I wonder what's going on here, is it because it is a function in the second code somehow makes the 'this' accessible?
Thanks.
you can do this
var big = { a:1, b:2, c:3};
big.d = big.a;
In your code when you are using d:big.a it is still not defined i'e. big is not defined
Try this
var big = new function ()
{
this.a = 1;
this.b = 2;
this.c = 3;
this.d = this.a;
}
alert(big.a);
alert(big.b);
alert(big.c);
alert(big.d);
Hope this helps.
Since the variable big to get big.a hasn't been declared yet when you actually declare big. In this case you should inject the object d afterwards.
var big = { a:1, b:2, c:3 };
big.d = big.a;
You can't do it in the object literal. This is because the right hand side of the = is evaluated before the assignment takes place. Javascript first creates an object with the properties given and then assigns it to the variable. Therefore, at the point when you attempt to access big.a, the assignment has not taken place, so big is undefined and you get an error because you cannot access the properties of undefined.
You need to assign big.d after the assignment:
var big = { a:1, b:2, c:3};
big.d = big.a;

How to Add an Object Literal to Another Object Literal in JavaScript [duplicate]

This question already has answers here:
How can I merge properties of two JavaScript objects dynamically?
(69 answers)
Closed 9 years ago.
I have an object literal, a:
a = {foo: 'foo'};
And I want to get b, the combination of a and {bar: 'bar'}:
b = {foo: 'foo', bar: 'bar'};
How can I do with without writing out all of the properties of a? i.e:
b = a + {bar: 'bar'};
And no, I do not want to have a be a property itself of b, as shown here:
b = {a: a, bar: 'bar'};
You can iterate through the properties of a and add them to b, like this
for (var key in a) {
b[key] = a[key];
}
If you want to add only the properties specific to a (properties which are not inherited), you can do it like this
for (var key in a) {
if (a.hasOwnProperty(key) {
b[key] = a[key];
}
}
As S McCrohan points out, if you are using jQuery, you can use jQuery.extend method to do the same.

Categories

Resources