/why-object-literals-in-javascript-are-cool/ about dmitripavlutin.com-comments HOT 26 OPEN

Comment written by iminhui on 07/22/2016 08:19:28

var myObject = {  
  myString: 'value 1',
  get myNumber() {
    return this.myNumber;
  },
  set myNumber(value) {
    this.myNumber = Number(value);
  }
};
myObject.myString; // => 'value 1'  
myObject.myNumber = '15';  
myObject.myNumber; // => 15  

This got a `RangeError: Maximum call stack size exceeded` in Node and Chrome console, what's wrong?

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/22/2016 09:28:20

Yep. It was a small typo. Please see the updated version.

from dmitripavlutin.com-comments.

Comment written by iminhui on 07/22/2016 09:36:54

I've seen, thx.

from dmitripavlutin.com-comments.

Comment written by Craig Bilner on 07/22/2016 19:24:13

Perhaps good to mention __proto__ is effectively deprecated and is only required for the browser environment?

http://www.ecma-internation...

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/23/2016 13:03:48

Hi Craig,
Good point, thanks for mentioning.

from dmitripavlutin.com-comments.

Comment written by Watan Deep on 07/23/2016 21:53:00

Another great article. Extremely informative. I haven't seen a lot of people mention these techniques. (specifying prototype within the literal)

from dmitripavlutin.com-comments.

Comment written by Luis Felipe Lopez G. on 07/23/2016 23:14:05

I love the rest spread for objects, and didn't know you could do that with Symbol.iterator, great article :)

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/24/2016 05:18:11

Thanks Watan!

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/24/2016 05:21:17

Agreed, I think spread ... is a great feature for arrays and objects (in draft).

from dmitripavlutin.com-comments.

Comment written by mechrisreed on 07/25/2016 16:20:06

@rainsoft:disqus You have a very deep understanding of how prototypical inheritance works. Have you looked at declarative patterns? ES2015+ have given us tools to rephrase our programs with immutability and equational reasoning.

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/25/2016 16:38:48

Thanks @meChrisReed:disqus. I like the immutability concept and especially to get rid of the functions with side effects.

from dmitripavlutin.com-comments.

Comment written by KhanMaytok on 07/25/2016 18:25:20

Where is the image from? :3

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/26/2016 06:30:53

Hey Giancarlo. The image is taken from here (author: Bradley Wright).

from dmitripavlutin.com-comments.

Comment written by WebReflection on 07/27/2016 08:10:55

`__proto__` is Annex B and sort of deprecated, although your usage is the only one most developers agree makes sense. You should mention if you `"__proto__"` that doesn't do what unquoted version does. On top of that, `super` within objects does not work cross browser. You should probably mention these facts too.

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/27/2016 09:50:06

Thanks for mentioning the details!
The __proto__ and quoted "__proto__" do the same thing in the object literal: set the prototype object.
However if using a computed property ['__proto__'] the new object will receive an owned property '__proto__' and object's prototype is not changed. This verification is [indicated] in the spec:

If propKey is the String value "__proto__" 
  and 
if IsComputedPropertyKey(propKey) is false

from dmitripavlutin.com-comments.

Comment written by WebReflection on 07/27/2016 11:30:10

you are forgetting `JSON.parse('{"__proto__":null}')` which is why I've said it's important to set `__proto__` not as string when that's not meant to be a dictionary. Using a quoted version for any other reason beside having a dictionary is risky and I wouldn't suggest it at all.

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/27/2016 11:41:51

You're right. Setting the property without quotes of course is less chars to type 😃 and more secure.

from dmitripavlutin.com-comments.

Comment written by sminutoli_etermax on 07/27/2016 12:18:46

Hi Dmitri, your statement about `shorthand method definition` (AKA `concise methods`) isn't accurate... the `concise methods` ARE anonymous, so you can't make recursion although you get the name when debugging...

Try this one... http://jsbin.com/zacaganimi...

Kyle Simpson explains this in deep here https://github.com/getify/Y...

from dmitripavlutin.com-comments.

Comment written by sminutoli_etermax on 07/27/2016 12:28:00

About the `super calls` sections, you don't need to use `super` at all in order to get the benefits of delegation... you can achieve the same goal using `this.sumArray`. It's worth using `super` if you're overriding a given method, so you can forward the message to the prototype.

An example here... http://jsbin.com/jacopotesa...

As you can see, using the unstable `__proto__` setter leads to errors if you change the prototype chain, it would be nice to mention this gotchas in the article, Object.setPrototypeOf ISNT equals to the "deprecated" __proto__

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/27/2016 12:48:44

Hey @sminutoli_etermax:disqus,
The concise method use anonymous function expression to create the function objects, so by default this type of expression does not setup a name. However ES2015 does setup `name` property on the function object for concise methods (which makes it named), for an easier debugging.
Kyle mentions this here:

Even though the de-sugaring [for concise methods] uses an anonymous function 
expression which normally would have no name in stack traces, concise methods are 
specified to set the internal name property of the function object accordingly, so stack 
traces should be able to use it (though that's implementation dependent so not 
guaranteed).

I see the situation here a bit clumsy, but since the function object has a name, I do not consider it anonymous.

The self reference (used for recursion, etc) is another case, specific to named function expressions. Yes, the concise methods do not have that.

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/27/2016 12:49:46

Yes, my example does not reflect this important moment. I will update it.
Thank you!

from dmitripavlutin.com-comments.

Comment written by Jan-Stefan Janetzky on 07/28/2016 06:49:11

perhaps good to mention that using get and set inside json is bad practice since its not available cross browser.
one might want to check this out:
(even works in IE)

var yourObject = {};
var temperature = undefined;
var archive = [];

Object.defineProperty(yourObject, 'temperature', {
  get: function() {
    console.log('get!');
    return temperature;
  },
  set: function(value) {
    temperature = value;
    archive.push({ val: temperature });
  }
});

more on that over there: https://developer.mozilla.o...

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/28/2016 08:02:05

Hey Jan-Stefan,
Nice tip. If dealing with JSON, object should be simply plain: no getter/setter, __proto__, etc.

from dmitripavlutin.com-comments.

Comment written by KhanMaytok on 09/30/2016 16:03:28

Many thanks, it is great

from dmitripavlutin.com-comments.

Comment written by Наиль Шайхинуров on 10/04/2018 13:02:17

By the way combining shorthand method definition syntax with computed property names you can shorten

[Symbol.iterator]: function *() { }

and make an iterable object just like below:

var object = {  
   ...
   * [Symbol.iterator]() {
     ... // yield is available here
   }
}

from dmitripavlutin.com-comments.

Comment written by Dmitri Pavlutin on 07/05/2019 17:06:06

Good idea!

from dmitripavlutin.com-comments.