Destructuring

Flow supports the JavaScript construct of destructuring, which allows you to extract data from structured values. Here is a simple example:

1
2
3
4

/* @flow */
var arr = [1, '', true];
var [a, b, c] = arr;
// a: number (1), b: string (''), c : boolean (true)

The canonical example of destructuring is swapping:

1
2
3

var a = 1, b = 2;
[a, b] = [b, a];
// a = 2, b = 1

Destructuring and Type Checks#

Flow can verify that any destructuring in your code is type-safe.

1
2
3
4
5
6
7

/* @flow */
var arr = [1, '', 'Hello', true];
// If you only care about some of the return values, you can skip some
// elements with , ,
var [a, b, ,c] = arr;
// a: number (1), b: string (''), c : boolean (true)
var z: number = a * c;

Above we have a four (4) element array arr (actually a tuple) . And then we destructure that array into three (3) variables, a, b, c. However, we then try to multiply a (a number), and c (a boolean). Flow catches this.

/tmp/flow/f.js:2:28,31: boolean
This type is incompatible with
  /tmp/flow/f.js:5:17,21: number

Found 1 error

Another Example#

1
2
3
4

/* @flow */
var {x, y, ...o} = {x: '', y: 3, o: {z: false} }
// x: string, y: number, o: {z: boolean}
var z: number = o;

/tmp/flow/f.js:3:5,16: object pattern
This type is incompatible with
  /tmp/flow/f.js:5:8,13: number

Found 1 errors

o has been destructed as an object that contains a boolean value. That cannot be assigned to a number.

← Prev Next →

You can edit this page on GitHub and send us a pull request!