Merge Two Arrays Online
Visualize overlap and differences between two arrays before merging. See shared elements, unique items, and potential conflicts.
🔒 100% private — runs entirely in your browseror try sample data
Visualize overlap and differences between two arrays before merging. See shared elements, unique items, and potential conflicts.
🔒 100% private — runs entirely in your browseror try sample data
Array merging combines elements from two or more arrays into a single collection. The fundamental challenge is deciding what to do with elements that appear in both arrays: keep duplicates, deduplicate, or apply some conflict resolution strategy. Before writing merge code, it is invaluable to see exactly which elements overlap and which are unique to each side — and that is what this tool provides.
In practice, array merging comes up constantly in software development. You might need to combine user permission lists from two systems, merge feature flags from a default configuration and an override file, consolidate tag arrays from multiple data sources, or join paginated API results. Each scenario has different requirements for handling duplicates and ordering, and a visual diff helps you verify that your merge logic produces the expected output.
Paste your two arrays below as JSON (e.g., ["a", "b", "c"]). The comparison highlights shared elements in white, items unique to the left array in red, and items unique to the right array in green — giving you a clear picture of what a merge would produce. Use the "Ignore array order" option to match elements regardless of position. Everything runs locally in your browser.
const arr1 = ["react", "vue", "angular", "svelte"];
const arr2 = ["vue", "svelte", "solid", "qwik"]; // Simple concat (keeps duplicates)
const merged = [...arr1, ...arr2];
// ["react", "vue", "angular", "svelte", "vue", "svelte", "solid", "qwik"] // Deduplicated merge (array union)
const unique = [...new Set([...arr1, ...arr2])];
// ["react", "vue", "angular", "svelte", "solid", "qwik"] // Preserving order from arr1, then new items from arr2
const ordered = [...arr1, ...arr2.filter(x => !arr1.includes(x))];
// ["react", "vue", "angular", "svelte", "solid", "qwik"]The Set approach is concise but does not preserve insertion order relative to both arrays. The filter approach gives you explicit control over ordering priority.
list1 = ["react", "vue", "angular", "svelte"]
list2 = ["vue", "svelte", "solid", "qwik"] # Simple concatenation
merged = list1 + list2
# ['react', 'vue', 'angular', 'svelte', 'vue', 'svelte', 'solid', 'qwik'] # Deduplicated (loses order)
unique_set = list(set(list1 + list2)) # Deduplicated (preserves order, Python 3.7+)
unique_ordered = list(dict.fromkeys(list1 + list2))
# ['react', 'vue', 'angular', 'svelte', 'solid', 'qwik']The dict.fromkeys() trick leverages dictionary insertion ordering (guaranteed in Python 3.7+) to deduplicate while preserving the first occurrence order.
import java.util.*;
import java.util.stream.*; List<String> list1 = List.of("react", "vue", "angular", "svelte");
List<String> list2 = List.of("vue", "svelte", "solid", "qwik"); // Simple concat
List<String> merged = Stream.concat(list1.stream(), list2.stream()) .collect(Collectors.toList()); // Deduplicated merge
List<String> unique = Stream.concat(list1.stream(), list2.stream()) .distinct() .collect(Collectors.toList());
// [react, vue, angular, svelte, solid, qwik]Java's Stream.concat() with .distinct() preserves encounter order and uses equals() for deduplication. For custom objects, ensure equals() and hashCode() are properly overridden.
When merging arrays of objects, deduplication with Set or === compares by reference, not by content. Two objects with identical properties are still considered different: {a: 1} !== {a: 1}. You need deep equality checks or deduplication by a key field (like id) to properly merge object arrays.
Different merge techniques preserve order differently. JavaScript's Set preserves insertion order, but Python's set() does not. Java's Stream.distinct() preserves encounter order in sequential streams but not in parallel streams. Always verify that your merge method maintains the ordering semantics you need.
Spread syntax and concat() perform a shallow merge — they combine the top-level elements but do not recursively merge nested arrays or objects. If your arrays contain nested structures, a shallow merge may produce duplicated sub-arrays rather than properly combined ones. Use a deep merge utility for recursive structures.
In JavaScript, use the spread operator with a Set: [...new Set([...arr1, ...arr2])]. In Python, use list(dict.fromkeys(list1 + list2)) to preserve order. This tool shows you which elements overlap before you merge, helping you decide how to handle duplicates in your specific scenario.
Concat (or concatenation) appends one array to another, keeping all elements including duplicates. Union returns all unique elements from both arrays, discarding duplicates. Merge is a broader term that can mean either operation, and sometimes implies conflict resolution for overlapping elements. This tool helps you visualize what each operation would produce.
Yes. Paste your arrays of objects as JSON. The tool performs deep comparison to identify which objects appear in both arrays, which are unique to each side, and which have similar structure but differ in specific fields. This gives you a clear picture before writing merge logic.
Use this tool to first identify overlapping and differing elements. The color-coded diff shows exactly which items exist in both arrays (unchanged), which are unique to each side (added/removed), and which are similar but modified. This information helps you decide on a conflict resolution strategy in your code.
Yes, completely free with no account required. All processing happens in your browser using client-side JavaScript. Your data is never sent to any server, making it safe for sensitive or proprietary information.
The tool supports arrays with up to 50,000 elements and total input size up to 5 MB. Both arrays are processed entirely in your browser, so performance depends on your device but works well for most real-world datasets.