Is there a way to alter an array through a reference within a function?

Question

Is there a way to alter an array through a reference within a function?

I am working with a function that looks like this:

  public recursiveFilterLayers(node: LayerNode[]): LayerNode[] {
    const validItem = node.filter(
      (i) => i.visible === true || i.visible === undefined
    );

    validItem.forEach((i) => {
      if (i.children) i.children = this.recursiveFilterLayers(i.children);
    });

    return validItem;
  }

Then I call it using:

data = recursiveFilterLayers(data);

Is there a way to rewrite this function so that I don't have to use the return statement, like this:

recursiveFilterLayers(data);

In other words, how can I modify the function to directly manipulate the reference to the data array?

javascript typescript

Answer 1

Answer №1

Array.filter creates a new array, meaning the original array remains unchanged. To modify the original array, you must manually iterate through it using a loop.

While using splice to delete elements may seem convenient, it has a time complexity of O(n²) because each removal requires shifting all subsequent elements back by one position.

An alternative method involves maintaining separate read and write indices, then executing a single splice operation at the end to truncate unnecessary elements:

function recursiveFilterLayers(node) {
  let readIndex;
  let writeIndex = 0;
  for (readIndex = 0; readIndex < node.length; readIndex++) {
    const element = node[readIndex];
    if (element.visible === true || element.visible === undefined) {
      node[writeIndex] = element;
      if (element.children) {
        recursiveFilterLayers(element.children);
      }
      writeIndex++;
    }
  }

  node.splice(writeIndex, readIndex - writeIndex);
}

const data = [
  {visible: true},
  {},
  {visible: false},
  {
    children: [{visible: false}, {visible: true}],
  },
];
recursiveFilterLayers(data);
console.log(data);

Answer 2

Array.filter creates a new array, meaning the original array remains unchanged. To modify the original array, you must manually iterate through it using a loop.

While using splice to delete elements may seem convenient, it has a time complexity of O(n²) because each removal requires shifting all subsequent elements back by one position.

An alternative method involves maintaining separate read and write indices, then executing a single splice operation at the end to truncate unnecessary elements:

function recursiveFilterLayers(node) {
  let readIndex;
  let writeIndex = 0;
  for (readIndex = 0; readIndex < node.length; readIndex++) {
    const element = node[readIndex];
    if (element.visible === true || element.visible === undefined) {
      node[writeIndex] = element;
      if (element.children) {
        recursiveFilterLayers(element.children);
      }
      writeIndex++;
    }
  }

  node.splice(writeIndex, readIndex - writeIndex);
}

const data = [
  {visible: true},
  {},
  {visible: false},
  {
    children: [{visible: false}, {visible: true}],
  },
];
recursiveFilterLayers(data);
console.log(data);

Answer 3

Answer №2

When working with javascript, it's important to understand that primitives are passed by value, while Objects are passed by a "copy of a reference." This means that functions can modify the content without needing to return anything.

If you're using a filter that simply copies the parameter's content, it won't actually modify anything. Instead, consider using the forEach method as shown below:

public recursiveFilterLayers(nodes: LayerNode[]): LayerNode[] {
    nodes.forEach(n=>{
        if((n.visible === true || n.visible === undefined) && n.children){
            this.recursiveFilterLayers(n.children);
        }
    });
    return;
}

Answer 4

When working with javascript, it's important to understand that primitives are passed by value, while Objects are passed by a "copy of a reference." This means that functions can modify the content without needing to return anything.

If you're using a filter that simply copies the parameter's content, it won't actually modify anything. Instead, consider using the forEach method as shown below:

public recursiveFilterLayers(nodes: LayerNode[]): LayerNode[] {
    nodes.forEach(n=>{
        if((n.visible === true || n.visible === undefined) && n.children){
            this.recursiveFilterLayers(n.children);
        }
    });
    return;
}

Is there a way to alter an array through a reference within a function?

Answer №1

Answer №2

Similar questions

Allow TypeScript in VSCode to locate files that do not contain a default export statement

Change the <base> element programmatically during server-side rendering

Isn't it pointless to use try/catch/finally blocks together?

Is there a way for me to display an http status code in my fetch error?

Designated router outlet showing empty content

Navigating IntelliSense Overload Signatures in VSCode

Angular navigation paths directing to incorrect components

The field 'updateEmployeeName' is not found in the 'ContactFormComponent' class

Exploring the World of Micro-Frontends with the Angular Framework

Guide on displaying a grid in the center of the screen with a vertical sliding feature

Guide on invoking child components' functions from the parent component in Angular 6

What steps can I take to address the issue with the jquery dropdown?

Using TypeScript to effectively validate form checkboxes for input fields

Verification of data using PHP, MySQL, and jQuery

jQuery Draggable Slider Scale

Iterating through images one time and capturing the mouse coordinates for every click made by the user

Issue with the loading order of jQuery in Internet Explorer 9

Determine if a dropdown menu includes a certain string within a designated group option

Upon initialization, navigate to the specified location in the route by scrolling

Converting date string to a new format is not supported by moment js