export default function App() {
  const fruits = ['apple', 'banana'];
  const moreFruits = [...fruits, 'cherry', 'date'];
  console.log(moreFruits); // ['apple', 'banana', 'cherry', 'date']

  // Shallow copy
  const copy = [...fruits];
  copy.push('elderberry');
  console.log(fruits);  // unchanged: ['apple', 'banana']
  console.log(copy);    // ['apple', 'banana', 'elderberry']

  // Combining two arrays
  const a = [1, 2];
  const b = [3, 4];
  const combined = [...a, ...b]; // [1, 2, 3, 4]

  return (
    <div>
      <p>moreFruits: {moreFruits.join(', ')}</p>
      <p>fruits (unchanged): {fruits.join(', ')}</p>
      <p>copy: {copy.join(', ')}</p>
      <p>combined: {combined.join(', ')}</p>
      <p>Open the console to see the logged values.</p>
    </div>
  );
}