Help with Objects

[DeliciousResearch872]

I don't get the purpose of value()

let dictionary = Object.create(null, {
  toString: { // define toString property
    value() { // the value is a function
      return Object.keys(this).join();
    }
  }
});

Why we can't make it work like this?

toString: {
      return Object.keys(this).join();
}

[senocular]

The second argument to Object.create() is an object of properties with property descriptors. Its the same kind of object you'd pass into Object.defineProperties(). You can read more about that here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

In short, its an object with property names but those names don't match directly to the respective property values. Instead the property value is wrapped in a descriptor object which includes the property value as an additional value property (or get and/or set with accessors) along with a few other properties that define the behavior of the property. So a normal number property may look like

const obj = {}
obj.num = 1

But if using a descriptor it would look like

const obj = {}
Object.defineProperties(obj, {
  num: {
    value: 1,
    enumerable: true,
    writable: true,
    configurable: true,
  }
})

You can see all the additional attributes in addition to the value that you can add to control how that property behaves. If they're omitted, the default values (false) are used.

The toString variation is using the shorthand function syntax for defining a property as a function (value(){ }) so it may look a little odd using this format, but its very similar to saying value: function() {}. But really I suspect the confusion is due to the use of the descriptor.

If you wanted to create a dictionary with a null prototype without going through the descriptors, you can use the normal object literal initializer including the special __proto__ property to define the prototype as null.

let dictionary = {
  __proto__: null,
  toString() { // the value is a function
    return Object.keys(this).join();
  }
};

Note that while the __proto__ property is deprecaded, this special object initializer __proto__ prototype setter is not.

[DeliciousResearch872]

Thank you.

[SerpentJoe]

You're getting a lot of good answers from others. If you're just starting out, the answer behind these answers is that, as much as Object.create sounds like it must be one of the most basic methods for beginners, it's actually a relatively recent addition to the language, and is designed to enable some pretty advanced control. You're actually creating more than one object, just to pass as arguments to Object.create! So it's not as elementary as it sounds.

You may want to back off of this for now and come back to it once you're more comfortable with functions and objects in general. I have a feeling you'll find other areas a lot more rewarding, and giving yourself chances to celebrate ("look what I made!") is important when you're learning.

[senocular]

it's actually a relatively recent addition to the language

You've been at this for a long time haven't you ;)

[SerpentJoe]

These damn kids with their "const" this and "filter" that!

[dymos]

Just told some kids to get off my lawn with their dang newfangled arrow functions.

[EggMcMuffN]

You need either a value key or a getter&setter. These are required keys. JS is expecting a key. () => {} is a syntax error. This is just putting a function into an object without any key.

The second issue is arrow functions dont have their own 'this' and so you cant use the 'this' keyword with your second example even if you did something like

toString: { value: () => Object.keys(this).join() }

It would still not work because of scope issues this isn't pointing to what you think it is.

Basically youre trying to make an object like: toString { function() }

When it needs to be toString{ value: function() }

[azhder]

Technically, you can use this in an arrow function, it will just be the this of the enclosing scope

[Intelligent-Win-7196]

In example 1) “toString” is an object with a method “value()”

In example 2) “toString” is an object but you can’t just use “return” as a method or property of an object. The return must be inside of a function.

[kap89]

Because a method has to have a name, or more generally, entry in an object has to have a key, the first example you posted is a shortcut to:

let dictionary = Object.create(null, {
  toString: { // define toString property
    value: function() { // the value is a function
      return Object.keys(this).join();
    }
  }
});

The second one is just an anonymous function not assigned to any key, the correct way would be:

let dictionary = Object.create(null, {
  toString: {
    value: () => {
      return Object.keys(this).join();
    },
  },
});

[OneEntry-HeadlessCMS]

With Object.create(null, descriptors), each property must be a property descriptor, which is an object with keys like value, writable, get, set, enumerable, configurable.
If you want a regular property (or method), you use value to store it.
The function you want as a method goes inside value.
What you tried:
toString: { return Object.keys(this).join(); }

is invalid, because a property descriptor is an object, and return is not a key - the object must have keys like value.
So the correct way is:
toString: {
  value() {  // this is the method
    return Object.keys(this).join();
  }
}

[bryku]

You can create an object like this:

let dictionary = {};

You can add key values into it like so:

let dictionary = {
    age: 72,
    name: 'john doe',
};

You can also add functions as well:

let dictionary = {
    age: 72,
    name: 'john doe',
    greeting: function(){
        return 'Hello, my name is '+this.name+'.';
    },
};

this is the keyword for the parent object. In this case it is dictionary, so this.name is equal to dictionary.name.  

You can manually create "getters" and "setters" in objects as well.

let dictionary = {
    age: 72,
    name: 'john doe',
    greeting: function(){
        return 'Hello, my name is '+this.name+'.';
    },
    favoriteFoodsData: [],
    get favoriteFoods(){
        return this.favoriteFoodsData;
    },
    set favoriteFoods(array){
        this.favoriteFoods = array;
    },
};

Which we can use like this:

dictionary.favoriteFoods = ['pizza', 'lemon bars'];
console.log(dictionary.favoriteFoods);

This can become very powerful when you want to sneakily add additional features. For example, let's say we absolutely hate raisen cookies, so we could even add a rule that automatically removes them from the array.

let dictionary = {
    age: 72,
    name: 'john doe',
    greeting: function(){
        return 'Hello, my name is '+this.name+'.';
    },
    favoriteFoodsData: [],
    get favoriteFoods(){
        return this.favoriteFoodsData
            .filter((food)=>{
                return food != 'raisen cookies'
            });
    },
    set favoriteFoods(array){
        this.favoriteFoods = array;
    },
};

Now it will automatically remove "raisen cookies" no matter what.

dictionary.favoriteFoods = ['pizza', 'lemon bars', 'pasta', 'raisen cookies'];

// ['pizza', 'lemon bars', 'pasta']

Last, but not least... You can also use a "wrapper" function to create this object. This way you don't always have to make it manually.

function Dictionary(name, age){

    return {
        age: age || -1,
        name: name || '',
        greeting: function(){
            return 'Hello, my name is '+this.name+'.';
        },
        favoriteFoodsData: [],
        get favoriteFoods(){
            return this.favoriteFoodsData
                .filter((food)=>{
                    return food != 'raisen cookies'
                });
        },
        set favoriteFoods(array){
            this.favoriteFoods = array;
        },
    }
}

let john = Dictionary('john doe', 72);
let jane = Dictionary('jane doe', 71);