Click on a guest or attraction to view details.
Map creates a new array with the results of calling a function for every array element.
const newArray = array.map(callback(element, index, array), thisArg);
How it works:Callback function: Called once for each element, receiving:
element: The current array element
index (optional): The index of the current element
array (optional): The array being traversed
thisArg (optional): Value to use as this inside the callback
Return value: A new array with the results of each callback call
const newArray = array.map((item) => item * 2);const newArray = array.map(function(item) { return item * 2; });Note: The original array is not modified.
Reduce executes a function on each element of the array, resulting in a single output value.
const result = array.reduce(callback(accumulator, currentValue, index, array), initialValue);
How it works:Callback function: Called once for each element, receiving:
accumulator: The accumulated value from the previous callback call (or initialValue on the first call)
currentValue: The current array element
index (optional): The index of the current element
array (optional): The array being traversed
initialValue (optional): A value to use as the first argument to the first call of the callback. If not provided, the first element of the array will be used as the initial accumulator value and iteration will start from the second element.
Return value: The single output value resulting from the reduction
const sum = array.reduce((acc, item) => acc + item, 0);const sum = array.reduce(function(acc, item) { return acc + item; }, 0);Example: Using reduce to count occurrences of elements in an array:
const fruits = ['apple', 'banana', 'orange', 'apple', 'banana', 'apple'];
const fruitCount = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
output: { apple: 3, banana: 2, orange: 1 }
In this example, we use reduce to create an object that counts how many times each fruit appears in the array. The accumulator (acc) starts as an empty object, and for each fruit, we increment the count for that fruit in the accumulator.
Filter creates a new array with elements based on the test implemented in the function.
const newArray = array.filter(callback(element, index, array), thisArg);
How it works:Callback function: Called once for each element, receiving:
element: The current array element
index (optional): The index of the current element
array (optional): The array being traversed
thisArg (optional): Value to use as this inside the callback
Return value: A new array with the elements that pass the test (callback returns true)
const evenNumbers = array.filter((item) => item % 2 === 0);const evenNumbers = array.filter(function(item) { return item % 2 === 0; });array = [1, 2, 3]; array.push(4); // array is now [1, 2, 3, 4]
const length = array.length; // length is 4
array = [3, 1, 4, 1, 5]; array.sort(); // array is now [1, 1, 3, 4, 5]
array = [1, 2, 3]; delete array[1]; // array is now [1, undefined, 3]
const allEven = array.every((item) => item % 2 === 0); // true if all elements are even
const hasEven = array.some((item) => item % 2 === 0); // true if at least one element is even
array = [1, 2, 3, 4]; array.fill(0, 1, 3); // array is now [1, 0, 0, 4]
const foundElement = array.find((item) => item === 3); // foundElement will be 3
const foundIndex = array.findIndex((item) => item === 3); // foundIndex will be 2
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const combined = array1.concat(array2); // combined is [1, 2, 3, 4, 5, 6]
const includesThree = array.includes(3); // true if the array includes the value 3
const string = array.join(', '); // joins the elements with a comma and space
const subset = array.slice(1, 4); // returns a new array with elements from index 1 to 3
array = [1, 2, 3, 4, 5]; array.splice(2, 2); // array is now [1, 2, 5]
const lastElement = array.pop(); // removes and returns the last element
const firstElement = array.shift(); // removes and returns the first element
When i saw the .reduce() method, i discovered that functions like .sum() from LINQ doesn't exist in JavaScript, but we can create our own using prototypes.
Array.prototype.sum = function() {
return this.reduce((acc, item) => acc + item, 0);
};
Now we can use the .sum() method on any array of numbers:
const numbers = [1, 2, 3, 4, 5]; const total = numbers.sum(); // total will be 15
Note: This approach modifies the Array prototype, which can have unintended consequences if not used carefully. (can cause conflicts with other code/libraries)
The spread operator (`...`) allows an iterable to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const combined = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]
It can also be used to create a shallow copy of an array or to merge objects.
const original = { a: 1, b: 2 };
const copy = { ...original }; // { a: 1, b: 2 }
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
// { a: 1, b: 3, c: 4 }
const merged2 = { ...obj2, ...obj1 };
// { b: 2, c: 4, a: 1 }
Note: When merging objects, if there are properties with the same name, the value from the last object will overwrite the previous one.