객체 지향 프로그래밍(Object Oriented Programming)
객체지향 프로그래밍이란 컴퓨터 프로그래밍의 패터다음 중 하나로, 데이터가 객체 내에 캡슐화되고 구성요소의 부분이 아닌, 객체 자체가 운용되는 프로그래밍 접근 방식이다. 원래는 JavaScript에 class라는 도구가 없었는데 ES6 이후부터 JavaScript가 공식적으로 지원했고, 이전에는 프로토타입 기반의 객체 생성방식으로 class를 사용했다.
클래스는 다음과 같은 구성 요소로 구성된다.
- 멤버변수 : 클래스의 상태를 저장하는 변수이다.
- 메서드 : 클래스의 동작을 정의하는 함수이다.
- 생성자 : 클래스의 객체를 생성할 때 호출되는 함수이다.
- 상속 : 다른 클래스의 멤버를 상속받아 새로운 클래스를 정의하는 기능이다.
아래의 코드와 함께 class를 알아보자
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`안녕 ! 내 이름은 ${this.name}이야. 난 ${this.age}살이야!`)
}
}
Person클래스내에서 선언된 변수 name과 age가 멤버 변수이다. 클래스의 객체가 생성될 때, 메모리에 할당된다. 멤버 변수는 객체상태를 저장하고, 객체의 메서드에서 접근하여 사용할 수 있다.
클래스 내부에 멤버변수를 감싸고 있는 constructor를 생성자 함수라고 부른다. 생성자는 객체를 생성할 때, 초기화 작업을 수행하는 함수이다. new 연산자와 함께 호출된다. 생성자는 this 키워드를 사용하여 자신이 생성한 객체를 참조할 수 있다. 이를 통해 객체의 속성과 메서드를 정의하고 초기화할 수 있다.
sayHello() 메서드를 가지고 있다. 클래스 내에서 정의된 메서드는 객체의 행동을 구현할 수 있다. 위의 sayHello()메서드는 Person클래스의 인스턴스에서 호출할 수 있는 메서드이다.
클래스는 다른 클래스로부터 상속을 받을 수 있다. 다음 코드를 추가하여 클래스의 상속에 대해 알아보자.
class Student extends Person {
constructor(name, age, grade) {
super(name, age); // super()메서드로 부모 클래스의 생성자 호출
this.grade = grade;
}
introduce() {
console.log(`나는 ${this.grade}학년 학생이야!`);
}
}
위 코드에서 자식 Student 클래스는 부모 Person 클래스를 상속받았다고 할 수 있다. 위와 같이 extends를 이용하여 상속을 구현할 수 있다. 상속을 받을 때 생성자 함수에서 부모클래스의 멤버변수를 작성해주고, super()를 작성해주어야 한다. 위와 같이 부모클래서의 생성자를 호출할 수 있고, 자식 클래스에서 이를 사용할 수 있다.
자식클래스에서 부모클래스의 속성과 메서드를 상속받아 사용하면 코드의 재사용성을 높일 수 있다. 또한, 클래스 간의 관계를 보다 명확하게 표현할 수 있어 코드의 가독성을 높일 수 있다.
'TIL' 카테고리의 다른 글
브라우저 렌더링 과정에 대해 알아보자 (0) | 2023.07.26 |
---|---|
[Network] RESTful API (0) | 2023.07.25 |
[JS] 프로토타입(prototype) (0) | 2023.07.20 |
[JS] 클로저(Closure) (0) | 2023.07.18 |
[JS] 변수와 함수 호이스팅(Hoisting) (0) | 2023.07.17 |