Spread and Rest Operators

// Basic array spreading
const numbers = [1, 2, 3];
console.log(...numbers);  // 1 2 3

// Combining arrays
const moreNumbers = [4, 5, 6];
const combined = [...numbers, ...moreNumbers];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

// Inserting elements
const inserted = [0, ...numbers, 4];
console.log(inserted);  // [0, 1, 2, 3, 4]

// Copying arrays (shallow copy)
const original = [1, 2, 3];
const copy = [...original];
console.log(copy);  // [1, 2, 3]
copy.push(4);
console.log(original);  // [1, 2, 3] (unchanged)
console.log(copy);     // [1, 2, 3, 4]

// Basic object spreading
const person = { name: 'Alice', age: 30 };
const personWithJob = { ...person, job: 'Developer' };
console.log(personWithJob);  // { name: 'Alice', age: 30, job: 'Developer' }

// Combining objects
const address = { city: 'New York', country: 'USA' };
const completeProfile = { ...person, ...address };
console.log(completeProfile);  
// { name: 'Alice', age: 30, city: 'New York', country: 'USA' }

// Copying objects (shallow copy)
const original = { x: 1, y: 2 };
const copy = { ...original };
copy.z = 3;
console.log(original);  // { x: 1, y: 2 }
console.log(copy);     // { x: 1, y: 2, z: 3 }

// Property overriding (last one wins)
const settings = { theme: 'light', fontSize: 14 };
const userSettings = { theme: 'dark' };
const finalSettings = { ...settings, ...userSettings };
console.log(finalSettings);  // { theme: 'dark', fontSize: 14 }

// Shallow copy example
const user = {
    name: 'Bob',
    address: {
        city: 'Chicago',
        zipCode: '60601'
    }
};

const userCopy = { ...user };

// Modifying a top-level property
userCopy.name = 'Robert';
console.log(user.name);      // 'Bob' (unchanged)
console.log(userCopy.name);  // 'Robert'

// But modifying a nested object property affects both
userCopy.address.city = 'Miami';
console.log(user.address.city);      // 'Miami' (changed!)
console.log(userCopy.address.city);  // 'Miami'

// Math.max() expects separate arguments, not an array
const numbers = [5, 2, 8, 1, 4];

// Old way with apply
const max1 = Math.max.apply(null, numbers);

// New way with spread
const max2 = Math.max(...numbers);

console.log(max1, max2);  // 8 8

// Combining with regular arguments
function createUser(name, age, ...hobbies) {
    return { name, age, hobbies };
}

const userData = ['Alice', 30];
const hobbies = ['reading', 'hiking', 'coding'];

const user = createUser(...userData, ...hobbies);
console.log(user);
// { name: 'Alice', age: 30, hobbies: ['reading', 'hiking', 'coding'] }

// Adding an item to an array at a specific position
function insertItem(array, index, item) {
    return [
        ...array.slice(0, index),
        item,
        ...array.slice(index)
    ];
}

const colors = ['red', 'green', 'blue'];
const newColors = insertItem(colors, 1, 'yellow');
console.log(newColors);  // ['red', 'yellow', 'green', 'blue']

// Merging objects with custom logic
function mergeWithDefaults(defaults, userOptions) {
    return {
        ...defaults,
        ...userOptions,
        // Ensure timestamp is always the current time regardless of userOptions
        timestamp: new Date().toISOString()
    };
}

const defaultSettings = {
    theme: 'light',
    fontSize: 14,
    showNotifications: true,
    timestamp: null
};

const userSettings = {
    theme: 'dark',
    fontSize: 16,
    timestamp: '2022-01-01'  // This will be overridden
};

const finalSettings = mergeWithDefaults(defaultSettings, userSettings);
console.log(finalSettings);
// {
//   theme: 'dark',
//   fontSize: 16,
//   showNotifications: true,
//   timestamp: '2023-05-08T14:30:45.123Z' (current time)
// }

// Collecting remaining arguments
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2));           // 3
console.log(sum(1, 2, 3, 4, 5));  // 15

// Mixing regular parameters with rest parameter
function createTeam(teamName, teamLeader, ...members) {
    return {
        name: teamName,
        leader: teamLeader,
        members: members,
        size: members.length + 1  // +1 for the leader
    };
}

const team = createTeam('Engineering', 'Alice', 'Bob', 'Charlie', 'Diana');
console.log(team);
// {
//   name: 'Engineering',
//   leader: 'Alice',
//   members: ['Bob', 'Charlie', 'Diana'],
//   size: 4
// }

// Basic array destructuring with rest
const [first, second, ...remaining] = [1, 2, 3, 4, 5];
console.log(first);      // 1
console.log(second);     // 2
console.log(remaining);  // [3, 4, 5]

// Skipping elements
const [winner, runnerUp, ...others] = ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve'];
console.log(winner);     // 'Alice'
console.log(runnerUp);   // 'Bob'
console.log(others);     // ['Charlie', 'Diana', 'Eve']

// Empty rest array is possible
const [head, ...tail] = [1];
console.log(head);  // 1
console.log(tail);  // []

// Basic object destructuring with rest
const { name, age, ...otherProps } = {
    name: 'Alice',
    age: 30,
    job: 'Developer',
    city: 'New York',
    hobbies: ['reading', 'hiking']
};

console.log(name);        // 'Alice'
console.log(age);         // 30
console.log(otherProps);  // { job: 'Developer', city: 'New York', hobbies: ['reading', 'hiking'] }

// Using in function parameters
function processUser({ id, username, ...metadata }) {
    console.log(`Processing user ${id}: ${username}`);
    console.log('Additional metadata:', metadata);
}

processUser({
    id: 42,
    username: 'alice',
    email: 'alice@example.com',
    registeredAt: '2023-01-15',
    lastLogin: '2023-05-07'
});
// Output:
// Processing user 42: alice
// Additional metadata: { email: 'alice@example.com', registeredAt: '2023-01-15', lastLogin: '2023-05-07' }

// Example showing both spread and rest in action
function addTags(firstTag, secondTag, ...otherTags) {
    // 'otherTags' is a REST parameter (collecting values)
    return ['featured', firstTag, secondTag, ...otherTags];
    // '...otherTags' is a SPREAD operator (expanding values)
}

const result = addTags('javascript', 'tutorial', 'es6', 'web');
console.log(result);
// ['featured', 'javascript', 'tutorial', 'es6', 'web']

// Original state
const state = {
    user: {
        id: 42,
        name: 'Alice',
        preferences: {
            theme: 'light',
            fontSize: 14,
            notifications: true
        }
    },
    posts: [
        { id: 1, title: 'First Post', likes: 5 },
        { id: 2, title: 'Second Post', likes: 10 }
    ],
    isLoading: false
};

// Updating nested property immutably
const updatedState = {
    ...state,
    user: {
        ...state.user,
        preferences: {
            ...state.user.preferences,
            theme: 'dark'
        }
    }
};

console.log(updatedState.user.preferences.theme);  // 'dark'
console.log(state.user.preferences.theme);        // 'light' (unchanged)

// Adding a new post immutably
const stateWithNewPost = {
    ...state,
    posts: [
        ...state.posts,
        { id: 3, title: 'Third Post', likes: 0 }
    ]
};

console.log(stateWithNewPost.posts.length);  // 3
console.log(state.posts.length);            // 2 (unchanged)

// Updating an item in an array immutably
const postIdToUpdate = 2;

const stateWithUpdatedPost = {
    ...state,
    posts: state.posts.map(post => 
        post.id === postIdToUpdate
            ? { ...post, likes: post.likes + 1 }
            : post
    )
};

console.log(stateWithUpdatedPost.posts[1].likes);  // 11
console.log(state.posts[1].likes);                // 10 (unchanged)

// Helper functions
const double = x => x * 2;
const increment = x => x + 1;
const square = x => x * x;

// Function composition using rest and spread
const compose = (...functions) => {
    return (initialValue) => {
        return functions.reduceRight((value, func) => {
            return func(value);
        }, initialValue);
    };
};

// Creates a function that applies functions from right to left
const compute = compose(square, increment, double);
// Equivalent to: square(increment(double(5)))

console.log(compute(5));  // 121
// 5 → double → 10 → increment → 11 → square → 121

// Pipe (left-to-right composition)
const pipe = (...functions) => {
    return (initialValue) => {
        return functions.reduce((value, func) => {
            return func(value);
        }, initialValue);
    };
};

const computeInOrder = pipe(double, increment, square);
// Equivalent to: square(increment(double(5)))

console.log(computeInOrder(5));  // 121
// 5 → double → 10 → increment → 11 → square → 121

// A method to create a deep clone (with limitations)
function deepClone(obj) {
    // Note: This method doesn't handle functions, undefined values,
    // circular references, etc.
    return JSON.parse(JSON.stringify(obj));
}

// Using spread for shallow clone plus manual deep cloning
function betterClone(obj) {
    // Start with a shallow clone
    const clone = { ...obj };
    
    // Deep clone any nested objects
    for (const key in clone) {
        if (typeof clone[key] === 'object' && clone[key] !== null) {
            clone[key] = betterClone(clone[key]);
        }
    }
    
    return clone;
}

const user = {
    name: 'Bob',
    address: {
        city: 'Chicago',
        zipCode: '60601'
    }
};

const deepUserCopy = betterClone(user);
deepUserCopy.address.city = 'Miami';

console.log(user.address.city);        // 'Chicago' (unchanged)
console.log(deepUserCopy.address.city); // 'Miami'

// Creating objects with dynamic keys
function createObjectWithKey(key, value) {
    return { [key]: value };
}

const dynamicKey = 'email';
const partialUser = createObjectWithKey(dynamicKey, 'user@example.com');
console.log(partialUser);  // { email: 'user@example.com' }

// Combining with spread to build objects dynamically
function buildUserObject(name, age, additionalProps = {}) {
    return {
        name,
        age,
        createdAt: new Date().toISOString(),
        ...additionalProps
    };
}

const newUser = buildUserObject('Charlie', 35, {
    role: 'admin',
    permissions: ['read', 'write', 'delete']
});

console.log(newUser);
// {
//   name: 'Charlie',
//   age: 35,
//   createdAt: '2023-05-08T15:30:45.123Z',
//   role: 'admin',
//   permissions: ['read', 'write', 'delete']
// }

// Common pattern in React for passing props
function ParentComponent() {
    const commonProps = {
        theme: 'dark',
        isLoggedIn: true,
        user: { id: 1, name: 'Alice' }
    };
    
    return (
        `<div>
            <Header {...commonProps} title="Dashboard" />
            <Sidebar {...commonProps} activeMenu="home" />
            <Content 
                {...commonProps} 
                showBanner={false}
                onRefresh={() => console.log('Refreshing...')}
            />
        </div>`
    );
}

// In a child component, you can use rest to collect unknown props
function Button({ className, children, ...otherProps }) {
    return (
        `<button 
            className={\`btn ${className || ''}\`}
            {...otherProps}
        >
            {children}
        </button>`
    );
}

// Usage
// <Button 
//   className="primary"
//   onClick={() => console.log('Clicked')}
//   disabled={false}
//   data-testid="submit-button"
// >
//   Submit
// </Button>

// Building API request bodies
function createApiRequest(endpoint, data, options = {}) {
    const defaultOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        credentials: 'include'
    };
    
    return fetch(endpoint, {
        ...defaultOptions,
        ...options,
        body: JSON.stringify(data),
        headers: {
            ...defaultOptions.headers,
            ...options.headers  // Allow overriding individual headers
        }
    });
}

// Usage
async function createUser(userData) {
    try {
        const response = await createApiRequest('/api/users', userData, {
            headers: {
                'Authorization': `Bearer ${getToken()}`
            }
        });
        
        return await response.json();
    } catch (error) {
        console.error('Error creating user:', error);
        throw error;
    }
}

// Creating flexible event handlers
function createEventHandler(callback, ...fixedArgs) {
    return (...eventArgs) => {
        callback(...fixedArgs, ...eventArgs);
    };
}

// Main event handler
function handleAction(userId, action, event) {
    event.preventDefault();
    console.log(`User ${userId} performed ${action} action`);
    console.log('Event:', event.type);
}

// Create specific handlers
const handleUserDelete = createEventHandler(handleAction, 'user123', 'delete');
const handleUserEdit = createEventHandler(handleAction, 'user123', 'edit');

// Usage with event listeners
// document.getElementById('deleteBtn').addEventListener('click', handleUserDelete);
// document.getElementById('editBtn').addEventListener('click', handleUserEdit);

// Performance comparison example

// Inefficient: Creating new array on each iteration
function inefficientWay(array) {
    let result = [];
    for (let i = 0; i < 1000; i++) {
        // Creates a new array in each iteration
        result = [...result, i];
    }
    return result;
}

// More efficient: Using push
function efficientWay(array) {
    let result = [];
    for (let i = 0; i < 1000; i++) {
        result.push(i);
    }
    return result;
}

// Performance test
console.time('inefficient');
inefficientWay();
console.timeEnd('inefficient');

console.time('efficient');
efficientWay();
console.timeEnd('efficient');

// The efficient way will be significantly faster

// For large object manipulations, consider libraries like Immer
// that provide efficient immutable updates with a mutable-style API

// Modern code with spread/rest
const numbers = [1, 2, 3];
const combined = [...numbers, 4, 5];

function sum(...args) {
    return args.reduce((sum, num) => sum + num, 0);
}

// Transpiled by Babel for older browsers
"use strict";

var numbers = [1, 2, 3];
var combined = [].concat(numbers, [4, 5]);

function sum() {
    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
    }
    
    return args.reduce(function(sum, num) {
        return sum + num;
    }, 0);
}