Relation between import and destructing es6 syntax?

Question

import:

import React, { Component } from 'react';

Destructuring:

let z, {b} = {a: 1, b: 2, c: 3}

it looks that they follow same syntax.

but in second one, z will be undefined instead of {a: 1, b: 2, c: 3} .

so import syntax is different than es6 Destructuring? How their syntax are related to each other?

Answer 1

There is no relation at all. The full syntax for your import declaration is

import { default as React, Component as Component } from 'react';

while the full syntax for your destructuring variable declaration is

let z = undefined, { b: b } = {a: 1, b: 2, c: 3};

They do totally different things. Imports create aliases, destructuring patterns put values into targets (with optional default initialisers and nesting). That their shorthand forms are similar to each other is mostly coincidental, caused by both using braces. However, blocks do as well:

React; { Component } z; { b }

is valid JavaScript:-)