Negative Indexing in JS is a thing/ Getting to know proxies....

Is it not enabled by default??

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr[-1]);  // we get undefined onto the console

So why does on accessing arr[-1] return undefined?

• JavaScript does not support negative indexing by out of the box.

• Since arr is an array, only numeric indices (0, 1, 2, ...) are valid.

• arr[-1] is not defined yet, so JavaScript returns undefined.

How can we enable negative indexing in JS

Proxies here come to the rescue.

Till now we know that javaScript does not support negative indices, a Proxy can be used to modify this behavior.

What is a Proxy?

• A Proxy is a special object that basically wraps around an object and allows you to control and customize interactions with that object.

• Proxy handlers (get, set, etc.) enable control over how an object behaves when accessed or modified.

Here is a high level implementation :

const proxy = new Proxy(targetObject, {
  get(target, prop) {
    // Custom behavior when accessing properties
  },
  set(target, prop, value) {
    // Custom behavior when setting properties
  }
});

Let’s understand this by implementing it in a real world scenerio

Think of using a chat application, now we know a situation where we need to store and retieve last messages.

Imagine we have an array that stores chat messages, and we want to access messages using both positive and negative indexes:

• Positive index (default behavior) → messages[0] → returns the first message.

• Negative index (custom behavior) → messages[-1] → should return the last message

Now how would a simple implementation of the same would look like?

function chatHistory(messages) {

return new Proxy(messages, {
    get(target, prop) {
      const index = Number(prop); // Confirm you getting a number
      if (index < 0) {
        return target[target.length + index]; // Converted negative index to positive
      }
      return target[prop]; // Default array behavior for non-negative indexes
    },

    set(target, prop, value) {
      const index = Number(prop);
      if (index < 0) {
        target[target.length + index] = value;
      } else {
        target[prop] = value;
      }
      return true;
    },
  });
}

Now what we do is, we use proxy to access chat messages:

let messages = [
  "Hello!",
  "How are you?",
  "I'm fine, thanks!",
  "What about you?",
  "I'm good too!"
];

let chat = chatHistory(messages);

console.log(chat[0]);  // Output: "Hello!"  (First message)
console.log(chat[2]);  // Output: "I'm fine, thanks!"  (Third message)
console.log(chat[-1]); // Output: "I'm good too!" (Last message)
console.log(chat[-3]); // Output: "I'm fine, thanks!" (Third last message)

Now we try to modify the messages using the negative indexing which we just enabled by our custom implementation:

chat[-2] = "Just chilling!"; // Modifying the second last message
console.log(chat);  
// Output: ["Hello!", "How are you?", "I'm fine, thanks!", "Just chilling!", "I'm good too!"]

Upwards is the basic logical flow of the problem, this flow ensures that negative indices are correctly mapped to valid indices in the array, making it work as expected.