🔸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 (.)
  - bracket notation []
  - optional chaining (?., ?.[]) - safely access object's properties.
- delete properties
- property testing
- property enumeration
creating properties
features of a property
- attribute - writable, enumerable, configurable.
- property name

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 3 years ago

Was this helpful?