ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Object 프로퍼티 접근, 할당, 중첩
    Study/JavaScript 2020. 6. 25. 16:27

     

    프로퍼티 접근


    let difficult = {
      33: '숫자 형식도 되네',
      'my name': '스페이스 포함 가능',
      color: 'silver',
      키: '한글인 키는 따옴표가 없어도 되는군!!',
      '!키': '느낌표 있는 키는 따옴표가 필요하군',
      $special: '$는 없어도 되는군'
    };

     

    console.log(difficult.color);

     

    1. dot(.)으로 접근하는 방법

      - 따옴표 없이 키를 바로 써 주어야 함.

     

    console.log(difficult['color']);

     

    2. [] 대괄호로 접근하는 방법

      - 키 이름을 따옴표로 감싸서 작성해주어야함. 

     

     

    console.log(difficult.my name);
    console.log(difficult.33);

     

    이렇게 스페이스가 포함된 키, 숫자로 된 키는 대괄호로 접근하면 된다.

     

    console.log(difficult['my name']);
    console.log(difficult['33']);

     

     

    변수로 프로퍼티 접근하기

    let name = "키";
    console.log(difficult[name]);   
    console.log(difficult.name);  // undefined

    변수에 키 이름이 저장되어 있으면, 

    변수로도 프로퍼티에 접근 가능하며, 항상 대괄호로 접근해야한다.

     

    .으로 접근한다는 뜻은 실제 키 이름을 쓸 때 이다.

    'name'이라는 키가 있었으면 그에 해당하는 프로퍼티에 접근할 수 있었겠지만,

    존재하지 않기 때문에 undefined가 나온 것이다.

     

     

    프로퍼티 할당


    difficult[name] = '값 바꾼다';
    console.log(difficult[name]);
    
    difficult.color = '색깔';
    console.log(difficult.color);
    
    console.log('생성전: ' + difficult.new);
    difficult.new = '새로 추가된 프로퍼티';
    console.log('생성후: ' + difficult.new);

    객체에 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)된다.

     

    이전에 없던 키로 접근하면 새로운 프로퍼티가 추가된다.

     

     

    const 로 선언된 변수는 값을 절대 수정할 수 없다.

    그래서 변수 자체에 객체를 다시 할당하면 오류가 생기지만,

    변수의 객체에 프로퍼티를 추가하거나 수정하는 것은 가능하다.

     

    const mutableObj = {
      name: '객체'
    };
    
    mutableObj = {
       name: '수정'
    }

     

    중첩된 객체


    우리가 실무에서 사용하는 객체는 거의 중첩되어 있다.

     

    let nestedObj = {
      type: {
        year: '2019',
        'comment-type': [{
          name: 'simple'
        }]
      }
    }

    위에서 simple을 출력하려면, 

    console.log(nestedObj.type['comment-type'][0].name);   // simple

     

     

    객체는 reference로 저장된다


    객체를 변수에 저장하면

    객체 리터럴 자체가 저장되는 것이 아니라 reference가 저장된다.

     

    텍스트는 변수에 저장하면 텍스트 자체가 저장된다.

    그래서 같은 텍스트이면 서로 값이 같아서 true이다.

     

    그러나 객체는 생긴 모양이 아예 똑같은데 false라고 출력된다.

     

    그 이유는 객체는 변수에 저장할 떄, 객체 자체를 그대로 저장하는 것이 아니기 때문이다.

    객체가 담긴 어느 메모리의 reference를 저장하기 때문이다.

     

     

    눈에 보이는 데이터는 똑같지만,

    hiObj와 helloObj가 갖고 있는 진짜 값을 다른 것이다.

     

    mutableObj.name 로 프로퍼티를 접근해서 수정할 수 있다.

    그러나 mutableObj가 저장된 reference가 바뀌는 것이 아니라

    객체 내부의 프로퍼티 값이 수정되는 것이라 수정이 되는 것이다.

     

     

     

     

    출처: 위코드

    'Study > JavaScript' 카테고리의 다른 글

    [Data Structure] Set  (0) 2020.07.13
    splice 와 split :: 활용예제  (0) 2020.07.12
    클래스 생성자와 메소드  (0) 2020.06.25
    function 함수의 형태와 구성  (0) 2020.06.25
    날짜와 시간  (0) 2020.06.24

    댓글

Designed by Tistory.