TypeScript - rest parameter / destructuring

TypeScript

 

 

728x90

 

🖥️ Rest parameter 개념

TypeScript에서 Rest parameter는 함수의 파라미터로서 사용 되며, 함수가 임의의 개수의 인자를 받을 수 있게 해준다. Rest parameter는 함수 정의에서 세 개의 점(...)으로 표시되며, 이는 나머지 모든 인자를 배열로 수집한다는 것을 의미한다.

 

간단하게 Rest parameter 개념 설명을 해보자.

 

함수에 어떤 parameter가 몇 개 들어올지 미리 정의가 불가능한 경우가 있다. 이럴경우 점(...)으로 Rest parameter를 만들어 주면된다.

function Add(...a){
  console.log(a)
}

Add(1,2,3,4,5)

 

• Rest parameter는 다른 일반 파라미터 뒤에만 나올 수 있다.
• Rest parameter 자리에 넣은 값들은 전부 [ ] 안에 담겨 있다.

 

🖥️ Rest parameter 타입 지정

function concatenateStrings(separator: string, ...strings: string[]): string {
    return strings.join(separator);
}

const result = concatenateStrings(", ", "Hello", "World", "!");
console.log(result); // 출력: Hello, World, !

 

위 코드에서 concatenateStrings 함수는 separator와 나머지 모든 문자열을 받아 이들을 연결한 문자열을 반환한다. Rest parameter로 선언된 strings는 배열로 처리되어 함수 내부에서 사용된다.

 

주요 포인트만 설명해 본다면,

 

1. ...string: string[ ] : Rest parameter로 선언되어 있다. 이것은 함수가 여러 개의 문자열을 받을 수 있다는 것을 나타낸다.
2. 함수 호출 : concatenateStrings(", ", "Hello", "World", "!") 에서 separator는 ", " 이고, 나머지 문자열들은 배열로 전달된다.
3. strings.join(separator) : 함수 내에서 Rest parameter인 strings는 배열로 취급되기 때문에 배열 메서드인 join을 사용하여 배열 요소를 구분자(separator)로 연결한다.

 

🖥️ Spread operator와 다르다.

점 세개(...)를 붙이는 경우가 또 있다. array 혹은 object 괄호를 벗기고 싶을 때 왼쪽에 사용한다.

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

 

🖥️ Destructuring의 개념

TypeScript에서 Destructuring은 배열이나 객체를 비구조화하여 그 요소를 개별 변수로 추출하는 것을 의미한다. 배열 또는 객체에서 원하는 값만 추출하여 변수로 선언할 수 있어 코드를 간결하게 만들 수 있다.

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

 

위 코드는 JavaScript에서 array, object 안에 있는 데이터를 빼서 변수로 만들고 싶을 때 쓰는 코드이다. 위 코드보다 더 간결하고 빠르게 작성하기 위해 Destructuring을 사용한다.

let human = { student : true, age : 20 }
let { student, age } = { student : true, age : 20 }

 

위 코드처럼 쓰면 변수로 뺄 수 있다. 이것을 Destructuring 문법이라고 한다.

 

🖥️ 배열 Destructuring

const numbers: number[] = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 출력: 1
console.log(second); // 출력: 2
console.log(rest); // 출력: [3, 4, 5]

 

위 코드에서 [ first, second, ...rest] 부분이 배열 Destructuring 이다. 배열의 첫 번째 요소는 first 변수에 할당되고, 두 번째 요소는 second 변수에 할당 된다. 나머지 요소들은 rest 배열에 할당된다.

 

🖥️ 객체 Destructuring

const person = { name: "John", age: 30, city: "New York" };

const { name, age } = person;

console.log(name); // 출력: John
console.log(age); // 출력: 30

 

위 코드에서 { name, age } 부분이 객체 Destructuring 이다. 객체의 속성 이름과 일치하는 변수에 값을 할당한다. 객체 Destructuring은 변수의 이름을 속성 이름과 일치시키는 것이 일반적이다.

 

🖥️ 함수 매개변수에서의 Destructuring

function printPersonInfo({ name, age }: { name: string; age: number }): void {
    console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: "Alice", age: 25 };
printPersonInfo(person);
// 출력: Name: Alice, Age: 25

 

함수의 매개변수에서도 객체 Destructuring을 사용할 수 있다. 이렇게 하면 함수 내에서 객체의 특정 속성에 직접 접근할 수 있다.