함수 rest 파라미터, destructuring 할 때 타입지정 (9)

자바스크립트(그리고 타입스크립트)에서 개발자들이 보다 효율적이고 간결하게 코드를 작성할 수 있도록 돕는 몇 가지 중요한 문법이 있습니다.

rest 파라미터, spread 연산자, 그리고 destructuring 문법을 설명하겠습니다.

 

1. Rest 파라미터 (Rest Parameter)

함수를 작성할 때, 입력되는 파라미터의 개수가 유동적이라면 어떻게 해야 될까?

함수에 전달되는 파라미터의 수를 미리 알 수 없는 경우,

자바스크립트에서는 rest 파라미터를 사용하여 이러한 상황을 처리할 수 있습니다.

rest 파라미터는 함수 선언에서 파라미터 이름 앞에 세 개의 점(...)을 붙여 정의합니다.

 

function 전부더하기(...a) {
  console.log(a);
}

전부더하기(1, 2, 3, 4, 5); // 출력: [1, 2, 3, 4, 5]

 

위 예시에서 ...a는 함수에 전달된 모든 인수를 하나의 배열로 모아줍니다. 따라서, 이 함수에 몇 개의 파라미터가 들어오든 상관없이 배열로 받아 처리할 수 있습니다. 이를 rest 파라미터라고 부르며, 다음과 같은 특징이 있습니다:

 

• rest 파라미터는 반드시 다른 일반 파라미터 뒤에 와야 합니다.
• rest 파라미터는 모든 인수를 배열 형태로 감싸줍니다.

Rest 파라미터의 타입 지정

타입스크립트에서는 rest 파라미터의 타입을 배열로 지정할 수 있습니다.

function 전부더하기(...a: number[]) {
  console.log(a);
}

전부더하기(1, 2, 3, 4, 5);

 

 

rest 파라미터는 항상 배열로 받기 때문에, 타입스크립트에서는 배열 타입(number[])으로 지정해야 합니다.

 

 

2. Spread 연산자 (Spread Operator)

자바스크립트에서 점 세 개(...)를 사용하는 또 다른 경우는 spread 연산자입니다.

이 연산자는 배열이나 객체의 괄호를 벗기고 그 내부의 요소를 개별적으로 나열하는 데 사용됩니다.

let arr = [3, 4, 5];
let arr2 = [1, 2, ...arr];
console.log(arr2); // 출력: [1, 2, 3, 4, 5]

위 예시에서 ...arr은 arr 배열의 모든 요소를 arr2에 개별적으로 펼쳐 넣습니다. 결과적으로 arr2는 [1, 2, 3, 4, 5]가 됩니다.

 

• spread 연산자는 배열이나 객체를 펼쳐서 사용하고 싶을 때, 변수 앞에 사용합니다.
• rest 파라미터는 함수의 파라미터로 여러 개의 값을 받을 때, 함수 선언에서 파라미터 앞에 사용합니다.

 

3. Destructuring 문법 (Destructuring Syntax)

자바스크립트에서는 배열이나 객체의 데이터를 쉽게 추출하여 변수에 할당하는 문법을 제공합니다.

이를 destructuring이라고 합니다. 기존에는 다음과 같이 데이터를 변수에 할당했습니다

let 사람 = { student: true, age: 20 };
let student = 사람.student;
let age = 사람.age;

 

위 코드는 문제가 없지만, 개발자들은 더 간결하게 코드를 작성하고 싶어 destructuring이라는 문법을 만들었습니다.

 

객체의 Destructuring

객체의 데이터를 변수로 빠르게 할당하는 방법은 다음과 같습니다

let { student, age } = { student: true, age: 20 };
console.log(student); // 출력: true
console.log(age); // 출력: 20

 

 

배열의 Destructuring

배열에서도 동일하게 destructuring 문법을 사용할 수 있습니다

let [a, b] = ['안녕', 100];
console.log(a); // 출력: '안녕'
console.log(b); // 출력: 100

 

 

Destructuring을 함수 파라미터에 사용하기

destructuring은 함수의 파라미터에서도 사용할 수 있습니다.

이 경우 함수가 호출될 때 전달된 객체의 특정 속성을 직접 변수로 추출할 수 있습니다.

let person = { student: true, age: 20 };

function 함수({ student, age }) {
  console.log(student, age);
}
함수(person);
or
함수({ student: true, age: 20 });

 

 

 

Rest 파라미터는 함수에서 인수의 수가 유동적일 때 사용하며, 여러 인수를 배열 형태로 받을 수 있게 해줍니다.

Spread 연산자는 배열이나 객체를 개별 요소로 펼칠 때 사용합니다.

Destructuring 문법은 배열이나 객체에서 데이터를 추출하여 변수를 생성할 때 유용합니다.

이를 통해 코드를 간결하고 이해하기 쉽게 만들 수 있습니다.