스터디 키워드 - 객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법

김주현·2021년 8월 11일
1

[Javascript]

목록 보기
8/16

제목만 봐도 뭐가 뭔지 모르겠다. 어렵...😱😱

우선, 한글로 검색해봐도 참고할만한 사이트가 없어 영어로 구글검색을 해보았다.

검색해본 결과 stackoverflow사이트에 여러 질문들이 올라와있었다.

키워드를 잘 이해했는지는 모르겠지만

객체와 배열이 섞인 복잡한 객체라는 것은 객체와 배열을 포함하는 중첩 데이터 구조를 말하는 것이라고 필자는 그렇게 이해했다.

아래 질문들을 참고하여 예를 들어보자.

문제1

개체와 배열을 포함하는 중첩 데이터 구조가 있습니다. data의 두번째 항목인 items의
속성 name의 값 'bar'을 추출해보자

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

//item_name변수 선언
//브라켓 표기법 사용하여 items속성 name의 값 bar추출
const item_name = data['items'][1]['name'];


console.log(item_name)  //bar

문제2

다음과 같이 객체 및 배열이 섞인 데이터 구조가 있습니다. 새로운 변수를 선언하여 Part 1, 60, Part 3A 값을 추출해보자.

var someObject = {
    part1 : {
        name: 'Part 1',
        size: '20',
        qty : '50'
    },
    part2 : {
        name: 'Part 2',
        size: '15',
        qty : '60'
    },
    part3 : [
        {
            name: 'Part 3A',
            size: '10',
            qty : '20'
        }, {
            name: 'Part 3B',
            size: '5',
            qty : '20'
        }, {
            name: 'Part 3C',
            size: '7.5',
            qty : '20'
        }
    ]
};

//part1name변수를 사용하여 part1의 속성 name의 값 'Part 1'에 접근해보자
//점표기법사용
var part1name = someObject.part1.name;

//part2quantity변수를 사용하여 part2의 속성 qty의 값 60에 접근해보자
//점표기법사용
var part2quantity = someObject.part2.qty;

//part3name1변수를 사용하여 part3의 첫번째 배열의 속성name의 값 'Part 3A'에 접근해보자
//점표기법사용
var part3name1 = someObject.part3[0].name;

console.log(part1name);     //Part 1
console.log(part2quantity); //60
console.log(part3name1);    //Part 3A

✔참고사이트 :
문제1 https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json
문제2 https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-and-arrays-by-string-path

0개의 댓글