Objects

객체 작성 방법

var myObj = {
    key: value
    // ...
};
// The constructed form looks like this:
var myObj = new Object();
myObj.key = value;

본질적으로 어떠한 차이도 없이 일반적으로 모두 액면가를 사용한다
built-ins object are function
String Number Boolean Object Function Array Date RegExp Error
typeof String === "function"typeof Object === "function"
function은 Object의 하위 유형입니다.
속성 이름이 문자열입니다.

var myObject = { };

myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";

myObject["true"];               // "foo"
myObject["3"];                  // "bar"
myObject["[object Object]"];    // "baz"

var a= [1,2,3]
a[1] // 2
a["1"] // 2

ES6 adds computed property names

var prefix = "foo";

var myObject = {
    [prefix + "bar"]: "hello",
    [prefix + "baz"]: "world"
};

myObject["foobar"]; // hello
myObject["foobaz"]; // world

Property Descriptors (ES5 later)

var myObject = {
    a: 2
};

Object.getOwnPropertyDescriptor( myObject, "a" );
// {
//    value: 2,
//    writable: true,
//    enumerable: true,
//    configurable: true
// }

속성 정의

var myObject = {};

Object.defineProperty( myObject, "a", {
    value: 2,
    writable: true,
    configurable: true,
    enumerable: true
} );

myObject.a; // 2

Writable에서 속성 값을 변경할 수 있는지 여부

var myObject = {};

Object.defineProperty( myObject, "a", {
    value: 2,
    writable: false, // not writable!
    configurable: true,
    enumerable: true
} );

myObject.a = 3;

myObject.a; // 2

엄격한 모드에서는 바로 틀릴 수 있다

"use strict";

var myObject = {};

Object.defineProperty( myObject, "a", {
    value: 2,
    writable: false, // not writable!
    configurable: true,
    enumerable: true
} );

myObject.a = 3; // TypeError

Configurable 구성 가능 여부

var myObject = {
    a: 2
};

myObject.a = 3;
myObject.a;                 // 3

Object.defineProperty( myObject, "a", {
    value: 4,
    writable: true,
    configurable: false,    // not configurable!
    enumerable: true
} );

myObject.a;                 // 4
myObject.a = 5;
myObject.a;                 // 5

Object.defineProperty( myObject, "a", {
    value: 6,
    writable: true,
    configurable: true,
    enumerable: true
} ); // TypeError

configurable:false의 속성은 delete할 수 없습니다

var myObject = {
    a: 2
};

myObject.a;             // 2
delete myObject.a;
myObject.a;             // undefined

Object.defineProperty( myObject, "a", {
    value: 2,
    writable: true,
    configurable: false,
    enumerable: true
} );

myObject.a;             // 2
delete myObject.a;
myObject.a;             // 2

Object Constant

var myObject = {};

Object.defineProperty( myObject, "FAVORITE_NUMBER", {
    value: 42,
    writable: false,
    configurable: false
} );

By combining writable:false and configurable:false, you can essentially create a constant (cannot be changed, redefined or deleted) as an object property
Prevent Extensions로 새 속성 추가 차단

var myObject = {
    a: 2
};

Object.preventExtensions( myObject );

myObject.b = 3;
myObject.b; // undefined

Seal
not only object.preventExtensions(..) on it, but also marks all its existing properties as configurable:false.
Freeze
seal + writable:false
get and setter

get and setter
var myObject = {
    // define a getter for `a`
    get a() {
        return 2;
    }
};

Object.defineProperty(
    myObject,   // target
    "b",        // property name
    {           // descriptor
        // define a getter for `b`
        get: function(){ return this.a * 2 },

        // make sure `b` shows up as an object property
        enumerable: true
    }
);

myObject.a; // 2

myObject.b; // 4

var myObject = {
    // define a getter for `a`
    get a() {
        return this._a_;
    },

    // define a setter for `a`
    set a(val) {
        this._a_ = val * 2;
    }
};

myObject.a = 2;

myObject.a; // 4

Existence가 속성 존재 여부를 판단합니다.

var myObject = {
    a: 2
};
("a" in myObject);              // true     
("b" in myObject);              // false

myObject.hasOwnProperty( "a" ); // true     ， 
myObject.hasOwnProperty( "b" ); // false

in은 원형 체인을 찾고hasOwnProperty는 대상 자체만 찾습니다
Enumeration 속성을 반복할 수 있는지 여부

var myObject = { };

Object.defineProperty(
    myObject,
    "a",
    // make `a` enumerable, as normal
    { enumerable: true, value: 2 }
);

Object.defineProperty(
    myObject,
    "b",
    // make `b` NON-enumerable
    { enumerable: false, value: 3 }
);

myObject.b; // 3
("b" in myObject); // true
myObject.hasOwnProperty( "b" ); // true

// .......

for (var k in myObject) {
    console.log( k, myObject[k] );
}
// "a" 2

var myObject = { };

Object.defineProperty(
    myObject,
    "a",
    // make `a` enumerable, as normal
    { enumerable: true, value: 2 }
);

Object.defineProperty(
    myObject,
    "b",
    // make `b` non-enumerable
    { enumerable: false, value: 3 }
);

myObject.propertyIsEnumerable( "a" ); // true
myObject.propertyIsEnumerable( "b" ); // false

//  ， 
Object.keys( myObject ); // ["a"]    
Object.getOwnPropertyNames( myObject ); // ["a", "b"]

Iteration 주기
for in도 원형 체인의 속성을 옮겨다니기 때문에 수조는 일반적으로 전통적인 index 방식으로 옮겨다닌다

var myArray = [1, 2, 3];

for (var i = 0; i < myArray.length; i++) {
    console.log( myArray[i] );
}
// 1 2 3

ES6에는 for of 직접 변수 값이 있습니다.

var myArray = [ 1, 2, 3 ];

for (var v of myArray) {
    console.log( v );
}
// 1
// 2
// 3

@@iterator 속성이 있는 대상은 for of 변수를 사용하여next 방법으로 다음 값을 얻을 수 있습니다

var myObject = {
    a: 2,
    b: 3
};

Object.defineProperty( myObject, Symbol.iterator, {
    enumerable: false,
    writable: false,
    configurable: true,
    value: function() {
        var o = this;
        var idx = 0;
        var ks = Object.keys( o );
        return {
            next: function() {
                return {
                    value: o[ks[idx++]],
                    done: (idx > ks.length)
                };
            }
        };
    }
} );

// iterate `myObject` manually
var it = myObject[Symbol.iterator]();
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // { value:undefined, done:true }

// iterate `myObject` with `for..of`
for (var v of myObject) {
    console.log( v );
}
// 2
// 3

or like this : var myObject = { a:2, b:3, [Symbol.iterator]: function(){/* .. */} }