🔸property

has a name, a value and 3 attributes.

JS ⟩ value ⟩ object ⟩ property

a property has a name, a value, and 3 attributes.

there are two types of properties：
- (data property) stores a value that is not a function.
- (function property) stores a function (method/getter/setter/).

// defining/creating properties
{ name: value }    // object literal
obj.prop = value    // create property 'on the fly'

// accessing properties
obj . prop    // `prop` must be an identifier
obj [ prop ]  // `prop` convereted to String or it's a Symbol.

accessing properties
- property access expression
  - dot notation (.)
  - - safely access object's properties.
- properties
creating properties
- /
features of a property
- - writable, enumerable, configurable.

replit：object properties

// ⭐ types of properties of an object
const obj = {
    
    // ⭐ data property
    prop: 123,                                  // data property
    
    // ⭐ method/generator
    method(parameters) { },                     // method
    *generator() { },                           // generator
    
    // ⭐ getter/setter
    get getter() { return this.prop },          // getter
    set setter(value) { this.prop = value },    // setter
    
    // ⭐ getter/setter can have the same identifier❗
    get name() { return this._name },
    set name(value) { this._name = value },

    // ⭐ computed property name
    [`foo${++i}`]: i,
    [`foo${++i}`]: i,
};

// ⭐ setter called
obj.setter = 'changed';    // looks like an assignment,
                           // but `obj.setter('changed')` is called❗

// ⭐ getter called
obj.getter;    // looks like a normal property reference, but
               // it calls `obj.getter()` and returns a value ('changed').

// ⭐ getter/setter calls
//   looks like a normal property assignment/reference, but actually
//   getter/setter are called behind the scene❗
obj.name = 'joe';    // calls setter: obj.name('joe')
obj.name;            // calls getter: obj.name()

// computed property name
obj.foo1,    // 1
obj.foo2,    // 2

Previousobject Nextattribute

Last updated 2 years ago

Was this helpful?

// defining/creating properties { name: value } // object literal obj.prop = value // create property 'on the fly' // accessing properties obj . prop // `prop` must be an identifier obj [ prop ] // `prop` convereted to String or it's a Symbol.

// ⭐ types of properties of an object const obj = { // ⭐ data property prop: 123, // data property // ⭐ method/generator method(parameters) { }, // method *generator() { }, // generator // ⭐ getter/setter get getter() { return this.prop }, // getter set setter(value) { this.prop = value }, // setter // ⭐ getter/setter can have the same identifier❗ get name() { return this._name }, set name(value) { this._name = value }, // ⭐ computed property name [`foo${++i}`]: i, [`foo${++i}`]: i, }; // ⭐ setter called obj.setter = 'changed'; // looks like an assignment, // but `obj.setter('changed')` is called❗ // ⭐ getter called obj.getter; // looks like a normal property reference, but // it calls `obj.getter()` and returns a value ('changed'). // ⭐ getter/setter calls // looks like a normal property assignment/reference, but actually // getter/setter are called behind the scene❗ obj.name = 'joe'; // calls setter: obj.name('joe') obj.name; // calls getter: obj.name() // computed property name obj.foo1, // 1 obj.foo2, // 2