Destructuring with Imports

Import Destructuring

ES module named imports use the same brace syntax as object destructuring, letting you cherry-pick exports.

Example

import { useState, useEffect, useCallback } from "react";
import { format, parseISO, addDays } from "date-fns";
// Rename import
import { get as httpGet, post as httpPost } from "./api.js";
// CommonJS equivalent
const { readFileSync, writeFileSync } = require("fs");

JAVASCRIPT

Full Editor

Pro Tip

Named imports enable tree-shaking — bundlers drop unused exports from the final bundle.

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned