Order array by Attribute in JavaScript

Question

Order array by Attribute in JavaScript

I have a code snippet that requires sorting each element in an array based on their area.

function Rectangle(base, height) {
  this.base = base;
  this.height = height;

  this.area = function () {
    return this.base * this.height;
  };

  this.perimeter = function () {
    return 2 * (this.base + this.height);
  };

  this.toString = function () {
    return (
      '(b= ' +
      this.base +
      ', h= ' +
      this.height +
      ', a = ' +
      this.area() +
      ', p =' +
      this.perimeter() +
      ')'
    );
  };
}
var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];

To achieve this, I plan to first declare a method in the Array class of JavaScript and then sort it using the sort() method.

array.prototype.sortByArea = function() {
            
};

Can someone guide me on how to accomplish this task?

javascript arrays sorting

Answer 1

Answer №1

To compare, simply subtract the areas.

function Rectangle(base, height) {
  this.base = base;
  this.height = height;
  this.area = function() {
    return (this.base * this.height);
  }
  this.perimeter = function() {
    return 2 * (this.base + this.height);
  }
  this.toString = function() {
    return "(b= " + this.base + ", h= " + this.height + ", a = " +
      this.area() + ", p =" + this.perimeter() + ")";
  }
}
var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
rectangles.sort((a, b) => a.area() - b.area());
rectangles.forEach(x => console.log(x.toString()));

If there is a strong need to modify the Array's prototype, it can be done but not recommended.

function Rectangle(base, height) {
  this.base = base;
  this.height = height;
  this.area = function() {
    return (this.base * this.height);
  }
  this.perimeter = function() {
    return 2 * (this.base + this.height);
  }
  this.toString = function() {
    return "(b= " + this.base + ", h= " + this.height + ", a = " +
      this.area() + ", p =" + this.perimeter() + ")";
  }
}
var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
Array.prototype.sortByArea = function(){
  return this.sort((a, b) => a.area() - b.area());
}
rectangles.sortByArea();
rectangles.forEach(x => console.log(x.toString()));

Answer 2

To compare, simply subtract the areas.

function Rectangle(base, height) {
  this.base = base;
  this.height = height;
  this.area = function() {
    return (this.base * this.height);
  }
  this.perimeter = function() {
    return 2 * (this.base + this.height);
  }
  this.toString = function() {
    return "(b= " + this.base + ", h= " + this.height + ", a = " +
      this.area() + ", p =" + this.perimeter() + ")";
  }
}
var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
rectangles.sort((a, b) => a.area() - b.area());
rectangles.forEach(x => console.log(x.toString()));

If there is a strong need to modify the Array's prototype, it can be done but not recommended.

function Rectangle(base, height) {
  this.base = base;
  this.height = height;
  this.area = function() {
    return (this.base * this.height);
  }
  this.perimeter = function() {
    return 2 * (this.base + this.height);
  }
  this.toString = function() {
    return "(b= " + this.base + ", h= " + this.height + ", a = " +
      this.area() + ", p =" + this.perimeter() + ")";
  }
}
var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
Array.prototype.sortByArea = function(){
  return this.sort((a, b) => a.area() - b.area());
}
rectangles.sortByArea();
rectangles.forEach(x => console.log(x.toString()));

Answer 3

Answer №2

Here is the solution you are seeking:

Method to modify the original array:

function Rectangle(base, height) {
  this.base = base;
  this.height = height;

  this.area = function() {
    return this.base * this.height;
  };

  this.perimeter = function() {
    return 2 * (this.base + this.height);
  };

  this.toString = function() {
    return (
      '(b= ' +
      this.base +
      ', h= ' +
      this.height +
      ', a = ' +
      this.area() +
      ', p =' +
      this.perimeter() +
      ')'
    );
  };
}

var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
console.log('rectangles (before):');
rectangles.forEach(item => console.log(item.area()));

Array.prototype.sortByArea = function() {
  return this.sort(function(rectA, rectB) {
    return rectA.area() - rectB.area();
  });
}

rectangles.sortByArea();

console.log('rectangles (after):');
rectangles.forEach(item => console.log(item.area()));

Method to return an ordered copy of the original array:

function Rectangle(base, height) {
  this.base = base;
  this.height = height;

  this.area = function() {
    return this.base * this.height;
  };

  this.perimeter = function() {
    return 2 * (this.base + this.height);
  };

  this.toString = function() {
    return (
      '(b= ' +
      this.base +
      ', h= ' +
      this.height +
      ', a = ' +
      this.area() +
      ', p =' +
      this.perimeter() +
      ')'
    );
  };
}
var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
console.log('rectangles (before):');
rectangles.forEach(item => console.log(item.area()));

Array.prototype.sortByArea = function() {
  return this.map(item => item).sort(function(rectA, rectB) {
    return rectA.area() - rectB.area();
  });
}

const sortedRectangles = rectangles.sortByArea();


console.log('sortedRectangles:');
sortedRectangles.forEach(item => console.log(item.area()));
console.log('rectangles (after):');
rectangles.forEach(item => console.log(item.area()));

Answer 4

Here is the solution you are seeking:

Method to modify the original array:

function Rectangle(base, height) {
  this.base = base;
  this.height = height;

  this.area = function() {
    return this.base * this.height;
  };

  this.perimeter = function() {
    return 2 * (this.base + this.height);
  };

  this.toString = function() {
    return (
      '(b= ' +
      this.base +
      ', h= ' +
      this.height +
      ', a = ' +
      this.area() +
      ', p =' +
      this.perimeter() +
      ')'
    );
  };
}

var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
console.log('rectangles (before):');
rectangles.forEach(item => console.log(item.area()));

Array.prototype.sortByArea = function() {
  return this.sort(function(rectA, rectB) {
    return rectA.area() - rectB.area();
  });
}

rectangles.sortByArea();

console.log('rectangles (after):');
rectangles.forEach(item => console.log(item.area()));

Method to return an ordered copy of the original array:

function Rectangle(base, height) {
  this.base = base;
  this.height = height;

  this.area = function() {
    return this.base * this.height;
  };

  this.perimeter = function() {
    return 2 * (this.base + this.height);
  };

  this.toString = function() {
    return (
      '(b= ' +
      this.base +
      ', h= ' +
      this.height +
      ', a = ' +
      this.area() +
      ', p =' +
      this.perimeter() +
      ')'
    );
  };
}
var rectangles = [
  new Rectangle(1, 1),
  new Rectangle(2, 2.05),
  new Rectangle(2, 5),
  new Rectangle(1, 3),
  new Rectangle(4, 4),
  new Rectangle(2, 8)
];
console.log('rectangles (before):');
rectangles.forEach(item => console.log(item.area()));

Array.prototype.sortByArea = function() {
  return this.map(item => item).sort(function(rectA, rectB) {
    return rectA.area() - rectB.area();
  });
}

const sortedRectangles = rectangles.sortByArea();


console.log('sortedRectangles:');
sortedRectangles.forEach(item => console.log(item.area()));
console.log('rectangles (after):');
rectangles.forEach(item => console.log(item.area()));

Order array by Attribute in JavaScript

Answer №1

Answer №2

Method to modify the original array:

Method to return an ordered copy of the original array:

Similar questions

What is the best method for displaying over 1000 2D text labels using three.js?

Is there a way to receive a string of variable length using getchar without prompting the user for the string size beforehand?

What is the process for uploading an image to Postman with Express.js?

"The issue persists with multiple JavaScript forms failing to work as expected when preventDefault

Issues with CodeIgniter Calendar Preferences template functionality

Discover past stock prices on Yahoo Finance

Guide on making a submit and close button within an overlay

What is the best way to upgrade to a specific version of a child dependency within a module?

Adding a characteristic to every item in an array of objects

Activate the CSS on a click event using the onClick method

Using a render target causes certain elements of my visual graphics to become hidden

The Nestjs cronjob is having trouble accessing the injected service

Performing an Ajax request using MooTools when my button is clicked

Tips for creating an angularjs login page as the initial page

Exploring Uncharted Territory: Defining Array Bounds and Iterating through

What is the process for running a continuous stream listener in a node.js function?

Conceal all div elements except for displaying the initial two

Creating Low-Poly Terrain with a Touch of Serendipity

Spontaneous gradient background occasionally failing to load as expected

The `user-select: none` property displays distinct behavior in Safari