들어가며
클래스는 붕어빵을 찍어내는 붕어빵 틀이다..란 이야기는 몇 번 들은 적이 있었습니다. 다만 왜 클래스를 붕어빵 틀이라고 하는지에 대해 정확히 알고 있지 못했어요. 객체에 대한 이해도 떨어졌기 때문에 클래스는 더더욱 이해하지 못했죠. 그런데 최근 자바스크립트를 공부하며 객체와 클래스랑 조금은 친해진 듯해요! 공부하고 이해한 내용에 대해 포스팅으로 남겨둡니다-😙
클래스를 설명하기 위해서는 this를 먼저 설명해야할 것 같아요. this부터 보시죠💁🏻♀️💗
this
🤷🏻♀️ this가 뭔데?
this는 this가 속해있는 메소드(함수)가 속한 객체를 가르키도록 약속된 특수한 예약어입니다.
아래의 예시에서 profile객체에 속해있는 sum함수는 profile객체 내에 있는 값을 사용하고 있습니다. 이 때, this를 사용하지 않는다면 주석과 같이 profile.age + profile.favoriteNum과 같이 접근해주어야겠죠. 하지만, 이럴 경우 변수명(profile이란 객체의 이름)이 바뀌면 일일이 모두 변경해주어야 하는 번거로움이 생깁니다.
this를 사용하면 이러한 번거로움이 없어집니다. this는 자신이 속한 함수가 속해있는 객체, 자기자신을 가르키기 때문이죠.
const profile = {
name: 'hyerin',
age: 25,
favoriteNum: 5,
sum: function(){
// return profile.age + profile.favoriteNum;
return this.age + this.favoriteNum;
}
}
console.log(profile.sum()); // 30클래스
🤷🏻♀️ 클래스는 뭔데?
쉽게 말해 클래스는 비슷한 종류의 객체를 많이 찍어내기 위해 사용하는 틀입니다.
📜 클래스
클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀(template)입니다.
위키백과, 클래스
클래스는 ES2015에서 도입되었기 때문에 그 전까지는 비슷한 종류의 객체를 많이 만들어내기 위해 생성자 함수를 사용했다고 해요. 클래스를 붕어빵 틀이라고 하고 객체를 붕어빵이라고 한다면, ES2015 이전까지는 붕어빵 틀(클래스) 없이 만들어진 붕어빵(객체)만 있던 셈이었죠!
❗❗ 다른 언어의 클래스와 조금 달라요
자바스크립트는 일반적인 클래스 기반(class-based)의 객체지향 언어와 다릅니다. 자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어이기 때문이죠!
C#이나 C++과 같은 일반적인 클래스 기반(class-based)의 객체지향 언어에서의 상속은 말그대로 상속받는 것을 뜻해요. 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있다는 것을 의미하죠.
하지만, 자바스크립트에서 상속은 재사용을 의미해요. 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라 한다고 해요.
어떻게 사용하죠?
🔨 클래스 만들기! 뚝딱뚝딱
붕어빵을 만들기 위해선 우선 붕어빵을 어떤 모양으로 만들지 그 틀을 만들어주어야 해요. 눈의 모양, 입의 모양, 꼬리의 모양을 어떻게 할지 말이죠. 이러한 붕어빵 틀인 클래스는 그럼 어떤 구조로 만들어야 하는걸까요?
// 1. 클래스 만들기
class Person {
// 2. constuctor(생성자)
constructor(name){
this.name = name;
}
// 3. 메서드
sayHi() {
console.log(`Hello, ${this.name}!`);
}
}
// 4. 클래스 사용해 객체 생성
const myName = new Person('hyerin');
myName.sayHi(); // Hello, hyerin!1. 클래스 만들기
클래스를 선언해요
Person이라는 클래스를 선언해 객체의 틀을 만들어주었어요.2. constructor (생성자)
초기값 세팅
constructor는 클래스 내에서 사용할 변수를 선언하는 공간이에요.constructor는 이름은 바꿀 수 없어요. 메서드 처럼 여러개를 만들 수도 없죠. 유일무이한 존재인constructor!3. 메서드
메서드는 함수를 말해요
메서드를 통해constructor로 선언한 변수를 자유롭게 다뤄줄 수 있어요. 다양한 메서드를 만들어 사용할 수 있죠.4. 클래스 사용해 객체 생성
인스턴스를 생성해요
위 과정을 통해 완성된 클래스를new로 호출하면 객체가 생성돼요. 객체가 생성될 때 constructor가 자동적으로 호출되기 때문에 인수hyerin이this.name에 할당되어서 객체가 만들어져요! 이렇게 생성된 객체를 인스턴스라고 불러요.
참고
아래 내용을 참고해 개인적으로 공부하며 정리한 글입니다.
