Lesson 4
Center-Outward Array Traversal in JavaScript
Introduction

Greetings! Welcome to our lesson today where we'll unravel a fascinating aspect of array manipulation. Here's the question: How would you traverse an array not from the beginning to the end, or vice versa, but from the center outward in either direction? Today's lesson is all about exploring this concept with JavaScript. Brace yourself for a captivating learning journey.

Task Statement

Our task is to produce a new array, given an array of integers, that starts from the center of the original array and alternates direction towards both ends. That is, the first element of our new array will be the middle element of the original one.

After defining the starting point, we will alternate between elements to the left and to the right of this center until all elements have been included. If the length of the initial array is even, we first take the element to the left of the center, then the one to the right of the center, and then do the alternation as described above.

For example, for numbers = [1, 2, 3, 4, 5], the output would be [3, 2, 4, 1, 5].

We will break down this seemingly complex task into manageable pieces to progressively build our JavaScript solution. Keep in mind an additional condition: the length of the array — represented as n — can range from 1 to 100,000, inclusive.

Solution Building: Step 1

First, let's establish the midpoint of our array. Our task requires us to expand our array from the center to the ends, so we divide its length by 2 using integer division in JavaScript. If we find that the array's length is odd, we include the middle element in the newOrder array, given it has no counterpart. If the array's length is even, newOrder initially remains empty.

Here is how it looks in JavaScript:

JavaScript
1function iterateMiddleToEnd(numbers) { 2 let mid = Math.floor(numbers.length / 2); // index of the middle element 3 let newOrder = []; // Array to store new order 4 5 if (numbers.length % 2 === 1) { 6 newOrder.push(numbers[mid]); // Adding middle element to resulting array if length is odd 7 } 8 // newOrder remains empty for now if length is even 9 10 return newOrder; 11}
Solution Building: Step 2

Successfully solving our task requires two pointers: left and right. These pointers are initialized to point to the elements immediately to the left and right of the middle element, respectively.

Here is the JavaScript function with the added initialization of these pointers:

JavaScript
1function iterateMiddleToEnd(numbers) { 2 let mid = Math.floor(numbers.length / 2); // index of the middle element 3 let left, right; 4 let newOrder = []; // Array to store new order 5 6 if (numbers.length % 2 === 1) { 7 left = mid - 1; // Pointing to the left of the middle element 8 right = mid + 1; // Pointing to the right of the middle element 9 newOrder.push(numbers[mid]); // Adding the middle element to the resulting array 10 } else { 11 left = mid - 1; // Pointing to the left of the middle element 12 right = mid; // Pointing to the middle element 13 } 14 15 return newOrder; 16}
Solution Building: Step 3

With our pointers initialized, it's time to navigate the array and form our new order. In JavaScript, while loops provide the necessary control structure to iterate from the center of the array to both ends. In each iteration, we push the elements at indices left and right to the newOrder array, decrement left by one, and increment right by one.

Here's how it looks when we put together the full JavaScript function:

JavaScript
1function iterateMiddleToEnd(numbers) { 2 let mid = Math.floor(numbers.length / 2); // index of the middle element 3 let left, right; 4 let newOrder = []; // Array to store new order 5 6 if (numbers.length % 2 === 1) { 7 left = mid - 1; // Pointing to the left of the middle element 8 right = mid + 1; // Pointing to the right of the middle element 9 newOrder.push(numbers[mid]); // Adding the middle element to the resulting array 10 } else { 11 left = mid - 1; // Pointing to the left of the middle element 12 right = mid; // Pointing to the middle element 13 } 14 15 while (left >= 0 && right < numbers.length) { 16 newOrder.push(numbers[left--]); 17 newOrder.push(numbers[right++]); 18 } 19 20 return newOrder; 21} 22 23const numbers = [1, 2, 3, 4, 5]; 24const result = iterateMiddleToEnd(numbers); 25console.log(result); // Output should be [3, 2, 4, 1, 5]

Explanation for left-- and right++:

  • numbers[left--]: The expression first accesses the value at index left in the numbers array and then decrements left by 1. This ensures the current left element is pushed to newOrder before moving the pointer one step to the left.
  • numbers[right++]: Similarly, this expression first accesses the value at index right in the numbers array and then increments right by 1. This ensures the current right element is pushed to newOrder before moving the pointer one step to the right.

By implementing this approach, we have successfully created a new array, starting from the middle and alternating to the left and right ends of the original array, effectively fulfilling the requirements of our task!

Lesson Summary

Well done on reaching the end of this lesson! You've uncovered a riveting method of traversing and manipulating arrays! Take a moment to pat yourself on the back for understanding and implementing this concept. As the proverb goes, practice makes perfect. Hence, I encourage you to employ this concept in similar problems. Your exceptional journey in mastering algorithms with JavaScript has just begun. Embrace the challenge and happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.