JavaScript의 중첩 객체 이해-JS 튜토리얼-php.cn

Understanding Nested Objects in JavaScript

객체는 JavaScript 개발자로서 작업하는 작업이며, 말할 필요도 없이 TypeScript에서도 마찬가지입니다. TypeScript는 객체 속성에 대한 유형 정의를 정의하는 다양한 방법을 제공합니다. 이 게시물 전반에 걸쳐 간단한 예부터 시작하여 몇 가지 고급 유형 정의로 넘어가는 몇 가지 유형을 살펴보겠습니다.

JavaScript의 중첩 개체는 다른 개체나 배열을 속성으로 포함하는 개체입니다. 이를 통해 실제 엔터티를 보다 효과적으로 표현할 수 있는 복잡한 데이터 구조를 생성할 수 있습니다.
JavaScript에서는 다른 개체 내에 개체를 중첩할 수 있습니다. 이는 객체 중첩 또는 객체 구성이라고도 합니다. 객체 중첩을 사용하면 객체 내의 객체를 구성하여 복잡한 데이터 구조를 만들 수 있습니다.

중첩된 개체 만들기

다음은 사용자 프로필을 나타내는 중첩 개체의 간단한 예입니다.

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

로그인 후 복사

예:
userProfile 개체에는 사용자 이름, 나이, 연락처와 같은 속성이 있습니다.
연락처 속성 자체는 이메일과 전화를 포함하는 객체입니다.
전화 속성은 집과 휴대폰 번호가 포함된 또 다른 중첩 개체입니다.

중첩된 개체 속성에 액세스

중첩된 개체 내의 속성에 액세스하려면 점 표기법이나 대괄호 표기법을 사용할 수 있습니다. 사용자의 휴대폰 번호에 액세스하는 방법은 다음과 같습니다.

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

로그인 후 복사

중첩 속성을 수정할 수도 있습니다. 예를 들어 테마 기본 설정을 변경하려는 경우:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

로그인 후 복사

중첩된 객체에 유형 사용

TypeScript로 작업할 때 중첩된 객체의 유형을 정의하여 유형 안전성을 보장할 수 있습니다. userProfile 객체의 유형을 정의하는 방법은 다음과 같습니다.

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

로그인 후 복사

이 TypeScript 예에서 UserProfile 유형은 userProfile 개체의 구조를 정의하여 모든 속성이 올바르게 입력되었는지 확인합니다.

다음은 JavaScript의 중첩 객체의 또 다른 예입니다.

각 책에 저자, 출판사, 장르 등 다양한 세부정보가 포함되어 있는 도서관 시스템을 나타내는 좀 더 복잡한 예를 살펴보겠습니다.
중첩된 객체는 type 키워드 자체를 사용하여 정의할 수 있습니다. TypeScript는 중첩된 객체의 유형 정의를 유형 정의로 추상화할 수도 있습니다. 개체가 가질 속성 수는 확실하지 않지만 개체의 속성 유형은 확실할 때 인덱스 서명을 사용할 수 있습니다

도서관 시스템에 대한 중첩 개체 정의

이 시나리오에서 중첩 개체를 구성하는 방법은 다음과 같습니다.

const userProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

로그인 후 복사

중첩된 객체 구조를 분석해 보겠습니다.

라이브러리 개체: 전체 도서관을 나타내며 이름, 위치, 도서와 같은 속성을 포함합니다.
위치 개체: 주소 및 좌표에 대한 중첩 개체를 포함합니다.
주소에는 거리, 시, 주, 우편번호가 포함됩니다. 좌표는 위도와 경도를 저장합니다.
책 배열: 각각 다음을 포함하는 여러 책 개체를 포함하는 배열입니다.
제목 : 책 제목입니다.
저자 개체: 작성자의 이름과 성을 포함하는 중첩 개체입니다.

-출판 연도: 책이 출판된 연도
-장르: 해당 책이 속한 장르의 배열입니다.
-사용 가능한 복사본: 사용 가능한 복사본 수를 나타내는 숫자입니다.

데이터 액세스 및 조작

이 중첩된 개체에 다양한 방법으로 액세스하고 조작할 수 있습니다. 첫 번째 책의 저자를 확인하는 방법은 다음과 같습니다.

const mobileNumber = userProfile.contact.phone.mobile;
console.log(mobileNumber); // Output: 987-654-3210

로그인 후 복사

도서관에 새 책을 추가하려면:

userProfile.preferences.theme = "light";
console.log(userProfile.preferences.theme); // Output: light

로그인 후 복사

객체에서 메소드 사용

객체에 정의된 메소드를 활용할 수도 있습니다. 예를 들어, 총 책 수를 얻으려면:

type UserProfile = {
    username: string;
    age: number;
    contact: {
        email: string;
        phone: {
            home: string;
            mobile: string;
        };
    };
    preferences: {
        notifications: boolean;
        theme: string;
    };
};

const user: UserProfile = {
    username: "irena_doe",
    age: 30,
    contact: {
        email: "irena@example.com",
        phone: {
            home: "123-456-7890",
            mobile: "987-654-3210"
        }
    },
    preferences: {
        notifications: true,
        theme: "dark"
    }
};

로그인 후 복사

이 예에서는 중첩된 개체를 사용하여 도서관 시스템과 같은 복잡한 데이터를 나타내는 보다 포괄적인 구조를 만드는 방법을 보여줍니다. 관련 정보를 함께 정리하면 의미 있는 방식으로 데이터를 쉽게 관리하고 상호작용할 수 있습니다.

또 다른 중첩된 예

코드 구성 및 유지 관리성을 향상시키기 위해 중첩된 객체를 별도의 유형으로 추상화할 수 있습니다. 이 접근 방식을 사용하면 Caterer 유형을 별도로 정의하고 이를 Train 유형 내에서 사용할 수 있습니다. TypeScript에서 이를 수행하는 방법은 다음과 같습니다.

const library = {
    name: "Central City Library",
    location: {
        address: {
            street: "123 Main St",
            city: "Central City",
            state: "CC",
            zip: "12345"
        },
        coordinates: {
            latitude: 40.7128,
            longitude: -74.0060
        }
    },
    books: [
        {
            title: "JavaScript: The Good Parts",
            author: {
                firstName: "Douglas",
                lastName: "Crockford"
            },
            publishedYear: 2008,
            genres: ["Programming", "Technology"],
            availableCopies: 5
        },
        {
            title: "Clean Code",
            author: {
                firstName: "Robert",
                lastName: "C. Martin"
            },
            publishedYear: 2008,
            genres: ["Programming", "Software Engineering"],
            availableCopies: 3
        }
    ],
    totalBooks: function() {
        return this.books.length;
    }
};

로그인 후 복사

열차 유형 정의
다음으로, 케이터링 속성에 Caterer 유형을 사용하는 Train 유형을 정의하겠습니다.

const firstBookAuthor = library.books[0].author;
console.log(`${firstBookAuthor.firstName} ${firstBookAuthor.lastName}`); 
// Output: Douglas Crockford

로그인 후 복사

열차 객체의 예

이제 Caterer 세부정보를 포함하여 Train 유형의 인스턴스를 생성할 수 있습니다.

library.books.push({
    title: "The Pragmatic Programmer",
    author: {
        firstName: "Andrew",
        lastName: "Hunt"
    },
    publishedYear: 1999,
    genres: ["Programming", "Career"],
    availableCopies: 4
});

로그인 후 복사