We Keep Coding

Why is undefine for the destructing variables

Whay the values of destructing variables are undefine?
I also referenced in "..developer.mozilla.org", but, what is wrong?
here is my javascript code snippet =>
let myid, myname, myage;
// let person = [1, 'Kyaw Kyaw', 25];
// [myid, myname, myage] = person;
({ myid, myname, myage } = { id: 1, name: "Kyaw Kyaw", age: 25 });
console.log(myid);
console.log(myname);
console.log(myage);
When I got output for these variables, they are all 'undefine'!
What is wrong? Very interesting!!

Destructuring objects is based on the name of the variable and the property, not the order.
myid is a different name to id so it doesn't match.
yourobject.myid is undefined.
If you want to store the value in a variable name that doesn't match the property name, then you have to specify that explicitly with the format: property_name: variable_name
const my_object = { id: 1, name: "Kyaw Kyaw", age: 25 };
console.log(my_object.myid);
let { id: myid, name: myname, age: myage } = my_object;
console.log(myid);
console.log(myname);
console.log(myage);

How can i get both object length together from chain of object

Say I create a Object as follows
const myObj1 = {
firstName: "Shaheb",
lastName: "Ali",
professions:"Web Developer"
}
And create another object with the above object to add as a prototype object
const myObj2 = Object.create(myObj1, {
age:{
value:33
},
edu:{
value: "MBA"
}
});
now I want to count length of both object together, how can i?

I understand you want to get count of all keys in your object(s). As there is no length property available for objects (only for arrays), you should use Object.keys(), which returns an array with all keys:
const myObj1 = {
firstName: "Shaheb",
lastName: "Ali",
professions:"Web Developer"
}
Object.keys(myObj1).length; // would return '3'
I believe that instead of Object.create(), you actually want to use Object.assign(), which will assign all keys from myObj1 to myObj2:
const myObj1 = {
firstName: "Shaheb",
lastName: "Ali",
professions:"Web Developer"
}
const myObj2 = {
age:{
value:33
},
edu:{
value: "MBA"
}
}
Object.assign(myObj2, myObj1);
document.write(Object.keys(myObj2).length + '<br>'); // return '5'
document.write(Object.keys(myObj1).length); // return '3'

If I understand the OP goal:
const myObj1 = {
firstName: "Shaheb",
lastName: "Ali",
professions:"Web Developer"
}
const myObj2 = {
age:{
value:33
},
edu:{
value: "MBA"
}
};
const result = {...myObj1, ...myObj2};
console.log(result);
const length = Object.keys(result).length;
console.log(length);
{ firstName: 'Shaheb',
lastName: 'Ali',
professions: 'Web Developer',
age: { value: 33 },
edu: { value: 'MBA' }
}
5

const obj = Object.create(myObj1, myObj2);
create prototyping object looks like below
{age: 33, edu: "MBA"}
age: 33
edu: "MBA"
proto:
firstName: "Shaheb"
lastName: "Ali"
professions: "Web Developer"
proto: Object
but assigning a object is like a combining 2object into one. is this not possible to get the length from plan object and prototyping object together?
but your ans was awesome, help me a lot to make it better understand. if it is not possible then i will follow your suggestions.

Loop over an object

I'm decoding an object and so far I got it working. Let's say I have this object:
var person = [{
firstname: "Mike",
lastname: "123ñññ"
age: 20
}]
So in order to decode &ntilde and render ñ, I'm simply doing this:
new DOMParser().parseFromString(person[0].lastname, "text/html").documentElement.textContent;
and this will render the value
ñññ
which is what I want, so it will look like this:
lastname: "ñññ"
However, the issue that I'm facing is that I need to decode values for each property in the object because I may get those special characters for firstname or other properties. So my question is how to decode property values on an object assuming that the object may look like this:
var person = [{
name: "Mike",
lastname: "123ñññ"
age: 20,
employeer: {
name: 'ABC Company ñê',
supervisors:[
{
name: 'Steveä',
code: 'è468'
}
]
}
}]
NOTE:
I don't need help on decoding that values of each property on my object, since I'm already doing that, I just need to come up with a recursive function that will do that on a nested object

I think a recursive decode using DOMParser is a good idea. Here's an in-place transformer. Perform a deep copy first and then transform in-place if you prefer.
var person = [{
name: "Mike",
lastname: "123ñññ",
age: 20,
employer: {
name: 'ABC Company ñê',
supervisors: [
{
name: 'Steveä',
code: 'è468'
}
]
}
}];
console.log(person);
function htmlDecode(input)
{
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
function fix(obj) {
for (let prop in obj) {
switch (typeof obj[prop]) {
case 'object':
fix(obj[prop]);
break;
case 'string':
obj[prop] = htmlDecode(obj[prop]);
break;
}
}
}
fix(person);
console.log(person);

in functional languages there are libraries to recursively walk tree scructures. In clojure there is the zipper and walk for example.
you could write it yourself but it will quickly get complicated so I suspect using JSON.stringify + parse would give you what you need. Both functions take second argument that's replacer and reviver respectively that allow you to intercept the transformations and alter the values.
Here is example from the official documentation:
function replacer(key, value) {
// Filtering out properties
if (typeof value === 'string') {
return undefined;
}
return value;
}
var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7};
JSON.stringify(foo, replacer);
// '{"week":45,"month":7}'

Try this:
function decodeObject(obj){
if(typeof obj == 'object'){
var text = JSON.stringify(obj),
div = document.createElement('div');
div.innerHTML = text;
obj = JSON.parse(div.childNodes[0].nodeValue);
}
return obj;
}
var person = decodeObject([{
name: "Mike",
lastname: "123ñññ",
age: 20
}]);
console.log(person);

Updating javascript object property?

I have a structure like the following:
skillet.person = {
name: {
first: '',
last: ''
},
age: {
current: ''
},
birthday: {
day: '',
month: '',
year: ''
}
}
I was wondering how I would update these values ? i.e. I though the following was correct
skillet.person.name.push({ first: 'blah', last: 'ha'});
but it's wrong ? How can I fix this ?

Using ES7+ syntax and a functional approach:
const new_obj = { ...obj, name: { first: 'blah', last: 'ha'} }

On recent browsers with ECMAScript 2015, you can do:
Object.assign(skillet.person.name, { first: 'blah', last: 'ha'});
which will preserve any existing attribute not listed in the right object.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
[EDIT] With ES7, you can do even shorter (but is it clearer?...):
{...skillet.person.name, ...{ first: 'blah', last: 'ha'}};
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

As #ramon-diogo wrote with ES7+
I like to update nested values like:
let user = {
name: {
first: 'john',
last: 'smith'
},
age: 18,
city: 'new york'
}
const age = 20;
user = {...user, age}
console.log(user.age)
// output: 20
const newData ={
age: 22,
city: 'san francisco'
};
user = {...user,...newData}
console.log(user.name.first)
// output: john
console.log(user.age)
// output: 22
console.log(user.city)
// output: 'san francisco'

skillet.person.name.first = "blah"
skillet.person.name.last = "ha"
or
skillet.person.name = {first : "blah", last : "ha"}

If you want to mix an object into another one, you can use jQuery's deep extend function. "Deep" means that it does not overwrite name with the new object, but rather overwrites the properties inside such an object.
$.extend(true, skillet.person, {
name: {
first: 'updated'
},
birthday: {
day: 'updated',
year: 'updated'
}
});
Now, skillet.person has the appropriate properties updated, while the other properties are untouched.

push is a method of Arrays that adds a new item to an array.
If you want to replace the value then:
skillet.person.name = { … };
If you want to store multiple (full) names in the object, then you'll need the property to hold an array of objects instead of a single object.

I think that is simpler
let skillet = {
person: {
name : {
first: '',
last : ''
},
age : {
current: ''
},
birthday: {
day : '',
month: '',
year : ''
}
}
};
let update = {
person: {
name: {
first: 'blah',
last : 'ha'
}
}
};
let result = Object.assign(skillet.person, update.person);
console.log(result);

skillet.person.name.first = "blah"
skillet.person.name.last = "ha"
The easiest way.

skillset.person.name = {};
This is the easiest way to assign value to the property of an object.

how do add to a key value to javascript object

I am trying to learn JS. It seems simple but I am not sure how to do this.
having this javascript object based on this good
thread
var people = {
1: { name: 'Joe' },
2: { name: 'Sam' },
3: { name: 'Eve' }
};
How do I add the following value 4: { name: 'John' }
To get name Eve I write
people["1"].name

Assign the anonymous object to it the way you would any other value.
people["4"] = { name: 'John' };
For what it's worth, since your keys are numeric you could also use zero-based indices and make people an array.
var people = [ { name: 'Joe' },
{ name: 'Sam' },
{ name: 'Eve' } ];
and
alert( people[2].name ); // outputs Eve
people[3] = { name: 'John' };

I think people should be an array :
var people = [
{ name: 'Joe' },
{ name: 'Sam' },
{ name: 'Eve' }
];
as the keys are integers, so you can add a person by :
people.push({name:'John'});
You can acces to the people by doing :
var somebody = people[1]; /// >>> Sam