📥 Input Data
📋 Destructuring Code
Click "Generate" to see result
📋 TypeScript Types
Type definitions will be generated automatically
Input JSON/array to auto-generate JavaScript destructuring code with nesting, renaming, and defaults
Zero Dependencies · Works OfflineJS Destructuring Generator is a free online developer tool that automatically generates JavaScript destructuring assignment code from JSON objects or arrays. It supports object destructuring, array destructuring, nested destructuring, property renaming, default values, and TypeScript type generation. Ideal for quickly writing ES6+ code, learning destructuring syntax, and processing API responses. All processing happens locally in your browser.
1. Paste JSON data into the input box, or click an example button.
2. Select declaration type (const/let/var) and source variable name.
3. Check "Add defaults" or "Deep destruct" options as needed.
4. Click "Generate" to see the code, then copy with one click.
Frontend developers quickly extract needed fields from complex API JSON responses with generated destructuring code.
Beginners understand destructuring syntax by comparing JSON data with generated code.
Batch refactor obj.key access patterns into destructuring assignments for better readability.
Destructuring Assignment is an ES6 feature that allows extracting values from arrays or objects into variables. Object destructuring uses curly braces {} matching by property name, while array destructuring uses brackets [] matching by position. Advanced features include: renaming ({ oldName: newName }), defaults ({ key = defaultValue }), rest parameters ({ ...rest }), nested destructuring ({ a: { b } }), and function parameter destructuring. Widely used in React Hooks, import statements, and for...of loops.
ES6 syntax for extracting values from arrays/objects into variables concisely.
Objects match by property name using {}, arrays match by position using [].
Yes, { name: userName } assigns the name property to userName.
Yes, { age = 18 } uses 18 as default when the property is missing.
{ a, ...rest } collects all properties except a into the rest object.
No. All code generation happens locally in your browser.