목차
1. 클래스란?
2. 클래스 만들기
3. 함수와 메서드의 차이
4. 클래스를 사용하는 이유
1. 클래스란?
- 객체를 생성하기 위한 틀, 템플릿
클래스는 객체지향에서 중요한 개념으로 각 객체를 생성하기 위해 속성과 메서드가 정의한다.
예를 들어 자동차가 있다고 생각해보자.
자동차는 색상, 모델 같은 속성이 있고 이동하기 위한 가속,감속 같은 동작이 있다. 이런 공통적인 부분들을 묶어 여러 대의 자동자를 만들 때 사용하기 위한 하나의 틀로 만들어 놓은 것이 클래스이다.
2. 클래스 만들기
자바 스크립트에서 클래스는 자주 사용된다. 클래스를 만들고 클래스에 대한 객체를 생성하는 방법을 알아보자
class 클래스{
constructor(속성1,속성2){
//생성자 메서드로 속성을 초기화하기 위한 메서드
//객체 생성시 처음에만 실행
this.속성1 = 속성1;
this.속성2 = 속성2;
}
//메서드
get속성1(){
return this.속성1;
}
set속성1(속성1){
this.속성1 = 속성2;
}
}
//객체 생성
let 객체 = new 클래스("속성1","속성2");
클래스를 선언할 때 이것이 클래스라는것을 명시하기 위해 class 예약어를 작성하고 뒤에 해당 클래스에 대한 이름을 적어준다. 어떤 클래스든 constructor이라는 생성자 메서드 필요로 하는데 클래스를 통해 만들어질 객체가 갖는 속성을 초기화하는 작업을 한다. 클래스에는 속성말고도 메서드라는 객체가 수행할 수 있는 메서드라는 내부 함수를 만들 수가 있다.
만들어진 클래스를 통해 객체를 생성할 수 있는데 new라는 키워드와 클래스를 통해 어떤 틀로 새로운 객체를 만들지 지정할 수 있다. 이 때 인자값을 전달하면 constructor에 인자값이 전달되어 새로 만들어지는 객체가 갖는 속성에 대한 값을 부여해줄 수 있다.
3. 함수와 메서드의 차이
클래스를 만드는 방법에서 메서드라는 단어를 사용하였다. 메서드는 내부함수라고 하였는데 함수면 함수지 일반 함수와 무슨 차이인걸끼?
함수 | 메서드 |
독립적으로 존재 가능 | 객체 내부에서 속성으로 존재 |
전역범위, 타함수 내에서 선언 | 객체 내에 선언 |
인자와 반환값을 통해 특정 기능을 수행 | 주로 객체의 상태를 조회하거나 변경 |
메서드는 함수가 맞긴 하지만 특정 객체에 종속된다.
4. 클래스를 사용하는 이유
클래스는 객체를 생성하기 위해 사용한다. 하지만 객체를 생성하는 방법은 클래스를 사용하는 것만 있는 것은 아니다. 그렇다면 굳이 사용하는 이유가 뭘까?
1) 객체지향 프로그래밍
- 실세계에 존재하는 객체를 소프트웨어에서 표현하기 위해 핵심적인 부분 또는 기능을 추상화하여 모델링하는 패러다임
소프트웨어 상의 객체를 즉 현실세계의 객체와 유사하게 만들기 때문에 이해하기 쉽고 가독성이 좋아진다. 또한 유지보수가 용이해질 수 있다.
2) 상속과 다형성
클래스를 사용하면 상속이라는 것을 통해 하나의 클래스의 속성을 또 다른 클래스가 받아 사용할 수 있다. 이러한 관계에서 속성을 넘겨주는 클래스를 "부모클래스", 속성을 받는 클래스를 "자식클래스"라고 한다.
//부모클래스
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getInfo() {
console.log(`나는 ${this.age}살 ${this.name}`);
}
}
//자식클래스
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
getInfo() {
console.log(`나는 ${this.age}살 ${this.grade}학년 ${this.name}`);
}
}
class Worker extends Person {
constructor(name, age, job) {
super(name, age);
this.job = job;
}
getInfo() {
console.log(`나는 ${this.age}살 ${this.job} 직업을 가진 ${this.name}`);
}
}
let student = new Student('홍길동', 18, 2);
let worker = new Worker('철수', 30, '개발자');
student.getInfo();
worker.getInfo();
/*
결과
나는 18살 2학년 홍길동
나는 30살 개발자 직업을 가진 철수
*/
위 코드에서 Student라는 클래스를 통해 생성된 객체인 student와 worker는 자신의 속성에 name과 age 속성을 추가하지 않아 없지만 부모클래스인 Person 클래스에서 name과 age라는 속성을 받아 사용할 수 있게 되었다.
또한 상속 관계에서 자식 클래스가 부모클래스의 속성을 상속받아 메서드를 재정의하거나 여러 클래스에서 공통된 클래스를 상속받는 다형성이라는 현상을 통해 코드의 유연성을 높여줄 수도 있다.
- 메서드 다형성 ▶ 부모클래스의 상속을 받은 메서드를 오버라이딩하여 부모클래스의 메서드와 다르게 동작하는 현상
student는 Person이라는 부모클래스에서 속성을 상속받은 Student 클래스의 객체로 Student클래스에서 getInfo를 재정의하였기 때문Person클래스의 getInfo와 다르게 동작한다.
- 객체 다형성 ▶ 같은 부모클래스의 상속을 받은 서로 다른 클래스가 공통된 속성이 있지만 자신만의 속성을 포함하는 현상
객체 Student와 worker는 서로 다른 클래스의 객체지만 그 클래스들은 공통된 Person클래스의 속성을 상속받았다. 그렇기에 같은 속성도 있지만 student는 grade, worker은 job이라는 속성을 각각 가지고 있다.
참조
이미지 : https://www.flaticon.com/kr/free-icon/car_5639841
객체지향 : https://poiemaweb.com/js-object-oriented-programming
'JS' 카테고리의 다른 글
원시타입이 메서드를 사용해? 박싱과 언박싱 (0) | 2024.04.24 |
---|---|
브라우저로 데이터를 저장하는 방법 (0) | 2024.04.23 |
콜백함수 (0) | 2024.04.21 |
배열 (0) | 2024.04.20 |
함수 (1) | 2024.04.19 |