객체 병합 TypeScript

두 개 이상의 객체를 단일 객체로 병합하고 TypeScript에서 모든 속성을 예제와 함께 사용하는 간단한 방법을 소개합니다.

TypeScript에서 객체 병합

데이터가 대부분 개체에 저장되어 있는 애플리케이션을 사용하거나 API에서 개체 형태로 일부 데이터를 가져올 때 일부 개체를 병합해야 하는 상황이 있습니다. 우리는 항상 쉽게 풀 수 있는 짧은 문제나 데이터 손실 없이 쉽게 사용할 수 있는 솔루션으로 문제를 단순화하기를 원합니다.

단일 개체로 사용할 수 있는 여러 개체가 있는 경우 사용하기 쉽도록 여러 개체의 부하를 하나로 줄이기 위해 병합해야 합니다.

이 자습서에서는 서로 다른 값을 포함하지만 프런트엔드에 표시하거나 데이터베이스에 저장해야 하는 동일한 유형의 데이터를 포함하기 때문에 병합해야 하는 두 개체를 살펴보겠습니다. 아래 표시된 프로그래밍 언어를 포함하는 languageOne 및 languageTwo라는 두 개의 개체를 만들어 보겠습니다.

# typescript
var languageOne = {
    PLA: 'Angular',
    PLB: 'Bash',
    PLC: 'CPlusPlus',
    PLR: 'React'
};

var languageTwo = {
    PLD: 'Dart',
    PLE: 'Express',
    PLF: 'FSharp',
    PLS: 'SWIFT'
};

이제 이 두 개체를 하나의 개체로 결합하고 해당 개체를 사용하여 키를 기반으로 값을 가져오려면 아래와 같은 방법을 사용할 수 있습니다.

# typescript
var languages = {...languageOne, ...languageTwo};

이 코드 줄을 사용하여 두 개체를 단일 개체에 할당합니다. 아래와 같이 점을 사용하고 키로 속성을 호출하여 개체의 속성을 쉽게 호출할 수 있습니다.

# typescript
console.log(languages.PLA);
console.log(languages.PLS);

출력:

위의 예에서 볼 수 있듯이 단 한 줄의 코드로 원하는 만큼 많은 개체를 단일 개체로 병합할 수 있습니다. 그러나 여전히 우리가 건너뛰어서는 안 될 중요한 질문이 하나 있습니다.

두 개체에 하나 이상의 동일한 속성이 있는 경우 어떻게 됩니까?

두 개체를 모두 사용하지만 두 개체에 존재할 일부 속성을 추가하고 작동 방식을 확인하는 또 다른 예를 살펴보겠습니다. 우리가 사용할 객체는 아래와 같습니다.

# typescript
var languageOne = {
    PLA: 'Angular',
    PLB: 'Bash',
    PLC: 'CPlusPlus',
    PLR: 'React',
    PLF: 'Flex'
};

var languageTwo = {
    PLD: 'Dart',
    PLE: 'Express',
    PLF: 'FSharp',
    PLS: 'SWIFT',
    PLC: 'CSharp'
};

이제 아래와 같이 위에서 사용한 것과 동일한 방법을 사용하여 이러한 개체를 다른 개체로 병합하겠습니다.

# typescript
var languages = {...languageOne, ...languageTwo};

이제 위의 예에서 사용한 것과 동일한 방법을 사용하여 PLC 및 PLF 속성을 호출해 보겠습니다.

# typescript
console.log(languages.PLC);
console.log(languages.PLF);

출력:

위의 예에서 볼 수 있듯이 두 번째 객체에서만 속성을 얻었습니다. 이제 객체를 반전시켜 아래와 같이 결과를 확인해보자.

# typescript
var languages = {...languageTwo, ...languageOne};

console.log(languages.PLC);
console.log(languages.PLF);

출력:

위의 예에서 볼 수 있듯이 두 개체를 병합하는 동안 두 개체에 있는 속성은 병합하는 개체의 순서에 따라 업데이트됩니다. 따라서 일부 고유한 데이터가 있고 속성을 업데이트하지 않고 전체 데이터를 유지하려는 경우 이 방법으로는 불가능합니다.

그러나 객체의 순서에 따라 속성을 업데이트하려는 경우 이 방법을 사용할 수 있습니다. 이 방법은 매우 효과적입니다.