타입스크립트에서 전개 구문(Spread syntax) 사용 팁

프로그래밍 언어 TypeScript
1

전개 구문(Spread syntax)이란, 자바스크립트와 타입스크립트에서 배열이나 객체를 말 그대로 펼치는 구문입니다.

배열에서 전개 구문

배열에서 전개 구문의 대략적인 사용법은 아래와 같습니다.

const args = [0, 1, 2]
console.log(args)     // [0, 1, 2]
console.log(...args)  // 0, 1, 2

여기서 전개 구문은 … 입니다. 해당 구문을 사용하지 않았을 때는 배열로 묶여서 출력 되었지만, 사용했을 때는 값이 하나하나 분리되어 대입 된 것을 볼 수 있습니다.

배열의 값을 함수가 요구하는 각각에 파라미터에 전달 하려고 할 때, 일일이 변수로 분리할 필요 없이 전개 구문으로 풀어서 전달할 수 있습니다. 배열로 묶인 값이 기본 입력일 때 유용하겠죠.

function sum(x:number, y:number, z:number)
{
	 return x + y + z;
}

// 함수와 배열의 타입이 일치해야 함
const arr:[number, number, number] = [1, 2, 3]
sum(...arr)

주석문을 보면 알겠지만, 타입스크립트에서 함수에 전달되는 값이 일치하는지 검사하고 있기 때문에 배열의 수와 타입은 함수와 일치 시켜야 합니다.

그리고 전개 구문은 순서대로 대입하는 것이 기본 동작이다 보니 전개 구문의 앞이나 뒤에도 평범하게 다른 파라미터도 추가할 수 있습니다.

function sum(a:number, b:number, c:number, d:number)
{
    return a + b + c + d;
}

const arr: [number, number] = [2, 3]
sum(1, ...arr, 4)

추가로 배열이 몇 개의 값을 가지고 있는지 모르는 경우에도 전개 구문을 활용할 수 있는 방법이 있습니다. 함수의 파라미터 값을 전개 구문으로 지정하기만 하면 배열의 개수를 지정하지 않은 상태에서도 전개 구문을 사용할 수 있습니다.

function sum(...m:number[])
{
  return m.reduce(function add(sum, currValue) {
    return sum + currValue;
  }, 0);
}

const arr = [1, 2, 3]
sum(...arr)

이렇게 파라미터을 전개 구문으로 받기로 한 경우, 함수에서 정의 시 다른 파라미터는 무조건 전개 구문 앞에서 정의 해야 합니다. 전개 구문 뒤에 다른 파라미터를 정의할 수 없습니다.

image
image1028×137 11.2 KB

객체에서 전개 구문

객체에서의 사용도 배열과 비슷하지만, 조금 다른 점이 있습니다. 객체는 속성을 가지고 있기 때문이죠.

const something1 = { x: 1, y: 2 }
const something2 = { ...something1, z: 3 }
console.log(something2) // { "x": 1, "y": 2, "z": 3 }

일반적으로 객체의 원본을 유지한 채 단순히 속성을 추가하는 방식으로 사용됩니다. 동일한 속성이 있을 때는 나중에 오는 값을 따릅니다.

const something1 = { x: 1, y: 2  }
const something2 = { x: 5, z: 3 }
const merge = {...something1, ...something2}

console.log(merge) // { "x": 5, "y": 2, "z": 3 }

객체에서 조금 특이한 사용법이 한 가지 더 있는데, 전개 구문이 객체를 정의할 때도 사용 가능하다는 점을 응용한 것입니다. 아래의 예시를 우선 살펴봅니다.

const isTrue = false;
const something = {
  a: 1,
  b: 2,
  c: isTrue ? 3 : undefined,
};

console.log(something) // { "a": 1, "b": 2, "c": undefined }

조건부로 어떤 속성의 값을 정의한다고 합시다. 하지만 이럴 경우엔 c 속성 자체가 필요하지 않은 경우에는 또 해당 c 속성이 없는 객체를 정의하는 또 다른 코드가 필요해지게 됩니다.

이때 전개 구문을 응용하여 정의하면 속성의 유무 또한 조건부로 정의할 수 있습니다.

const isTrue = false;
const something = {
  a: 1,
  b: 2,
  ...(isTrue && { c: 30}),
};

console.log(something) // { "a": 1, "b": 2 }

마무리

여기까지 간단하게 타입스크립트에서 전개 구문과 구문을 사용하는 팁을 소개해드렸습니다.

조금 더 자세한 설명과 내용을 알고싶다면 아래의 링크를 참고해보세요.

타입스크립트 전개 구문 관련 문서

자바스크립트 전개 구문 관련 문서

1개의 좋아요