Improving Javascript Arrays for Easier Reading

Question

Improving Javascript Arrays for Easier Reading

A dataset has been organized into a table format as shown below:

+------+---------+----+----+----+----+-------+----------+
| Year | Subject | A  | B  | C  | F  | Total | PassRate |
+------+---------+----+----+----+----+-------+----------+
| 2015 | Maths   | 12 | 20 | 10 |  5 |    47 |       80 |
| 2015 | Sinhala | 18 | 14 |  5 | 10 |    47 |       75 |
| 2016 | Maths   | 25 | 15 |  4 |  8 |    52 |       25 |
| 2016 | Sinhala | 20 | 12 |  2 | 18 |    52 |       60 |
+------+---------+----+----+----+----+-------+----------+

To store this data in a JavaScript array, the following code is used:

var firstArray = [];
firstArray.push(['Year', 'Subject', 'A', 'B', 'C', 'F', 'Total', 'PassRate']); // headers
firstArray.push([2015, 'Maths', 12, 20, 10, 5, 47, 80]); // 1st row
firstArray.push([2015, 'Sinhala', 18, 14, 5, 10, 47, 75]) // 2nd row
console.log(firstArray);

If there is a need to find out how many "B"s are in Maths for the year 2015, one would have to use firstArray[1][3].

This method of accessing data may not be very intuitive. Is there a way to structure the array in a more readable format such as firstArray[2015]['maths'] to easily retrieve information like the number of "B"s in Maths for the year 2015?

javascript arrays object

Answer 1

Answer №1

It sounds like you're looking for a data structure where each year is associated with different subjects and their corresponding grades:

const gradeBook = {
  '2015': {
    Maths: {
      A: 12, B: 20, C: 10, F: 5, Total: 47, PassRate: 80
    },
    Sinhala: {
      A: 18, B: 14, C: 5, F: 10, Total: 47, PassRate: 75
    },
  },
  '2016': {
    // ...
  }
}
console.log(gradeBook['2015'].Maths);

Answer 2

It sounds like you're looking for a data structure where each year is associated with different subjects and their corresponding grades:

const gradeBook = {
  '2015': {
    Maths: {
      A: 12, B: 20, C: 10, F: 5, Total: 47, PassRate: 80
    },
    Sinhala: {
      A: 18, B: 14, C: 5, F: 10, Total: 47, PassRate: 75
    },
  },
  '2016': {
    // ...
  }
}
console.log(gradeBook['2015'].Maths);

Answer 3

Answer №2

Ensuring the readability of your code is crucial for its success.

Although there is no definitive path to follow, I can offer some suggestions on how to improve your code.

Firstly, let's talk about naming conventions.

Naming variables can be a challenging task, even for seasoned developers who often find themselves renaming variables multiple times before settling on the right one.

For example, using a variable name like firstArray provides little context as to what the array actually contains.

A more descriptive name such as studentsScoreByYear gives a better indication of the content within the array.

Next, let's address the issue of "magic numbers" and index values.

Using hard-coded integers in your code can make it difficult to remember the purpose of each field or element.

An alternative approach is to utilize hash maps or plain objects in JavaScript, allowing you to assign meaningful names to each field.

If abandoning arrays is not an option, consider using constants to represent specific indexes:

 var MATHS = 1;
 var SCORE_OF_B = 3;

 var studentsScoreByYear= [
    ['Year', 'Subject', 'A', 'B', 'C', 'F', 'Total', 'PassRate'],
    [2015, 'Maths', 12, 20, 10, 5, 47, 80],
    [2015, 'Sinhala', 18, 14, 5, 10, 47, 75]
];

console.log(studentsScoreByYear[MATHS][SCORE_OF_B]);

Remember, there are various approaches to improving code readability - this is just one possibility.

Answer 4

Ensuring the readability of your code is crucial for its success.

Although there is no definitive path to follow, I can offer some suggestions on how to improve your code.

Firstly, let's talk about naming conventions.

Naming variables can be a challenging task, even for seasoned developers who often find themselves renaming variables multiple times before settling on the right one.

For example, using a variable name like firstArray provides little context as to what the array actually contains.

A more descriptive name such as studentsScoreByYear gives a better indication of the content within the array.

Next, let's address the issue of "magic numbers" and index values.

Using hard-coded integers in your code can make it difficult to remember the purpose of each field or element.

An alternative approach is to utilize hash maps or plain objects in JavaScript, allowing you to assign meaningful names to each field.

If abandoning arrays is not an option, consider using constants to represent specific indexes:

 var MATHS = 1;
 var SCORE_OF_B = 3;

 var studentsScoreByYear= [
    ['Year', 'Subject', 'A', 'B', 'C', 'F', 'Total', 'PassRate'],
    [2015, 'Maths', 12, 20, 10, 5, 47, 80],
    [2015, 'Sinhala', 18, 14, 5, 10, 47, 75]
];

console.log(studentsScoreByYear[MATHS][SCORE_OF_B]);

Remember, there are various approaches to improving code readability - this is just one possibility.

Answer 5

Answer №3

Representing your data in a readable format often requires a list of objects.

When it comes to selecting data:

Filter an array using the filter method.
Isolate a parameter or alter contents with the map method.
Perform arithmetic operations utilizing the reduce method.

var data = [
    { year: 2015, subject: 'Maths', a: 12, b: 20, c: 10, f: 5, total: 47, passrate: 80 },
    { year: 2015, subject: 'Sinhala', a: 18, b: 14, c: 5, f: 10, total: 47, passrate: 75 },
    { year: 2016, subject: 'Maths', a: 25, b: 15, c: 4, f: 8, total: 52, passrate: 25 },
    { year: 2016, subject: 'Sinhala', a: 20, b: 12, c: 2, f: 18, total: 52, passrate: 60 },
];
console.log("Present All:");
console.log(data
    .map(function (row) {
    return [row.year, row.subject, row.a, row.b, row.c, row.f, row.total, row.passrate].join(", ");
})
    .join("\n"));
console.log("Count `B` in `Maths` in 2015");
console.log(data
    .filter(function (row) { return row.year === 2015 && row.subject === "Maths"; })
    .map(function (row) { return row.b; })
    .reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0));

Sidenote

For those keen-eyed individuals, the map and filter calls may seem redundant in the "Present All" example since it could be simplified to:

data.reduce(function (accumulator, row) {
    return accumulator + (row.year === 2015 && row.subject === "Maths" ? row.b : 0);
}, 0);

Although the above code is more concise, the detailed approach using map and filter can provide better insight for anyone learning about handling arrays and objects in JavaScript.

Answer 6

Representing your data in a readable format often requires a list of objects.

When it comes to selecting data:

Filter an array using the filter method.
Isolate a parameter or alter contents with the map method.
Perform arithmetic operations utilizing the reduce method.

var data = [
    { year: 2015, subject: 'Maths', a: 12, b: 20, c: 10, f: 5, total: 47, passrate: 80 },
    { year: 2015, subject: 'Sinhala', a: 18, b: 14, c: 5, f: 10, total: 47, passrate: 75 },
    { year: 2016, subject: 'Maths', a: 25, b: 15, c: 4, f: 8, total: 52, passrate: 25 },
    { year: 2016, subject: 'Sinhala', a: 20, b: 12, c: 2, f: 18, total: 52, passrate: 60 },
];
console.log("Present All:");
console.log(data
    .map(function (row) {
    return [row.year, row.subject, row.a, row.b, row.c, row.f, row.total, row.passrate].join(", ");
})
    .join("\n"));
console.log("Count `B` in `Maths` in 2015");
console.log(data
    .filter(function (row) { return row.year === 2015 && row.subject === "Maths"; })
    .map(function (row) { return row.b; })
    .reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0));

Sidenote

For those keen-eyed individuals, the map and filter calls may seem redundant in the "Present All" example since it could be simplified to:

data.reduce(function (accumulator, row) {
    return accumulator + (row.year === 2015 && row.subject === "Maths" ? row.b : 0);
}, 0);

Although the above code is more concise, the detailed approach using map and filter can provide better insight for anyone learning about handling arrays and objects in JavaScript.

Improving Javascript Arrays for Easier Reading

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to temporarily halt a jQuery animation for 2 seconds before automatically resuming it, without relying on mouse-over or mouse-out triggers?

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

How can one properly utilize material-ui CSS?

Combining a 2D array with a 3D array to create a larger 3D array with an expanded third dimension

Synchronizing client information in real-time: tips, tricks, and expert advice

String variable representing the name of a React element

How can you move away from using the url:port scheme with socket.io?

Creating a pattern for values ranging from 18 to 99, including leading zeros, using regular expressions

Looking to add some movement to your website? Learn how to make an image track your mouse pointer in a specific section of your webpage

Multi-object retrieval feature in Material Dialog

Stopping the interval in Vue before the component is destroyed

Component template using Knockout.js and RequireJS for HTML widgets

What exactly is the purpose of the QueryString function and how does it work

waiting to display information until it is necessary

Dealing with Vue's performance problems when using input type color and v-model

Unexpected Error: The axiosCookieJarSupport function is throwing a TypeError, functioning properly in Node.JS but not in .vue pages. What could

Can JavaScript event listeners be compelled to trigger in a specific sequence?

Having trouble changing the Font Awesome icon on click?

When attempting to import my JSX file into page.js, I continue to encounter the error "module not found." How can I troubleshoot and resolve this issue in Visual Studio Code

What is the best way to retrieve the content from the MongoDB Document in my GET request?