[js] object - 호출편(Read)

🏴‍☠️ 객체란 뭘까..?

Object란 어떤 특정한 형태의 종류의 모임이거나
묘사형태 제품의 특징 등을 나타내는 속성들의 집합이다.
Object의 형태는 {key : value}형태로 작성되고 key는 문자열이다.
value는 아래와 같은 값이 가능하다.
null, undefined, boolean, number, string, [](array), {}(object), function 등등

◾ 값을 호출하는 방법

아래와 같은 음악장르의 Key와 해당하는 가수들의 배열을 value로 가지는 object가 있다.
각 데이터를 호출 하는 방법을 알아보겠다.

const musicGenre = {
    Pop: ["비욘세", "제이슨 므라즈", "아델"],
    K_Pop: ["BTS", "NCT"],
    Classic: ["모차르트", "베토벤", "쇼팽", "바흐"],
    OST: ["백지영", "아이유", "태연"],
};

1. Object명.Key 형태로 직접 접근

musicGenre.Pop; // ["비욘세", "제이슨 므라즈", "아델"]
musicGenre.Pop[0]; // 비욘세

2. Key값들을 구조분해 할당으로 각각 호출

const { Pop, K_Pop, Classic, OST } = musicGenre;
console.log(K_Pop) // ["BTS", "NCT"]

3. Object["Key값"]

Object에 인덱스형태로 접근하고 문자열을 넣어서도 해당하는 value를 가져올 수 있다.
아래는 Object.keys메소드를 활용하여 키들을 전부 가져온다.

const genreKeys = Object.keys(musicGenre);
console.log(genreKeys); // [ 'Pop', 'K_Pop', 'Classic', 'OST' ]
console.log(musicGenre["Classic"]); // ["모차르트", "베토벤", "쇼팽", "바흐"]

genreKeys.forEach((genre) => console.log(musicGenre[genre]));

프로젝트 구조 예시

이번에 서점 관련된 프로젝트를 경험했는데, 카테고리를 서버에서 받아온게 아닌 Object를 작성하여 구조를 만들었다. 아래와같이 대메뉴, 서브메뉴를 구성할 수 있다는걸 알게되었다.

예시데이터

const bookCategory = {
    국내도서: {
        소설: ["소나기", "구의증명"],
        "시/에세이": ["선인장", "여름", "평생 간직하고픈 시"],
        인문: ["총,균,쇠"],
    },
    서양도서: {
        문학: ["데미안", "호밀밭의 파수꾼"],
        취미생활: ["뜨개질", "영화감상", "발야구"],
        요리: ["수박화채", "만두", "감자전"],
    },
};

대메뉴만 호출하기

const bookKeys = Object.keys(bookCategory);
console.log(bookKeys); // [ '국내도서', '서양도서' ]

각 서브메뉴들을 호출하기

const bookKeys = Object.keys(bookCategory);
bookKeys.forEach((key) => {
    const categoryObj = bookCategory[key]; // [ '국내도서', '서양도서' ]
    const subCategory = Object.keys(categoryObj);
  
	// [ '소설', '시/에세이', '인문' ], [ '문학', '취미생활', '요리' ]
    console.log(subCategory); 
  
    // [ '소나기', '구의증명' ]
	// [ '선인장', '여름', '평생 간직하고픈 시' ]
	// [ '총,균,쇠' ]
  	// ----------------------
  	// [ '데미안', '호밀밭의 파수꾼' ]
  	// [ '뜨개질', '영화감상', '발야구' ]
  	// [ '수박화채', '만두', '감자전' ]
    subCategory.forEach((sub) => console.log(categoryObj[sub]));
})