Avatar ·

What do three dots mean in React? Explain the spread syntax

Hello! I started learning React and often see strange three dots before objects or arrays in code examples. For example: ```javascript const newObject = { ...oldObject, newKey: 'value' }; ``` Or in JSX: ```jsx const props = { name: 'John', age: 30 }; ``` I understand that this is somehow related to copying data, but I don't fully understand it. When I try to write similar code without these dots, everything breaks. For example, I wanted to merge two objects: ```javascript const user = { name: 'Alice' }; const details = { age: 25, city: 'Moscow' }; const merged = user + details; // Error! ``` Or copy an array: ```javascript const arr1 = [1, 2, 3]; const arr2 = arr1; // But this is a reference, not a copy! arr2.push(4); console.log(arr1); // [1,