분류 javascript

스프레드 연산자에 대한 두 가지 예외적 인 사용 사례

컨텐츠 정보

  • 조회 266 (작성일 )

본문

Ecmascript 2015 이후 자바 스크립트에서 가장 많이 사용되는 기능 중 하나는 스프레드 연산자입니다. 

이 짧은 "아시나요"기사에서는 매우 유용하지만 잘 알려지지 않은 몇 가지 예외적 인 사용 사례를 살펴 보겠습니다.


원본 : https://enmascript.com/articles/2019/09/20/two-exceptional-use-cases-for-the-spread-operator-you-may-not-know-of


Optional/Conditional Spreading 


조건에 따라 객체 속성 및 값을 추가합니다.


const isDog = true;

const obj = {
    key: 'value',
    ...(isDog && { woof: true })};


이런 식으로 if / else 논리나 유사한 접근 방식을 사용하지 않고도 조건부로 woof 속성을 추가 할 수 있습니다. 조건이 true를 반환하면 속성이 추가되고 그렇지 않으면 객체는 그대로 유지됩니다.


console.log (obj)의 결과

{ key: 'value', woof: true };


중요 사항 : 이와 같은 선택적 확산은 객체 내부에서만 작동합니다.이 밖에서 이것을 시도하면 SyntaxError가 발생합니다. 이러한 이유를 조금 더 이해하고 싶다면 이 대화를 확인하고 싶을 수도 있습니다 


객체 복사 및 선택한 속성 제외 


특정 CPU의 일부를 좋아하고 ssd를 제외한 대부분의 CPU를 유지하고 싶다고 가정 해 봅시다. 물론 공간이 더 필요합니다.

// Original CPU
const CPU = {
    ram: '32gb',
    ssd: '64gb',
    micro: 'i7'
};

// new CPU copy without the 64GB ssd
const { ssd, ...newCPU } = CPU;


이제 newCPU를 콘솔 로그하면 더 이상 ssd 속성이 포함되어 있지 않음을 알 수 있습니다. 

나머지 연산자를 활용하여 newCPU에 포함 된 나머지에서 해당 속성을 제외했기 때문입니다.


console.log (newCPU)의 결과

{ ram: '16gb', micro: 'i7' };