[TypeScript] Destructuring and Spread

Array Destructuring

let input = [1, 2];
let [first, second] = input;

console.log(`${first}, ${second}`);
// 1, 2

Multiple values of an array can be easily assigned as variables.

 

function f([first, second]: [number, number]) {
  console.log(`${first}, ${second}`);
}
f([1, 2])
// 1, 2

It can be also applied in the parameters of a function.

 

let [first, ...rest] = [1, 2, 3, 4];

console.log(first);
// outputs 1

console.log(rest); 
// outputs [ 2, 3, 4 ]

It can create an array with remaining items after destructuring.

 

let [, second, , fourth] = [1, 2, 3, 4];

console.log(`${second}, ${fourth}`);
// 2, 4

It can be assigned values while skipping items.

Tuple Destructuring

let tuple: [number, string, boolean] = [7, "hello", true];
let [first, second, third] = tuple;

console.log(`${first}, ${second}, ${third}`);
// 7, hello, true

Tuples may be destructured like arrays.

Object Destructuring

let obj = {
  first: 7,
  second: "hello",
  third: true
};
let { first, second } = obj;

console.log(`${first}, ${second}`);
// 7, "hello"

You can also destructure object.

 

let obj = {
  first: 7,
  second: "hello",
  third: true
};

let { first: newFirst, second: newSecond } = obj;

console.log(`${newFirst}, ${newSecond}`);
// 7, hello

You can give different names to properties.

 

let obj = {
  first: 7,
  second: "hello",
  third: undefined
};

let { first = 3, second = "hi", third = false } = obj;

console.log(`${first}, ${second}, ${third}`);
// 7, hello, false

You can specify a default value in case a property is undefined.

 

function f({ first = 1, second = "test" }): void {
  console.log(`${first}, ${second}`);
}

f({ first: 7 });
// 7, test

f({});
// 1, test

f({ second: "hello" });
// 1, hello

Destructuring alsk works in function declarations.

Spread

The spread operator is the opposite of destructuring.

It allows you to spread an array into another array, or an object into another object.

let list1 = [1, 2];
let list2 = [3, 4];
let totalList = [0, ...list1, ...list2, 5];

console.log(totalList);
// [0, 1, 2, 3, 4, 5]

let obj = { first: "hello", second: 7 };
let totalObj = { ...obj, third: true };

console.log(totalObj);
// {first: 'hello', second: 7, third: true}

 

In an object, spread can overwrite properties.

let obj = { first: "hello", second: 7 };
let preObj = { ...obj, first: "hi" };
let postObj = { first: "hi", ...obj };	// Error: it will be overwritten.

console.log(preObj); 
// {first: 'hi', second: 7}

console.log(postObj);
// {fist: 'hello', second: 7}

 

Object spread only includes an objects' own enumerable properties.

It means you will lose methods when you spread instances of an object.

class Test {
  prop = 12;
  method() {
    console.log('hi');
  }
}

let test = new Test();
let spreadTest = { ... test };

console.log(spreadTest.prop);
// 12

spreadTest.method();  // Error: It doesn't exist on object.

 

The TypeScript compiler soesn't allow spreads of type parameters from generic functions.

Reading Together

2020/09/02 - [Web/JavaScript] - [JavaScript] Array Destructuring

2020/09/02 - [Web/JavaScript] - [JavaScript] Object Destructuring