[생활코딩]JS문법: 객체(Object)

객체(Object)는 데이터를 담아내는 컨테이너라는 점에서 배열과 아주 유사하다. 가시적인 차이가 있다면 배열은 중복되지 않는 인덱스(색인)이 데이터가 추가될 때마다 자동으로 지정되지만 객체는 배열에서 자동으로 지정되는 '인덱스'를 직접 지정할 수 있다. //인덱스를 문자열로 지정하고 싶다면 객체를 사용하면 됩니다.

*다른 언어에서 연관배열(associative array) 또는 맵(map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당합니다.

 

객체의 생성

• 배열은 [] 대괄호로 여닫지만 객체는 {}중괄호로 여닫습니다. 
• 구분은 콤마로 합니다. 
• 객체는 key : value 로 이루어져 있습니다. // 아래 코드에서 key는 cong, vella, sollar 가 되겠죠

const grades = {'cong': 10, 'vella': 12, 'sollar': 6};

객체 생성하는 다른 방법 

• 참고로 [] 대괄호 안에 들어가는 인데스명이 객체에서 key값을 말합니다.  -> index의 역할을하는 것이 key

1번 방법 {} 

const grades = {}; //빈 객체 생성
grades['egoing'] = 10; // 객체명[인덱스명] = 값;  
grades['k8805'] = 6;
grades['sorialgi'] = 80;

 

2번 방법 new Object()

•  {}중괄호는 new Object() 와 같은 의미입니다. 

const grade = new Object(); // {}와 같은 의미인 new Object()
grade['cong'] = 10; // vscode prettier을 쓰면 "cong" 으로 바꾸는데 '', ""는 크게 상관없는 것으로 앎

객체의 속성에 접근하는 방법 

• []대괄호를 통해서 접근하는 방법 -> ['co'+'ng'] 을 해도 정상작동한다 대괄호 안에서 문자열 결합가능
• .(dot)을 통해 접근하는 방법 -> 코드가 간결하지만 위처럼 문자열을 분리하면 안됨 

grades['cong'];
grades['co'+'ng'];
//output : 10 
grades.cong;
// output : 10

객체와 반복문

- 이전에 우리가 배웠던 배열은 저장된 데이터들이 '순서'를 가지고 있습니다(자동으로 인덱스가 부여되기 때문에). 

- 객체 안에는 순서가 없습니다. 다만 key와 value가 들어가있을 뿐이죠 

 

for in문

• 반복문을 객체와 결합해서 사용하는 방법입니다. 
• for문 안에있는 (key in 객체명) 의 key는 객체의 key값을 담고있는 변수입니다. // 변수이기 때문에 key라는 이름을 바꿀 수 있습니다. 물론 앞에는 let이나 const를 붙여줘야 겠죠. + 내부 코드에 key라고 표시되어있는 부분도 바뀐 변수명으로 변경해야 합니다. 
• value를 알고싶다면 "객체명[key]"를 통해 가능합니다.

const grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}

객체에 담을 수 있는 것

• 객체에는 객체를 담을수도 있고, 함수를 담을수도 있다. 
• 객체 내부에 있는 함수나 객체를 [""]대괄호를 통해서 실행할 수 있습니다. //VSCode에서 객체의 key값에 표기된 '', ""를 없애기도하는데 이를 호출할 때 대괄호를 사용한다면 객체명["key"]라고 써야 정상작동됩니다. 

 const grades = {
        list: { cong: 10, wong: 20 }, // 원래라면 'list' 라고 쓰여있어야 합니다.
        show: function () {
          alert("this is show function");
        },
      };
      //grades 객체 안의 list 객체의 cong의 value가져오기
        alert(grades["list"]["cong"]);
        //grades 객체의 함수 실행하기 
      grades["show"](); // 방법1
      grades.show(); // 방법2

 

객체 내부의 this

const grades = {
        list: { cong: 10, wong: 20 },
        show: function () {
          for (const name in this.list) {
            console.log(name, this.list[name]);
          }
        },
      };

      grades.show();
      /*output: 
      cong 10
      wong 20 */

• 코드에 있는 this는 맥락상 이 함수가 소속되어 있는 객체 즉, grades 를 가리킵니다. 
• this.list 는 grades.list 를 말하는 것이겠죠