자바스크립트 - Class 도입

 

클래스를 알기 전에 추상화라는 개념을 먼저 알아야 된다.

 

위키백과에서 추상화는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것이라고 나와있다.

 

사람을 데이터로서 표현한다면 키, 몸무게, 얼굴 둘레, 눈썹 길이, 눈 크기, 입술 주름 개수 등 모든 복잡한 정보를 입력해야 할 것이다.

 

하지만 프로그램을 만들 때 모든 정보가 필요하지 않다.

예를 들어 멤버십 카드를 만들 때 그 사람의 이름, 전화번호와 같은 정보만 알면 된다.

 

그래서 이해하기 쉽게 정리해보자면 추상화는 어떤 대상에서 나에게 필요한 것만 추출해 내는 것이라고 할 수 있다.

 

그렇다면 이제 클래스를 왜 사용하는지 알기 위한 예시들을 살펴보자.

 

학생을 추상화 해서 아래와 같이 학생들의 성적을 객체로 만들어 배열에 담았다.

const students = [
  { 이름: "구름", 국어: 87, 영어: 98, 수학: 88, 과학: 90 },
  { 이름: "별이", 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: "겨울", 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: "바다", 국어: 98, 영어: 52, 수학: 98, 과학: 92 },
];

console.log(students);

학생들의 성적을 가지고 성적의 총합과 평균을 구해보자.

const students = [
  { 이름: "구름", 국어: 87, 영어: 98, 수학: 88, 과학: 90 },
  { 이름: "별이", 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: "겨울", 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: "바다", 국어: 98, 영어: 52, 수학: 98, 과학: 92 },
];
let output = "이름\t총점\t평균\n";
for (const student of students) {
  const 총점 = student.국어 + student.영어 + student.수학 + student.과학;
  const 평균 = 총점 / 4;
  output += `${student.이름}\t${총점}점\t${평균}점\n`;
}

console.log(output);

 

실행했을 때 아래와 같은 결과를 구할 수 있다.

이와 같은 총점과 평균을 구하는 방식은 여러 곳에서 많이 쓰일 수 있으므로 함수로 만들면 편리할 것이다.

const students = [
  { 이름: "구름", 국어: 87, 영어: 98, 수학: 88, 과학: 90 },
  { 이름: "별이", 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: "겨울", 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: "바다", 국어: 98, 영어: 52, 수학: 98, 과학: 92 },
];

const get총점 = (student) => {
  return student.국어 + student.영어 + student.수학 + student.과학;
};

const get평균 = (student) => {
  return get총점(student) / 4;
};

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

console.log(output);

코드를 저장하고 실행해 본다면 똑같은 결과값을 얻게 된다.

하지만 이 코드의 문제점은 get총점, get평균을 보았을 때 어떤 데이터가 적용이 되는지 인지하기 힘들 수 있다.

그래서 C언어 같은 경우 get총점OfStudent와 같은 형태로 명시적으로 표기해주기도 한다.

그래서 자료와 함수를 하나로 묶는 방법으로 객체를 생각할 수 있다.

객체는 자신을 나타내는 자료와 자신이 사용할 수 있는 함수를 한꺼번에 묶은 것이라고 생각하면 된다.

const students = [
  { 이름: "구름", 국어: 87, 영어: 98, 수학: 88, 과학: 90 },
  { 이름: "별이", 국어: 92, 영어: 98, 수학: 96, 과학: 88 },
  { 이름: "겨울", 국어: 76, 영어: 96, 수학: 94, 과학: 86 },
  { 이름: "바다", 국어: 98, 영어: 52, 수학: 98, 과학: 92 },
];

for (const student of students) {
  student.get총점 = function () {
    return this.국어 + this.영어 + this.수학 + this.과학;
  }
  student.get평균 = function () {
    return this.get총점() / 4;
  }
}

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

console.log(output);

위 코드의 결과값도 이전과 동일한데 코드를 보면 큰 변화가 생긴 것을 볼 수 있다.

 

영어에서 동사와 목적어를 합치면 명령문이 되고 주어,동사,목적어를 합치면 평서문이 되는 것처럼 get총점()이란 함수는 어떤 자료와 연결되는지 알기 힘들지만 student.get총점() 함수는 어떠한 자료에 어떠한 함수를 적용할 수 있다는 것을 훨씬 더 빠르고 명확하게 인지할 수 있다.

동사 + 목적어 => 명령문
=> get총점()
get = 동사, 총점 = 목적어

주어 + 동사 + 목적어 => 평서문
=> student.get총점()
student = 주어, get = 동사, 총점 = 목적어

작은 차이일 수 있지만 프로그래밍 언어의 역사에서 명령문이 평서문으로 바뀐 것은 굉장히 큰 패러다임의 변화이다.

그리고 student.get총점()과 같이 작성할 수 있는 프로그래밍 언어를 객체지향 프로그래밍 언어라고 부르게 된다.

 

마지막으로 코드를 더 발전 시켜 볼 수 있다.

function createStudent(이름, 국어, 영어, 수학, 과학) {
  return {
    이름: 이름,
    국어: 국어,
    영어: 영어,
    수학: 수학,
    과학: 과학,
    get총점() {
      return this.국어 + this.영어 + this.수학 + this.과학;
    },
    get평균() {
      return this.get총점() / 4;
    },
  };
}

const students = [
  createStudent("구름", 87, 98, 88, 90),
  createStudent("별이", 92, 98, 96, 88),
  createStudent("겨울", 76, 96, 94, 86),
  createStudent("바다", 98, 52, 98, 92),
];

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

console.log(students);

이렇게 코드를 구현하면 createStudent 함수와 같이 객체를 나타내는, 표현하는 부분과 createStudent객체를 사용하는 students객체를 사용하는 부분이 확실하게 나뉘어서 이전보다 훨씬 더 발전된 코드로서 사용할 수 있게 된다.

 

또한 속성과 메소드를 한 부분에서, 한 함수에서 관리할 수 있게 되면서 조금 더 쉽게 객체를 유지보수할 수 있게 된다.

 

하지만 이 코드에도 문제점이 있는데 객체별로 get총점()과 get평균()이라는 함수가 하나하나 다 들어가기 때문에 무거운 자료형이 여러 개 생성되는 문제가 발생한다.

 

이 문제를 해결하고 효율적인 객체지향 언어 형태로 프로그래밍 하기 위해서 프로그래머들은 프로토타입이라는 개념과 클래스라는 개념을 만들게 된다.

 

클래스로 어떤 기능을 제공하는지 어떻게 사용하는지는 다음 포스트에 정리해 볼 것이다!