(1010) 회고 일지

같은 형태의 객체 만들기

• 예를 들어서 학생 성적관리 프로그램을 만든다라고 생각한다면, 학생이라는 객체가 필요하고, 그러한 학생들로부터 성적관리에 필요한 공통사항을 추출하는데 이를 추상화라고 한다.

	// 객체와 배열 조합하기
   	// 1. 객체를 선언한다.
    const student = []
    student.push({이름: '구름', 국어:87, 영어:98, 수학:88, 과학:90})
    student.push({이름: '별이', 국어:92, 영어:98, 수학:96, 과학:88})
    student.push({이름: '겨울', 국어:76, 영어:96, 수학:94, 과학:86})
    student.push({이름: '바다', 국어:98, 영어:52, 수학:98, 과학:92})
    
    // 출력
    alert(JSON.stringify(student, null, 2)) // 객체를 JSON 문자열로 변환할때 
    사용하는 메소드
    
    // 만약에 학생들의 총점과 평균을 구한다는 기능을 추가할때
    let output = '이름\t총점\t평균\n'
    for (const s of students) {
      const sum = s.국어 + s.영어 + s.수학 + s.과학
      const average = sum / 4
      output += `${s.이름}\t${sum}점\t${average}점\n`
    }
    console.log(output)

객체를 처리하는 함수

    // 객체의 속성과 기능을 만드는 부분
    // 1. 객체를 선언한다.
    const student = []
    student.push({이름: '구름', 국어:87, 영어:98, 수학:88, 과학:90})
    student.push({이름: '별이', 국어:92, 영어:98, 수학:96, 과학:88})
    student.push({이름: '겨울', 국어:76, 영어:96, 수학:94, 과학:86})
    student.push({이름: '바다', 국어:98, 영어:52, 수학:98, 과학:92})

    // 객체를 처리하는 함수선언
    function getSumOf (student) {
        return student.국어 + student.영어 + student.수학 + student.과학
    }
    
    function getAverageOf (student) {
        return getSumOf(student) / 4
    }
    
    // 객체를 활용하는 부분
    let output = '이름\t총점\t평균\n'
    for (const s of students) {
      output += `${s.이름}\t${sum}점\t${average}점\n`
    }
    console.log(output)

전체적인 코드는 이전코드보다 길어졌지만 객체를 만드는 부분과
활용하는 부분을 분리했기 때문에 추후에 기능을 추가할 경우가 생겼을 때
객체를 쉽게 유지보수 할 수 있으며 활용할때도 간단하게 코드를 작성할수 있다.

객체의 기능을 메소드로 추가하기

이전코드에서는 객체가 학생 객체 하나여서 저렇게 작성해도 문제가 되지않는다.
하지만 객체가 여러개일때는 함수가 충돌이 발생할 우려가 있다.
이에 대한 해결책으로 함수를 메소드로써 객체 내부에 넣어서 활용하는 방법을 사용하기 시작한다.

 	// 객체를 선언한다.
    const student = []
    student.push({이름: '구름', 국어:87, 영어:98, 수학:88, 과학:90})
    student.push({이름: '별이', 국어:92, 영어:98, 수학:96, 과학:88})
    student.push({이름: '겨울', 국어:76, 영어:96, 수학:94, 과학:86})
    student.push({이름: '바다', 국어:98, 영어:52, 수학:98, 과학:92})

    // students 배열 내부의 객체 모두에 메소드를 추가한다.
    for (const student of students) {
        student.getSum =  function() {
            return this.국어 + this.영어 + this.수학 + this.과학
        }
    
        student.getAverage = function() {
            return this.getSum() / 4
        }
    }
    
    // 객체를 활용하는 부분
    let output = '이름\t총점\t평균\n'
    for (const s of students) {
      output += `${s.이름}\t${sum}점\t${average}점\n`
    }
    console.log(output)

이런식으로 작성하면 함수 이름 충돌도 발생하지 않게 되고, 함수를 잘못사용하는 경우도 줄일수 있다.