<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const students = []
students.push({name : 'cloud', kor : 83, eng : 63, math : 95, sci : 83})
students.push({name : 'star', kor : 80, eng : 89, math : 97 , sci : 32})
students.push({name : 'winter', kor : 98, eng : 96, math : 54, sci : 83})
students.push({name : 'fall', kor : 80, eng : 42, math : 98, sci : 99})
let output = 'name\ttotal\tavg\n'
for (const s of students){
const sum = s.kor + s.eng + s.math + s.sci
const average = sum / 4
output += `${s.name}\t${sum}\t${average}\n`
}
console.log(output)
//object processing functions
function getSumOf(student) {
return student.kor + student.eng + student.math + student.sci;
}
function getAverageOf(student) {
return getSumOf(student) / 4;
}
let output1 = `name\ttotal\tavg\n`; // Corrected variable name to 'output'
for (const s of students) {
output1 += `${s.name}\t${getSumOf(s)}\t${getAverageOf(s)}\n`; // Changed 'output1' to 'output'
}
console.log(output1); // Corrected variable name to 'output'
//object processing functions 1
let output2 = 'name\ttotal\tavg\n'
for (const student of students) {
student.getsum = function () {
return this.kor + this.eng + this.math + this.sci
}
student.getaverage = function () {
return this.getsum() / 4
}
}
for (const s of students) {
output2 += `${s.name}\t${s.getsum(s)}\t${s.getaverage(s)}\n`; // Changed 'output1' to 'output'
}
console.log(output2); // Corrected variable name to 'output'
</script>
</head>
<body>
</body>
</html>### Direct Calculation in a Loop
Initially, the code calculates the sum and average of each student's scores directly within a `for...of` loop. This straightforward approach directly accesses properties of each student object, performs arithmetic operations, and appends the results to a string `output`, which is then logged to the console.
### Using Object Processing Functions
The next section introduces two functions, `getSumOf` and `getAverageOf`, which abstract the calculation logic away from the loop. These functions take a student object as an argument and return the sum and average of their scores, respectively. The loop then calls these functions, resulting in cleaner code and separating the calculation logic from data aggregation.
### Adding Methods to Objects
The final approach iterates over the `students` array to add `getsum` and `getaverage` methods directly to each student object. This object-oriented approach encapsulates the calculation logic within the student objects themselves, allowing each student to calculate their own total and average scores.
After enhancing the student objects with these methods, a second loop iterates through the `students` array again, this time calling the newly added methods to compute and log the sum and average scores.
### Key Points
- **Modularity and Reusability**: By abstracting the calculation logic into separate functions or methods, the code becomes more modular, easier to read, and reusable.
- **Encapsulation**: Adding methods to objects encapsulates behavior with data, a core principle of object-oriented programming. This approach makes the code more organized and aligns with real-world modeling.
- **Correctness**: The final loop in the document mistakenly passes the `student` object to `getsum` and `getaverage` methods as if they were external functions requiring arguments. However, since these methods are called on the `student` object itself, they should be invoked without arguments, like `s.getsum()` and `s.getaverage()`. This is a common mistake when transitioning from a functional to an object-oriented approach.
### Improvement
To correct the final approach, the method invocations should not include the `student` object as an argument:
```javascript
for (const s of students) {
output2 += `${s.name}\t${s.getsum()}\t${s.getaverage()}\n`;
}
```
This correction aligns with the object-oriented programming paradigm by correctly invoking methods on the object itself without unnecessary arguments.
Overall, this document effectively demonstrates different strategies for managing and processing data within JavaScript objects, moving from procedural to more object-oriented techniques.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 9) toString() method override (0) | 2024.12.30 |
|---|---|
| chapter 9) Static keyword (0) | 2024.12.29 |
| chapter 9) combination get keyword and set keyword (0) | 2024.12.27 |
| chapter 8) Except (0) | 2024.12.26 |
| chapter 8) print out exception (2) | 2024.12.25 |