<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//add constructor function
class Student {
constructor(name,kor,eng,math,sci){
this.name = name
this.kor = kor
this.eng = eng
this.math = math
this.sci = sci
}
}
const students = []
students.push(new Student('cloud',83,63,95,83))
students.push(new Student('star',80,89,97,32))
students.push(new Student('winter',98,96,54,83))
students.push(new Student('fall',80,42,98,99))
let output = `name\tsum\taverage\n`
for (const s of students){
output += s.toString()
}
console.log(output)
</script>
</head>
<body>
</body>
</html>### Overview of the `Student` Class
- **Constructor**: The `Student` class defines a constructor that initializes a new instance with the student's name and their scores in Korean (`kor`), English (`eng`), Math (`math`), and Science (`sci`).
### Creating and Storing `Student` Instances
- An array named `students` is created to store instances of `Student`.
- The `push` method is used to add new `Student` objects to the array with specific names and scores.
### Attempting to Display Student Information
- The script aims to generate a string `output` that summarizes student data in a tab-separated format, intending to include the student's name, their total score sum, and their average score.
- It iterates over the `students` array, appending the result of `s.toString()` to `output` for each student. However, the `Student` class does not have a custom `toString` method defined, meaning it falls back to the default `Object.prototype.toString` method, which does not provide the intended information.
### Issue and Solution
- **Issue**: Without a custom `toString` method, the code snippet will not correctly append the student's data to the `output` string. Instead, it will append `[object Object]` for each student, resulting in an output that does not meet expectations.
- **Solution**: Define a `toString` method within the `Student` class to format the student's data as intended.
### Corrected `Student` Class with `toString` Method
```
class Student {
constructor(name, kor, eng, math, sci) {
this.name = name;
this.kor = kor;
this.eng = eng;
this.math = math;
this.sci = sci;
}
toString() {
const sum = this.kor + this.eng + this.math + this.sci;
const average = sum / 4;
return `${this.name}\t${sum}\t${average.toFixed(2)}\n`;
}
}
```
With the `toString` method defined, calling `s.toString()` for each student will now return a string with the student's name, the sum of their scores, and their average score, formatted as intended for the `output` string. This method calculates the total sum and average score for each student, formats them with tab separation, and appends a newline character for proper line breaks in the console log output.
### Conclusion
This example highlights the importance of defining custom behavior for class instances, such as with a `toString` method, to meet specific data formatting and presentation requirements in JavaScript applications.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 9) combination of array and object (0) | 2025.01.02 |
|---|---|
| chapter 9) Override (2) | 2025.01.01 |
| chapter 9) toString() method override (0) | 2024.12.30 |
| chapter 9) Static keyword (0) | 2024.12.29 |
| chapter 9) use to array (1) | 2024.12.28 |