자바스크립트는 객체 기반의 프로그래밍 언어입니다.
심지어 자바스크립트를 이루고 있는 거의 모든 것을 객체라고도 말할 수 있죠.
자바스크립트를 공부하다 보면 아마 손쉽게 자바스크립트는 객체다라는 표현을 들어보셨을 거예요. 다들 왜 이런 표현이 사용되는지 궁금하시지 않은가요?
이번 시간에는 프로토타입이라는 개념을 주제로 공부하기 전에, 우선 알고 넘어가야 하는 객체지향 프로그래밍이라는 개념에 대해 간단하게 살펴볼게요.
객체지향 프로그래밍
객체지향 프로그래밍은 절차 지향적 관점에서 벗어나 여러 개의 독립적인 단위의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 이야기해요. 다시 말하자면, 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 방법에서 벗어나 객체라는 독립적인 집합으로 표현하는 방법인 것이죠. 여기에서 객체란, 데이터의 상태(속성)와 그 데이터를 다루는 동작(메서드)을 하나로 묶은 덩어리를 이야기해요.
객체지향 프로그래밍은 실제 세상에 존재하는 사물이나 개념을 프로그래밍에 접목하려는 시도에서 생겨났어요. 사물이나 개념은 각각의 특징이나 성질을 나타내는 속성을 가지고 있죠? 예를 들면 사람은 이름, 주소, 성별, 나이, 신장, 체중과 같은 다양한 속성을 가지고 있어요. 그리고 우리는 이러한 속성을 이용해서 어떠한 사람을 특정하거나, 다른 사람과 구분해 낼 수 있게 되죠.
이처럼 실제 세상에 존재하는 사물이나 개념에 대해 속성과 동작이라는 하나의 덩어리로 묶어서 프로그래밍 세계 안에 표현하는 것을 바로 객체지향 프로그래밍이라고 해요.
원이라는 개념을 객체로 표현하기
const circle = {
radius: 5, // 반지름
// 원의 지름: 2r
getDiameter() {
return 2 * this.radius;
},
// 원의 둘레: 2πr
getPerimeter() {
return 2 * Math.PI * this.radius;
},
// 원의 넓이: πr²
getArea() {
return Math.PI * this.radius ** 2;
},
};
console.log(circle); // {radius: 5, getDiameter: 𝑓, getPerimeter: 𝑓, getArea: 𝑓}
console.log(circle.getDiameter()); // 10
console.log(circle.getPerimeter()); // 31.41592653589793
console.log(circle.getArea()); // 78.53981633974483앞에서 서술한 내용을 바탕으로 원이라는 개념을 객체로 만들어 본다면 위와 같이 표현할 수 있어요. 원은 반지름이라는 속성을 가져요. 그리고 우리는 이 반지름을 가지고 원의 지름, 둘레, 넓이를 구할 수도 있죠. 이때 반지름은 원의 상태를 나타내는 데이터, 원의 지름과 둘레 그리고 넓이를 구하는 작업은 동작이라고 부를 수 있어요.
이처럼 객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각해요. 그래서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있어요.
그런데 객체는 사실 혼자 독립적으로만 존재하는 게 아니에요. 각 객체는 고유의 기능을 갖는 독립적인 부품이면서 동시에, 다른 객체와 관계를 맺기도 해요. 서로 메시지를 주고받거나, 심지어 다른 객체가 가진 상태 데이터나 동작을 물려받아 사용하기도 하죠.
다른 객체의 기능을 물려받아 사용하는 것, 이걸 상속이라고 해요. 그런데 자바스크립트는 원래 과거에 class라는 문법이 없었는데, 어떻게 상속이라는 개념을 구현했을까요? 그 답이 바로 다음 편에서 다룰 프로토타입이에요. 다음 글에서 자세히 살펴볼게요.
참고자료
책 : 모던 자바스크립트, Deep Dive
