🔸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

  • method

  • getter/setter /

  • shorthand property

  • computed property name

  • private property by closure

  • private member

  • global object property

• features of a property

  • attribute - writable, enumerable, configurable.

  • property name

⭐️

Every property in JavaScript objects can be classified by 3 factors:

• String / Symbol

• enumerable / non-enumerable

• own / inherited (from the prototype chain)

👉 property testing (📘 MSN )

the assignment of a property always creates/sets a property in the original object, it never modifies objects in the prototype chain.

A "variable" is just a property of the environment record (associated with the currently executing block /function /module /script).

👥

• in the global scope,

  • var / function are implemented as propery on the global object.

  • these properies can't be deleted❗

  • global let / const are not properies of the global object❗

• closure can be used as a function with private propery (functions/variables)❗(👉 closure: manage grades)

• object's configurable properies can be deleted❗

• null and undefined are the only two values that do not have properties.❗

💈

• 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

📗

• YDKJS: Scope & Closures (v.2) > Ch. 3: The Scope Chain

📘

• Property

• Expressions and operators ⟩ Object initializer ⟩ Method definitions

• Functions - method/getter/setter are all functions.