⭐Javascript 클래스

📕추상화

추상화는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는

기능을 간추려 내는 것을 말한다

간단하게 예시를 들어서 설명하자면 사람으로 설명해보겠다

사람이라는 객체에는 굉장히 많은 속성이 존재한다

눈 크기, 코 크기, 입술 주름 개수, 머리카락 개수, 몸무게 등 많은 것이 있다

근데 우리는 존재하는 모든 속성이 필요한 것이 아니다

병원에 간다면 이름, 키, 몸무게 등 필요한 정보만 기입하면 된다

이처럼 우리에게 필요한 정보만 추출해 내는 것을 추상화라고 이해하면 된다

📗클래스를 사용하는 이유

학생관리 프로그램을 만든다고 가정해보자

학생을 추상화해야하기 때문에 객체를 사용해서 추상화하도록 하겠다

 { 이름: '최부기', 국어: 99, 영어: 92, 수학: 84, 과학: 94 }
 { 이름: '김동기', 국어: 92, 영어: 98, 수학: 96, 과학: 88 }
 { 이름: '박근우', 국어: 76, 영어: 96, 수학: 94, 과학: 86 }
 { 이름: '강성율', 국어: 98, 영어: 99, 수학: 98, 과학: 92 }

이렇게 추상화를 하였다

이를 관리하기 위해서는 배열이 필요할 것이므로 배열로 감싸도록하겠다

  const student = [
  { 이름: '최부기', 국어: 99, 영어: 92, 수학: 84, 과학: 94 },
  { 이름: '김동기', 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: '박근우', 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: '강성율', 국어: 98, 영어: 99, 수학: 98, 과학: 92 }
  ]

학생 정보가 있을 때 학생들의 성적 총 합과 평균을 구하는 기능을 만들어보자

  const students = [
  { 이름: '최부기', 국어: 99, 영어: 92, 수학: 84, 과학: 94 },
  { 이름: '김동기', 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: '박근우', 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: '강성율', 국어: 98, 영어: 99, 수학: 98, 과학: 92 }
  ]

  let output = '이름\t총점\t평균\n'
  for(const student of students){
    const sum = student.국어 + student.영어 + student.수학 + student.과학
    const avg = sum / 4
    output += `${student.이름}\t${sum}점\t${avg}점\n`
  }

  console.log(output)

총점과 평균을 구하는 일은 잦을 수 있으니 따로 함수로 만들어 두자

<script>
  const students = [
  { 이름: '최부기', 국어: 99, 영어: 92, 수학: 84, 과학: 94 },
  { 이름: '김동기', 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: '박근우', 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: '강성율', 국어: 98, 영어: 99, 수학: 98, 과학: 92 }
  ]

  const getSum = (student) => {
    return student.국어 + student.영어 + student.수학 + student.과학
  }

  const getAvg = (student) => {
    return getSum(student) / 4
  }

  let output = '이름\t총점\t평균\n'
  for(const student of students){
    output += `${student.이름}\t${getSum(student)}점\t${getAvg(student)}점\n`
  }

  console.log(output)
</script>

이렇게 만드는 코드의 단점은 데이터의 종류가 늘어나고

총점과 평균을 구해야하는 상황이 많아질 때 이 함수가 어떤 데이터를 위한

함수인지 알기가 어려워 진다

그래서 데이터와 함수를 하나로 묶은 것이 있는데 그것이 객체이다

<script>
  const students = [
  { 이름: '최부기', 국어: 99, 영어: 92, 수학: 84, 과학: 94 },
  { 이름: '김동기', 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: '박근우', 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: '강성율', 국어: 98, 영어: 99, 수학: 98, 과학: 92 }
  ]

  for(const student of students){
    student.getSum = function () {
      return this.국어 + this.영어 + this.수학 + this.과학
    }
    student.getAvg = function () {
      return this.getSum / 4
    }
  }

  let output = '이름\t총점\t평균\n'
  for(const student of students){
    output += `${student.이름}\t${student.getSum()}점\t${student.getAvg()}점\n`
  }

  console.log(output)
</script>

이렇게 바꾸면 함수만 읽어도 어떤 데이터와 사용하는지 알 수 있게 된다

그리고 이처럼 사용하는 프로그래밍 언어를 객체지향언어라고 부른다

그렇다면 조금 더 객체지향에 맞게 코드를 발전시켜보자

지금은 학생 정보를 하나하나 작성해야 한다

그렇게 되면 오탈자가 발생할 가능성도 커지니 학생정보도 위처럼 바꿔보자

<script>
  function createStudent (이름, 국어, 영어, 수학, 과학) {
    return {
      이름: 이름, 국어: 국어, 영어: 영어, 수학: 수학, 과학: 과학,
      getSum () {
      return this.국어 + this.영어 + this.수학 + this.과학
      },
      getAvg () {
      return this.getSum() / 4
      }
    }    
  }

  const students = [
  createStudent('최부기', 99, 92, 84, 94 ),
  createStudent('김동기', 92, 98, 96, 88 ),
  createStudent('박근우', 76, 96, 94, 86 ),
  createStudent('강성율', 98, 99, 98, 92 )
  ]

  let output = '이름\t총점\t평균\n'
  for(const student of students){
    output += `${student.이름}\t${student.getSum()}점\t${student.getAvg()}점\n`
  }

  console.log(output)
</script>

이렇게 작성하면 객체를 나타내는 부분과 객체를 활용하는 부분이 나뉜다

또한 속성과 메소드가 한 함수에 있으니 관리하기도 편하다