[모던 자바스크립트 Deep Dive] #10~11. 객체 리터럴, 원시값과 객체의 비교

 

▣ 10장: 객체 리터럴
10.1 객체란?
      객체 : 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체임.
              원시 값은 변경 불가능한 값이지만 객체는 변경 가능한 값임.
      프로퍼티 : 객체의 상태를 나타내는 값(data).
                    객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성됨.
                    함수도 프로퍼티 값으로 사용할 수 있음, 그 경우 일반 함수와 구분위해 메서드라고 부름.
      메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior),
                 객체에 묶여있는 함수

    var counter = {
        num : 0, //프로퍼티
        increase : function(){ //메서드
            this.num++;
        }
    }

10.2 객체 리터럴에 의한 객체 생성
      인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체.
      클래스 : 인스턴스를 생성하기 위한 템플릿 역할.
      객체는 클래스와 인스턴스를 포함한 개념임.
      객체 리터럴 : 객체를 생성하기 위한 표기법임, 중괄호 내에 0개 이상의 프로퍼티를 정의함.

10.3 프로퍼티
      식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표 사용.
      이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티로 덮어써짐.

10.4 메서드
      프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부름.

10.5 프로퍼티 접근

    var person = {
      name: 'Lee'
    };

    // 마침표 표기법에 의한 프로퍼티 접근
    console.log(person.name); // Lee

    // 대괄호 표기법에 의한 프로퍼티 접근
    console.log(person['name']); // Lee

      대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열.
      객체에 존재하지 않는 프로퍼티에 접근하면 undefined 반환.

10.6 프로퍼티 값 갱신
       이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신됨.

10.7 프로퍼티 동적 생성
       존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 
       프로퍼티에 값이 할당됨.

10.8 프로퍼티 삭제
       delete 연산자 사용.

    delete person.name;

10.9 ES6에서 추가된 객체 리터럴의 확장 기능
____10.9.1 프로퍼티 축약 표현

    // ES6
    let x = 1, y = 2;

    // 프로퍼티 축약 표현
    const obj = { x, y }; //원래 ES5에서는 var obj = { x: x, y: y };

    console.log(obj); // {x: 1, y: 2}

____10.9.2 계산된 프로퍼티 이름

____10.9.3 메서드 축약 표현

    // ES5
    var obj = {
      name: 'Lee',
      sayHi: function() {
        console.log('Hi! ' + this.name);
      }
    };

    obj.sayHi(); // Hi! Lee

 

    // ES6
    const obj = {
      name: 'Lee',
      // 메서드 축약 표현
      sayHi() {
        console.log('Hi! ' + this.name);
      }
    };

    obj.sayHi(); // Hi! Lee

     * 26.2절 "메서드" 참고

 

 

▣ 11장: 원시 값과 객체의 비교
      원시 값 : 변경 불가능한 값, 변수에 할당하면 확보된 메모리 공간에는 실제 값이 저장됨,
                  다른 변수에 할당하면 원시 값이 복사되어 전달됨(값에 의한 전달).
      객체     : 변경 가능한 값, 변수에 할당하면 확보된 메모리 공간에는 참조 값이 저장됨,
                  다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨(참조에 의한 전달).

11.1 원시 값

____11.1.1 변경 불가능한 값

    // const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수일 뿐이다.
    const o = {};

    // const 키워드를 사용해 선언한 변수에 할당한 원시값(상수)은 변경할 수 없다.
    // 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.
    o = 1; //불가능(Uncaught TypeError)
    o.a = 1; //가능
    console.log(o); // {a: 1}

____11.1.2 문자열과 불변성
             자바스크립트의 문자열은 원시 타입이며 변경 불가능.

    var str = 'Hello';
    str = 'world';

             첫 번째 문 실행 : 식별자 str은 문자열 'Hello'가 저장된 메모리 공간의 첫 번째 메모리 셀 주소를 가리킴.
             두 번째 문 실행 : 문자열 'Hello'를 수정하는 게 아니라 새로운 문자열 'world'를 메모리에 생성하고
                                    str은 그것을 가리킴.

____11.1.3 값에 의한 전달
              변수에 원시값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달됨.

    var score = 80;

    // copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
    var copy = score;

    console.log(score, copy);    // 80  80
    console.log(score === copy); // true

    // score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.
    // 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.
    score = 100;

    console.log(score, copy);    // 100  80
    console.log(score === copy); // false

11.2 객체

____11.2.1 변경 가능한 값
             얕은 복사 : 1단계만 복사.
                            객체에 중첩되어 있는 객체의 경우 참조 값을 복사.

a바꾸니까 b도 바뀜

             깊은 복사 : 재귀적으로 원시 값까지 전부 복사.
                            객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값처럼 완전한 복사본을 만듦.       

a바꿔도 b안바뀜

____11.2.2 참조에 의한 전달
              객체를 가리키는 변수(원본)를 다른 변수(사본)에 할당하면 원본의 참조 값이 복사되어 전달됨.
              두 개의 식별자가 하나의 객체를 공유.