Modern JavaScript 객체

 

---

 

1. 객체

 

• 프로퍼티 : 프로퍼티키(프로퍼티식별자) + 프로퍼티값

 

                      객체 = 프로퍼티 + 메소드

 

• 객체 리터럴

 

          var person = {

                     name: 'Lee', <— 프로퍼티 (키+값)

                     gender: 'male',

                     sayHello: function () {

                         console.log('Hi! My name is ' + this.name); <— 예약어는 사용 x

                 }

            };

 

• 생성자함수

 

          var person1 = {

                 name: 'Lee',

                 gender: 'male',

                 sayHello: function () {

                      console.log('Hi! My name is ' + this.name);

                 }

           };

 

• 값 읽기 : 마침표(.) 표기법과 대괄호([]) 표기법

 

           console.log(person1[‘name']);     // ‘Lee’

           console.log(person1.name);         //

           person1.age = 20;                          //프로퍼티 동적 생성

           delete person.gender;                  // 프로퍼티 삭제

 

• this instance : this에 바인딩 되어 있는 프로퍼티와 메소드는 외부에서 참조가능(public)

 

           function Person(name, gender) {

                     var married = true;         // private

                     this.name = name;           // public

                     this.gender = gender;       // public

                     this.sayHello = function(){ // public

                     console.log('Hi! My name is ' + this.name);

                };           

 

• For-in : 객체의 문자열 키(key)를 순회하기 위한 문법

 

             var person = {

                    'first-name': 'Ung-mo',

                    'last-name': 'Lee',

                    gender: 'male'

             };

 

        - prop에 객체의 프로퍼티 이름이 반환된다. 단, 순서는 보장되지 않는다.

             for (var prop in person) {

                    console.log(prop + ': ' + person[prop]);

             }

 

         - 객체의 경우, 프로퍼티의 순서가 보장되지 않는다. (원래 객체의 프로퍼티에는 순서가 없기 때문이다.)

         - 배열은 순서를 보장하는 데이터 구조이지만 객체와 마찬가지로 순서를 보장하지 않는다.

           (배열 요소들만을 순회하지 않는다.)

 

• For-of (for-in 순회순서 보완)

 

           const array = [1, 2, 3];

           array.name = 'my array';

         

           for (const value of array) {

                   console.log(value);

            }

 

           for (const [index, value] of array.entries()) {

                console.log(index, value);

           }

 

• Pass-by-reference : 객체 타입은 동적으로 변화할 수 있어 어느정도 메모리 공간을 확보해야 하는지 예측이 불가하므로 런타임 메모리를 확보하고 힙영역에 저장됨 (원시타입 값으로 복사 전달됨)

 

      - address(참조값)이 동일한 경우

        var foo = {

                val: 10

        }

 

        var bar = foo;

        console.log(foo.val, bar.val); // 10 10

        console.log(foo === bar);      // true

 

         bar.val = 20;

         console.log(foo.val, bar.val); // 20 20

         console.log(foo === bar);      // true

 

1.한가지 주소를 바라볼 경우

 

           - address(참조값)이 동일하지 않은 경우

            var foo = { val: 10 };

            var bar = { val: 10 };

            console.log(foo.val, bar.val); // 10 10

            console.log(foo === bar);      // false

 

            var baz = bar;

            console.log(baz.val, bar.val); // 10 10

            console.log(baz === bar);      // true

 

2. 다른 주소를 바라볼 경우

 

---

 

2. 객체의 분류

 

객체 분류

Built-in object : 내장객체 (웹페이지 표현 공통기능 제공

 

• Standard Built-in Objects (or Global Objects) )
• BOM (Browser Object Model)
• DOM (Document Object Model)

 

Host Object : 사용자 정의 객체

DOM tree 객체 구성

 

참고 : https://isaac-yoon.tistory.com/13

 

 

 

---

3. 객체와 변경불가성

• mmutable value / mutable value

 

       Immutable value  :  boolean, null, undefined, number, string,  symbol (Primitive data type)

 

 

 

• 객체의 방어적 복사(defensive copy) : Object.assign

 

Object.assign : 타킷 객체로 소스 객체의 프로퍼티를 복사한다 (객체 내부는 얕은 복사). 이때 소스 객체의 프로퍼티와 동일한 프로퍼티를 가진 타켓 객체의 프로퍼티들은 소스 객체의 프로퍼티로 덮어쓰기된다. 리턴값으로 타킷 객체를 반환한다.  (완전한 deep copy는 아니다)

 

// Syntax
Object.assign(target, ...sources)

// Copy
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
console.log(obj == copy); // false

// Merge
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const merge1 = Object.assign(o1, o2, o3);

console.log(merge1); // { a: 1, b: 2, c: 3 }
console.log(o1);     // { a: 1, b: 2, c: 3 }, 타겟 객체가 변경된다!

// Merge
const o4 = { a: 1 };
const o5 = { b: 2 };
const o6 = { c: 3 };

const merge2 = Object.assign({}, o4, o5, o6);

console.log(merge2); // { a: 1, b: 2, c: 3 }
console.log(o4);     // { a: 1 }

 

 

• 객체 변경 방지 : Object.freeze (내부객체 변경 가능)

const user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

// Object.assign은 완전한 deep copy를 지원하지 않는다.
const user2 = Object.assign({}, user1, {name: 'Kim'});

console.log(user1.name); // Lee
console.log(user2.name); // Kim

Object.freeze(user1);

user1.name = 'Kim'; // 무시된다!

console.log(user1); // { name: 'Lee', address: { city: 'Seoul' } }

console.log(Object.isFrozen(user1)); // true

 

- 객체 내부의 객체(Nested Object)는 변경가능

const user = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

Object.freeze(user);

user.address.city = 'Busan'; // 변경된다!
console.log(user); // { name: 'Lee', address: { city: 'Busan' } }

- 내부 객체까지 변경 불가능하게 만들려면 Deep freeze를 하여야 한다.

 

• 다른 대안으로 Facebook이 제공하는 Immutable.js를 사용