Javascript에서 가장 중요하다는 함수 부분은 앞서 여러차례 정리해 보았다. 이제 함수와 함께 제일 꼼꼼하게 넘어가야 한다는 객체(object)부분에 대해서 알아보도록 하자!
(해당 내용은 드림코딩의 JavaScript ES6. 클래스와 오브젝트의 차이점에서 공부한 내용이며 추가적으로 참조한 사이트도 하단에 링크를 걸도록 하겠다.)
그렇다면 Let's get started! 😊😊
1. Class
class를 공부하기 위해선 object와 객체 지향 프로그래밍에 대해서도 짚고 넘어가야 한다.
1) 객체 지향 프로그래밍 (OOP, Object-Oriented Programming)
객체 지향 프로그래밍에서는 모든 데이터를 객체(object)로 취급하며 객체가 바로 객체 지향 프로그래밍의 중심이 된다.
객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 설명할 수 있고 이러한 객체의 상태(state)와 행동(behavior)을 구체화하는 형태의 프로그래밍이 바로 객체 지향 프로그래밍이다.
이때 객체를 만들어 내기 위한 설계도와 같은 개념을 클래스(class)라고 한다.
2) 클래스(class)와 오브젝트(object)
클래스는 쉽게 말해 '붕어빵을 만드는 틀' 이라고 비유할 수 있다.
왜냐하면 클래스 안에는 데이터가 들어가지 않기 때문이다. 다만 '이런 이런 data가 들어올 수 있어~😁' 라고 정의만 해놓는다.
(따라서 데이터가 들어가지 않기 때문에 memory에 올라가서 저장되지 않는다.data가 있는 object만 memory에 올라가 저장.)
선언은 한번만 하며 클래스를 template 혹은 청사진이라고 말하기도 한다.
클래스는 객체의 상태/속성을 나타내는 필드(field)와 객체의 행동을 나타내는 메소드(method)로 구성된다.
또한 필드(field)란 클래스에 포함된 변수(variable)를 의미하고 메소드(method)란 어떠한 특정 작업을 수행하기 위한 명령문의 집합이다.
그리고 이 class를 이용해서 실제 data를 넣고 만드는 것을 객체(object)라고 한다.
객체는 1) 여러번 선언 할 수 있고 2) data가 들어가 있으며 3) instance of a class 이다.
붕어빵틀에 피자를 넣거나 팥 혹은 슈크림을 넣어서 피자붕어빵, 팥붕어빵, 슈크림 붕어빵등을 만들 수 있는게 object인 것이다!
이렇게 class에는 변수와 속성, function은 있지만 data값이 없는것을 확인할 수 있다!
또한 class안에서도 내부적으로만 볼 수 있는 변수와 밖에서도 볼 수 있는 변수로 나눠지는데
이런것들을 캡슐화(incapsulation) 라고 한다.
class를 통해서 상속과 다양성이 일어날 수 있는데 이런 모든것들이 일어나는 곳이 바로 앞서 정의한 객체 지향 언어이다.
3) 클래스 field와 method
그렇다면 class 선언의 예시를 통해 field와 method가 어떤방식으로 들어가있는지 직접 눈으로 확인해보자!
constructor (name, age)라는 construct 생성자를 만들어, 나중에 object를 만들 때 필요한 데이터를 전달 할 수 있다.
전달 받은 데이터를 두가지 필드 this.name과 this.age에 전달 한다.
또한 method부분에 console.log(${this.name}:hello!) 부분의 this.name은 생성된 이름의 .name을 뜻한다.
위의 사진의 첫번째 줄은 class declaration 이후 object를 생성하는 부분이다.
새로운 object생성시에는 new를 ! 써준다.
4) Constructor (생성자)
위에 예시를 통해보면 Moon이라는 클래스 다음 constructor를 사용한것을 볼 수 있다.
constructor 메서드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다.
"constructor" 라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있으며 만약 클래스에 여러 개의 constructor 메서드가 존재하면 SyntaxError 가 발생 하게 된다.
5) 함수와 class의 차이점
바로 Hoisting이다.
함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 hoisting이 일어나지 않는다.
6) class의 표현식
Class 표현식은 class를 정의하는 또 다른 방법으로 Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다. 이름을 가진 class 표현식의 이름은 클래스 body의 local scope에 한해 유효하다.
백문이 불여일견. 예제를 살펴보자!
// unnamed
let Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name);
// 출력: "Rectangle"
// named
let Rectangle = class Rectangle2 {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
console.log(Rectangle.name);
// 출력: "Rectangle2"참고 사이트 및 영상 주소
