Array Helper Utilities
In this page:
Loop Through an Array
$.each() iterates over every element of an array (or every property of an object), running a callback once per item and passing in the index and value each time. It's a general-purpose looping utility that works the same way regardless of whether you're iterating an array or a plain object.
Example: Loop Through an Array
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const fruits = ["Apple", "Banana"];
$.each(fruits, function(index, value) {
console.log(index, value);
});
</script>
</body>
</html>Find an Item
The inArray utility searches an array for a specific value and returns its numeric index if found, or -1 if it isn't present — similar to the native Array.indexOf(). It's handy for a quick membership check without writing a manual loop.
Example: Find an Item
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const fruits = ["Apple", "Banana", "Cherry"];
console.log($.inArray("Banana", fruits));
</script>
</body>
</html>Merge Arrays
The merge utility combines two arrays by appending the contents of the second array onto the end of the first, modifying the first array in place. It's a simple way to concatenate lists of data pulled from different sources into one combined array.
Example: Merge Arrays
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const a = [1, 2];
const b = [3, 4];
$.merge(a, b);
console.log(a);
</script>
</body>
</html>Filter Array Values
The grep utility builds a new array containing only the values from an existing array that pass a test function you provide, similar to the native Array.filter(). It's useful for narrowing down a large list — like showing only completed tasks from a full task list — without a manual loop.
Example: Filter Array Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const nums = [1, 2, 3, 4, 5];
const evens = $.grep(nums, function(n) { return n % 2 === 0; });
console.log(evens);
</script>
</body>
</html>Small Array Project
These array utilities are useful any time you're working with a list of related items — students, products, courses — and need to search, combine, or filter them before displaying or processing the results.
Example: Small Array Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const students = ["Alice", "Bob", "Charlie"];
const filtered = $.grep(students, function(name) { return name.startsWith("A"); });
console.log(filtered);
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: