Mastering JavaScript Arrays

Discover how JavaScript arrays are ordered, zero-based collections with a dynamic length property and mixed data types, and how sparse arrays and prototype methods manage elements.

Explore creating JavaScript arrays using the preferred array literal syntax, including empty arrays and mixed data types, and compare with the non-preferred array constructor approach.

Use Array.of to create arrays with specific elements, avoiding the empty slots produced by new Array(n) and showing how a static method creates single or multiple elements.

Learn how to use array.fill to pre-populate a JavaScript array with a value, create and modify arrays, including examples with scores initialized to zero and using optional parameters.

Learn to read from and write to JavaScript array elements using the index with square brackets and console.log, while noting 0-based indexing, out-of-bounds undefined values, and empty slots.

Address array elements with the at method using positive indices and negative indices to count from the end. Retrieve values more succinctly, and avoid assignments, which trigger a reference error.

Analyze sparse arrays by assigning a value at index 20 while 8–19 remain empty, creating sparsity. Examine inserting a value between 8 and 20 and the resulting issues.

Access an array’s length with dot syntax and see how arr[length] adds an element. Learn why changing length can create sparse arrays and when to rely on the length property.

Explore how the delete keyword works on JavaScript arrays, deleting an index without changing length and creating a sparse array, plus more preferred ways to add and remove elements.

Learn two simple ways to empty an array in JavaScript—reassign to a new empty array and set the length to zero—while understanding references and const versus let.

Use arrays as stacks by pushing to add elements and popping to remove from the end, last in, first out; push returns length, pop returns value.

Learn how unshift and shift add to and remove from the beginning of an array, and how this changes index positions, unlike push and pop.

Practice basic array operations by completing seven steps: create an empty array, add five numbers, modify index 3, and implement add item and get item functions, then test.

Master array manipulation by creating an empty array, pushing five numbers, logging length, updating index 3 with ten times its value, and building simple add-item and get-item functions.

Iterate an array with a for loop, multiplying each element by five and writing it back, using i from zero to length minus one.

Practice using a for loop to process an array of student names and create a new array with all names in lowercase, without modifying the original array, using the toLowerCase method.

Loop through each value, convert it to lowercase, and push into a new array, preserving order; initialize an empty array and use a for loop.

Evaluate using the for-in loop on arrays, noting its object-oriented intent, potential prototype interference, and arbitrary iteration order; opt for an array-specific loop instead for reliable ordering.

Learn how the for of loop iterates over array values, not indices, logs them to the console, and demonstrates adding values to a total variable.

Loop through an array to render method names as list items inside a ul in a bullets div on a mail page, using innerHTML.

Create and populate a ul with anchors from the methods array using a for-of loop, capture the div by id bullets, and set its innerHTML to display all methods.

Explore how array-like collections differ from true arrays by using for-of iteration on maps and node lists, and by testing with Array.isArray to distinguish arrays from non-arrays.

Convert array-like structures such as maps and node lists into real arrays to access full array methods. Use the spread operator and Array.from to create arrays, then verify with Array.isArray.

Convert a string to an array using the spread operator and Array.from, so each character, including spaces and punctuation, becomes an array element for easy character processing.

Explore how strings behave like arrays in JavaScript by iterating characters with for-of and for loops. Access characters with square brackets, convert to uppercase, and build strings SDR2 and SDR3.

Learn how to use the split method to convert a string into an array by delimiters like space, comma, or hyphen, with an optional second parameter to limit length.

Explore gathering variable function arguments into an array, convert array-like arguments to a real array, and use the spread operator to manage and sum numbers efficiently.

Learn how to convert object properties to arrays using Object.keys, Object.values, and Object.entries, turning keys, values, or key-value pairs into array formats for easier data manipulation.

Practice building a process data function that converts non-array arguments to arrays and returns an array of inputs, including a node list, a set, and a map, verified by console.

Capture function arguments into an array with the spread operator, then loop through to push elements; keep arrays as arrays, convert non-arrays with Array.from, and return the new array.

Identify array-like collections in JavaScript by the iterator symbol, and implement a helper to detect array-like values for use with for-of loops on node lists and strings.

Explore when to mutate arrays in JavaScript, balancing functional principles with practical needs, and learn methods that mutate the array or create a new one, including sorting.

Learn how to reverse a JavaScript array in place using the dot syntax, mutating the original array so the last element becomes the first and no new array is returned.

Explore how JavaScript's sort and reverse methods organize arrays, including strings and numbers, with and without a callback. Learn about higher-order functions, custom comparisons, case-insensitive sorting, and anonymous functions.

Sort an array of objects in JavaScript using a callback to compare properties like first name and score, showing ascending order with a.score - b.score.

Master the splice method to add or remove elements in an array, starting at a specific index and returning the deleted items, while mutating the original array.

Master the copyWithin method to copy elements inside an array in place, specifying target index, start (inclusive), and optional end (exclusive); negative indices reference the end, and length stays unchanged.

Understand that every JavaScript array inherits methods from its prototype, a shared object attached to all JavaScript arrays, which provides copy within, pop, push, shift, and sort.

Learn to clone an array using the spread operator or Array.from to keep the original array intact while creating separate copies for sorting or reversing, preserving original order.

Explore method chaining on JavaScript arrays by stringing together multiple array methods with dot syntax. See how methods that return arrays, like sort, reverse, and toString, enable compact, single-statement transformations.

Clone an array with the spread operator, sort it using a comparator, and splice out specific elements, illustrating arrow function usage and method chaining.

Explore iterating arrays with built-in methods, differentiate mutating from non-mutating tools, and see how each method applies a function to every element.

Explore the forEach method as a replacement for for loops, mutating arrays and objects, update pass property based on scores, and square values in place.

Master how the map method creates a new array from an existing one by applying a function that returns a value for each element, preserving the original array.

Explore the JavaScript filter method to create a subset array with a predicate function, returning true to include elements (e.g., passing scores >=70) and leaving the original array intact.

Master the reduce and reduceRight methods to combine array elements into a single value, using an accumulator and initial value, with examples that show sums and object merging.

Use the every method with a predicate function to test every element in a scores array for a condition, returning true if all pass and false otherwise.

Use the some method to check if at least one array element satisfies predicate, returning true or false, and note that it stops when a match like zero is found.

Practice exercise six by counting the number of zeroes in a scores array using one of the two logical array methods.

Mastering JavaScript arrays by counting zeros with a for each loop and reduce using an initialized accumulator, including an arrow function variant and console verification.

Convert a string to an array, then filter out articles using array methods or regular expressions, and practice method chaining.

Learn to split a sentence into words, filter out articles a, an, and the using a regular expression with test, and compare traditional and arrow function approaches.

Practice exercise eight uses an array method within the process data function to convert inputs to an array of arrays and then flatten into a single array.

Convert function arguments to an array with the spread operator, then map to create an array of arrays and reduce to a single array using arrow functions and isArray checks.

Learn how to pass a callback as the second argument to Array.from to process each element when converting a set to an array, including converting strings to numbers.

Learn how to represent a matrix as a multidimensional array in JavaScript, using arrays of arrays and multiple square brackets to access elements.

Build a 5x5 matrix as an array of arrays, initialize five rows with a loop, fill with row times column, and access with table[row][col], e.g., three by three equals nine.

Mastering JavaScript arrays teaches you how to combine arrays and manage elements using the spread operator, join, concat, and slice.

Learn how the join method reverses split by turning an array back into a string, with customizable separators and practical use for storing and rehydrating data.

Learn to combine arrays with the spread operator and the can cat method to create a single array from multiple arrays.

Explore how the slice method extracts a subarray with a start and end index (not inclusive), creates a clone with no arguments, and historically converts array-like objects such as arguments.

Flatten an array to create a single-level array from nested arrays, returning a new array while leaving the original unchanged; use flat map to map and flatten in one step.

Explore the toString method for JavaScript arrays, which converts an array to a comma-separated string and mirrors the behavior of join.

Create a JavaScript multi-dimensional array to store the products of even numbers up to 20 in a matrix, using a two-step looping approach and display the 20 by 20 product.

Construct a 10 by 10 matrix (array of arrays) by initializing rows and filling cells with even-number products using nested loops, then log the table to the console.

Transform and combine string arrays by applying map and flatMap to split words, merge with the spread operator, join into a string, and log to the console in one line.

Discover a cleaner JavaScript solution for exercise 10 by concatenating two arrays and joining them into a single string, using concat and join while comparing to flatMap and spread operator.

Explore how to search for values in arrays using indexOf, lastIndexOf, and newer, more user-friendly methods from the modern ECMAScript standard.

Explore how indexOf and lastIndexOf locate a value in an array, returning the index when found or a negative one when not found, and how strings require exact matches.

Learn to check if an array contains a value using the includes method, replacing indexOf greater than -1 with a simple true or false check.

Explore how to use find with flexible comparisons in JavaScript arrays, returning the matched value, using strict equality to avoid coercion, and verifying object properties with callbacks.

Explore findIndex in arrays to flexibly locate a matching element's index, compare with find and includes, and learn to retrieve both the index and value via callbacks.

Create a function in exercise 11 that searches an array of user objects by id using some, returning the user object or false if not found, and test it.

Finish exercise 11 by implementing a getUser function that uses some to verify a matching id and find to return object, else false; convert input to uppercase for case-insensitive matching.

Implement a get page position function for the state info array, using includes to find zeros and return the first zero index or the last index if none exist.

Explore maps and sets in JavaScript and compare them with objects as data structures. Learn when to use associative arrays and named value pairs, and how maps allow non-string keys.

Explore how maps differ from objects in JavaScript, enabling non-string keys, preserving key-value pairs, and showing how objects require string keys and use dot or bracket syntax, keeping entries unordered.

Explore how to create and manipulate maps in JavaScript, using the Map constructor, set, get, delete, clear, and keys, plus converting maps to arrays and accessing keys.

Mastering JavaScript arrays shows how sets keep values unique, avoid duplicates, use a set constructor to add items, convert arrays to sets with the spread operator, and check size.

Combine two arrays of student names using concatenation, correct case differences by mapping to a standardized form, then remove duplicates with a set before finalizing the merged list.

Use the spread operator to merge arrays, map to uppercase, and apply a set to produce a unique names array, addressing case sensitivity and readability trade-offs.