How can I merge two arrays of objects based on a common key without duplicates in JavaScript?

<!-- BEGIN COPY / PASTE -->
        const array1 = [
            { id: 1, name: "John" },
            { id: 2, name: "Jane" }
        ];

        const array2 = [
            { id: 2, name: "Jane" },
            { id: 3, name: "Doe" }
        ];

        const mergedArray = [...array1, ...array2].reduce((acc, current) => {
            const x = acc.find(item => item.id === current.id);
            if (!x) {
                acc.push(current);
            }
            return acc;
        }, []);

        console.log(mergedArray);
        <!-- END COPY / PASTE -->