[JS] 클래스의 기본 기능

클래스는 객체를 효율적이고 안전하게 만들기 위해서 만들어진 문법입니다.

기존의 문법을 효율적이고 안전하게 활용하기 위해 나온 문법입니다.

 

1. 객체지향 패러다임

객체지향 패러다임

객체를 우선적으로 생각해서 프로그램을 만든다는 방법론을 의미한다.

 

객체지향 프로그래밍

프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

절차지향 프로그래밍(C언어 등)을 보완하기 위해 등장했다.

절차지향 프로그래밍은 모듈을 재활용하기 어렵기 때문에 대규모 프로젝트에서는 코드의 반복으로 인해 장황해지거나 비효율적인 설계가 될것이다.

"데이터와 이를 처리하는 함수를 함께 묶을 수 없을까?", "프로그램을 어떻게 구조적으로 나눌 수 있을까?", "코드의 재사용성을 높일 수 없을까?" 를 해결하는 것이 바로 객체지향 프로그래밍의 핵심이다.

 

2. 추상화

프로그램에 필요한 요소만을 사용해서 객체를 표현하는 것이라고 할수있다.

좀 더 포괄적인 사전적 의미로는 복잡한자료, 모듈 , 시스템 등으로부터 핵심적인 개념과 기능을 간추려 내는것이다.

 

예를들어 학생성적 관리 프로그램을 만든다고 생각해볼때, 학생이라는 객체가 필요하고 그러한 학생들로부터 성적 관리에 필요한 공통사항을 추출하는데, 무한에 가까운 실제 사람의 정보에서 추상화 (필요한 정보만을 추출하는것)를 통해 학생 관리 프로그램에서 필요함 이름, 학년, 성적 등을 추출할때라고 생각할수있다.

 

예시를 통해 다양한 객체 처리방법을 알아보자

 

2-1. 객체를 처리하는 함수

<script>

/*여기부터*/***********************************************************
// 객체를 선언
  const students = []
  students.push({ 이름: 'John', 국어: 80, 영어: 85, 수학: 90, 과학: 95 })
  students.push({ 이름: 'Amy', 국어: 76, 영어: 90, 수학: 96, 과학: 91 })
  students.push({ 이름: 'Jack', 국어: 98, 영어: 60, 수학: 93, 과학: 77 })
  students.push({ 이름: 'Ann', 국어: 70, 영어: 87, 수학: 87, 과학: 65 })
  students.push({ 이름: 'Tom', 국어: 87, 영어: 94, 수학: 76, 과학: 82 })


// 객체를 처리하는 함수를 선언
	function getSumOf (student) {
		return student.국어 + student.영어 + studnet.수학 + student.과학
	}

	function getAverageOf (student) {
		return getSumOf(student) / 4
	}

/* 여기까지 객체의 속성과 기능을 만드는 부분이다*/***********************
	
// 출력 (객체를 활용하는 부분)
	let output = '이름\t총점\t평균\n'
  for (const s of students) {
  	output += `${s.이름} \t${getSumOf(s)}점 \t${getAverageOf(s)}점\n`
  }
  console.log(output)
  
</script>

전체적인 코드는 길어졌지만 객체를 만드는 부분과 객체를 활용하는 부분으로 나누었다.

쓸데없이 코드가 길어져 보이지만 객체에 더 많은 기능을 추가하게 되었을때 객체를 쉽게 유지보수할 수 있으며 객체를 활용할 때도 더 간단하게 코드를 작성할수있다.

 

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

 

(객체에 저장된 값이 함수일 때, 메소드라고 부른다.)

 

위 코드에서는 객체가 하나이므로 이렇게 작성해도 문제가 없지만 객체의 수가 늘어나면 함수 이름 충돌이 있을 수 있습니다.

이러한 문제를 해결하기위해 함수를 메소드로써 객체 내부에 넣어서 활용하는 방법을 사용할수있다.

함수를 만들면 여러가지 이득이 발생하는데 객체를 하나하나 만들 때와 비교해서

• 오탈자의 위험이 줄어든다.
• 코드를 입력하는 양이 크게 줄어든다.
• 속성과 메소드를 한 함수 내부에서 관리할 수 있으므로 객체를 더 손쉽게 유지보수 할 수 있다.

 

 

3. 클래스

클래스는 객체를 안전하고 효율적으로 만들 수 있게 해주는 문법이다.

특정 기능을 수행하기 위해 추상화를 거쳐 집단에 속하는 속성과 행위를 변수와 메소드로 정의한 것이다. 특정 기능을 구현하기 위해 필요한 인스턴스와 메소드를 담아둔 컨테이너라고 볼수있다.

클래스는 프로토타입에 비해 객체를 만들때 수많은 지원을 하는 대신 많은 제한을 거는 문법이다.

 

클래스는 다음과 같은 형태로 생성한다.

class 클래스이름 { }

클래스는 다른 용어와 비교하여 헷갈리기 쉬운데 쉽게 생각하여 이전에 살펴보았는 객체를 만드는 함수와 비슷하다고 생각하면 쉽낟.

 

4. 인스턴스

클래스를 기반으로 만든 객체는 인스턴스라고 부르지만 그냥 객체라고 부르는 경우가 많다.

클래스를 기반으로 만들었다고 함을 예로 들어보자면 클래스는 붕어빵을 만드는 붕어방틀과 같은것이고 붕어빵틀로 찍어서 만든 붕어빵 즉 실체화 된 붕어빵을 인스턴스라고 부르는것이다.

인스턴스는 다음과 같은 문법을 사용한다.

new 클래스이름()

 

학생들을 나타내는 student클래스를 만들고 인스턴스를 생성하는 코드를 만들어보았다.

<script>
//클래스를 선언한다.
class Student{
}

//클래스 이름은 첫글자를 대문자로 지정하는 것은 개발자들의 약속이다 오류가 발생하지는 않지만
//식별자를 보고 클래스인것을 바로 이해할 수 있도록 함이다.

//학생을 선언한다.
const student = new Student()


//학생 리스트를 선언한다
const students [
 new Student(),
 new Student(),
 new Student(),
 new Student()
 ]
 
 </script>

5. 생성자

위에서 학생을 선언할때의 코드를 보면 student위에 함수처럼 괄호를 열고 닫는 기호가 있다.

이는 객체가 생성될 때 호출되는 생성자 라는 이름의 함수이다.

생성자는 아래와 같은 형태로 생성한다.

class 클래스이름{
 costructor(){
 /* 생성자 코드*/ 
  }
 }

메소드의 이름을 constructor로 지정했지만 constructor의 이름을 그대로 사용하는것이 아니라 new Student()처럼 클래스 이름으로 호출한다.

 

생성자는 클래스를 기반으로 인스턴스를 생성할 때 처음 호출되는 메소드이다.

따라서 생성자에서는 속성을 추가하는 등 객체의 초기화 처리를 한다.