Back to Glossary

Spread Operator

عامل الانتشار (Spread Operator)

Beginnerprogramming1 min read
...spreadrest paramsobject spreadarray spread
Official DocsSign in to save & take notes

Definition

The ... syntax for expanding arrays or objects into individual elements or properties.

بنية ... لتوسيع المصفوفات أو الكائنات إلى عناصر أو خصائص فردية.

Why It Matters

React state must never be mutated directly. `setItems([...items, newItem])` is the correct pattern — the spread creates a new array, triggering a re-render.

حالة React يجب ألا تُحوَّر مباشرةً أبدًا. `setItems([...items, newItem])` هو النمط الصحيح — الانتشار ينشئ مصفوفة جديدة، مما يُشغّل إعادة التصيير.

Full Definition

The spread operator (...) copies elements from one array/object into another. It's essential for immutable state updates in React: `setProject({ ...project, title: newTitle })` creates a new object rather than mutating the existing one. Array spread: `[...existing, newItem]` adds to arrays without mutation. Also used to pass props: `<Component {...props} />`.
عامل الانتشار (...) ينسخ عناصر من مصفوفة/كائن إلى آخر. أساسي لتحديثات الحالة غير المتحورة في React: `setProject({ ...project, title: newTitle })` ينشئ كائنًا جديدًا بدلاً من تحوير الموجود.

Example Usage

“const updatedTerm = { ...existingTerm, updatedAt: new Date() }; await db.collection('glossary').doc(id).set(updatedTerm, { merge: true });”

“const updatedTerm = { ...existingTerm, updatedAt: new Date() }; await db.collection('glossary').doc(id).set(updatedTerm, { merge: true });”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Spread Operator:

1

Shallow spread doesn't deep-clone — nested objects still share references

2

Spreading large objects in hot paths can hurt performance

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 Spread Operator.

Explain:
1. What is Spread Operator and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Shallow spread doesn't deep-clone — nested objects still share references, Spreading large objects in hot paths can hurt performance
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account