Back to Glossary

Destructuring

التفكيك (Destructuring)

Beginnerprogramming1 min read
destructuring assignmentobject destructuringarray destructuringspread operator
Official DocsSign in to save & take notes

Definition

JavaScript syntax for unpacking values from objects or arrays into named variables in one line.

بنية JavaScript لاستخراج القيم من الكائنات أو المصفوفات إلى متغيرات مسماة في سطر واحد.

Why It Matters

Every hook call in React uses destructuring: const { t, isRTL } = useLanguage(); const [loading, setLoading] = useState(true). Mastering destructuring makes React code cleaner.

كل استدعاء خطاف في React يستخدم التفكيك: const { t, isRTL } = useLanguage(); const [loading, setLoading] = useState(true). إتقان التفكيك يجعل كود React أنظف.

Full Definition

Destructuring lets you pull properties out of objects or elements out of arrays into distinct variables concisely. Object destructuring: `const { user, profile } = useAuth()`. Array destructuring: `const [count, setCount] = useState(0)`. Destructuring is used in nearly every React component for props, hooks, and API responses. The rest operator (...rest) captures remaining properties.
التفكيك يتيح استخراج الخصائص من الكائنات أو العناصر من المصفوفات إلى متغيرات متميزة بإيجاز. تفكيك الكائن: `const { user, profile } = useAuth()`. تفكيك المصفوفة: `const [count, setCount] = useState(0)`.

Example Usage

“const { nameEn, nameAr, difficulty, slug } = term; — or: const [open, setOpen] = useState(false);”

“const { nameEn, nameAr, difficulty, slug } = term; — أو: const [open, setOpen] = useState(false);”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Destructuring:

1

Deeply nested destructuring that makes code hard to read

2

Forgetting to provide default values for optional properties

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Destructuring.

Explain:
1. What is Destructuring and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Deeply nested destructuring that makes code hard to read, Forgetting to provide default values for optional properties
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account