Typescript: Destructuring Array

Literally, destructuring is a feature of javascript(EcmaScript 2015) but Typescript also supports it. This feature allows you to extract data from array and object. But in this post, we will focus on destructuring array.

Basic Assignment

How does it work for array? Let’s try a basic assignment


let students = ['budi', 'sinta', 'lusi'];
let [first, second, third] = students;

console.log(first); // 'budi'
console.log(second); // 'sinta'
console.log(third); // 'lusi'

If we do comparison, we used to assign array variables using index like below


let students = ['budi', 'sinta', 'lusi'];
let first = students[0];
let second = students[1];
let third = students[2];

console.log(first); // 'budi'
console.log(second); // 'sinta'
console.log(third); // 'lusi'

We can see that destructuring is nicer and cleaner.

Using Declared Variables

Destructuring also works with declared variables.


let first, second, third;

let students = ['budi', 'sinta', 'lusi'];
[first, second, third] = students;

console.log(first); // 'budi'
console.log(second); // 'sinta'
console.log(third); // 'lusi'

Ignore Elements

We can ignore element assignments in destructuring.

Here we only get the first element


let students = ['budi', 'sinta', 'lusi'];
let [first] = students;

console.log(first); // 'budi'

Below we will get only the first and second element.


let students = ['budi', 'sinta', 'lusi'];
let [first, second] = students;

console.log(first); // 'budi'
console.log(second); // 'sinta'

We can ignore the middle element as following example


let students = ['budi', 'sinta', 'lusi'];
let [first, ,third] = students;

console.log(first); // 'budi'
console.log(third); // 'lusi'

And if you care with just the third element


let students = ['budi', 'sinta', 'lusi'];
let [, ,third] = students;

console.log(third); // 'lusi'

Catch the Rest

We can catch the rest of elements using ... and store it into a variable. It will be stored as array.


let students = ['budi', 'sinta', 'lusi'];
let [first, ...rest] = students;

console.log(first); // 'budi'
console.log(rest); // ['sinta', 'lusi']

Default Value

We can give default value in case the array elements are not exist


let students = ['budi'];
let [first, second='daebak', third='gomawo'] = students;

console.log(first); // 'budi'
console.log(second); // 'daebak'
console.log(third); // 'gomawo'

Swap Variables

One of useful technique of destructuring is to swap variable


let student1 = 'budi';
let student2 = 'sinta';

[student1, student2] = [student2, student1];

console.log(student1); // 'sinta'
console.log(student2); // 'budi'

Function Parameter

We can use destructuring in function parameter


let students = ['budi', 'sinta', 'lusi'];

function printStudent([first, second]: [string, string]) {
  console.log(first);
  console.log(second);
}

printStudent(students);
// outputs:
// 'budi'
// 'sinta'

Array From a Function

Destructuring can be used for array returned from function


let studentName = 'john doe';
let [firstName, lastName] = studentName.split(' ');

console.log(firstName); // 'john'
console.log(lastName); // 'doe'
  • Hassan Mohamed

    function parameter did not work on chrome