연관있는 데이터 + 함수를 한 군데에 묶어서 관리하는 컨테이너
class
안에는데이터
만 있기도,함수
만 있기도 한다.
class
를 이용해서상속
과다양성
이 일어날 수 있는데 이런 것들이 가능한 것이객체지향언어
라고 하며,
자바스크립트는객체지향언어
이고, 최근 ES6에 추가되었다고 한다.
prototype
을 기반으로 그 위에 문법만class
가 추가된 것.(syntactical sugar)
class
도입 전에는 바로object
를 만들 때function
을 사용하여 틀을 만들었음.
class | object |
---|---|
Template | Instance of a class |
Declare once | Created many times |
No data in | Data in |
class
에는데이터
가 없고,틀
만 갖춰진 것으로청사진
이라고도 불린다.
class
는 관련 데이터만 들어 올 수 있도록정의
만 하고, 한 번만 선언한다.
class
를 이용해 데이터를 넣어서 만드는 것이object
.
class
를 이용해서 새로운instance
를 생성하면object
가 된다.
object
는class
를 이용해서 많이 만들 수 있고,class
는 단순 정의만 한 것이다.
실제로 데이터를object
에 넣지 않으면class
는 메모리에 올라가지 않고, 데이터를object
에 넣어야 메모리에 올라간다.
class 선언
class Person{ // class 선언 constructor (name,age){ // 생성자 constructor를 통해 object로부터 필요한 데이터 전달받는다. this.name = name; // 속성 (field, data); 전달받은 데이터를 할당 this.age = age; // 속성 (field, data); 전달받은 데이터를 할당 } speak() { // 행동(method) console.log(`${this.name}, hello!`) } }
object 생성
let emily = new Person('emily',19); // object instance 생성 console.log(emily.name); // "emily" ; console.log(emily.age); // 19 ; console.log(emily); // {age:19. name:"emily"} ; emily.speak(); // "emily, hello!"
생성된
object
으로 class의 객체나 함수를 불러와야 한다.
class
내부의this
는 생성된object
이름을 받아 프로퍼티 값을 가져온다.
class
안에서 내부적으로 보여지는 변수, 밖에서 보일 수 있는 변수를 나눠지기도 한다.
객체의 외부에서 접근 할 수 없고, 외부로부터 감춰진 속성이나 메소드를 encapsulation(캡슐화)
라고 한다.
캡슐화
는 외부에서 설정된 값을 변경할 수 없게 숨겨둔 것이다.
게터(getter)
객체의 프로퍼티를 가져오는 함수
class
를 사용하는 사용자가 입력한 값을return
getter
는 파라미터 값을 가질 수 없다.세터(setter)
객체의 프로퍼티를 설정하는 함수
class
를 사용하는 사용자가 잘못된 값을 입력할 때 set을 이용하여 값을 설정.
값을 설정하기 때문에 value 를 받아와야 함. 따라서 1개의 파라미터를 가진다.
class User{
constructor(firstName,lastName,age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age(){ // get 함수
return this._age; // 'this.age'는 getter를 호출
}
set age(value){ // set 함수
if (value < 0){ // age의 파라미터가 0 보다 작으면 Error return
throw Error ('Please check your age')
}
this._age = value; // '= age'는 setter를 호출
// this._age = value < 0 ? 0 : value; 이런 표현방법도 있음 */
}
}
const user1 = new User('Emily','Park',-1);
console.log(user1.age); // '-1'은 0보다 작기 때문에 Error 출력
// 내부적으로 'get'와 'set'를 이용하기 때문에 '.age'로 호출해도 '_age'에 할당할 수 있다.
getter
를 정의하는 순간this.age
는 메모리에 있는 데이터를 읽어 오는 것이 아니라getter
를 호출.
setter
를 정의하는 순간= age
값을 할당 할 때 메모리의 값을 할당하는 것이 아니라setter
를 호출만약
setter
의 프로퍼티를.age
하는 경우,setter
호출을 반복.
this.age
가 반복되는 것을 방지하기 위해서getter
와setter
에서 쓰이는 변수의 이름을 보통은' _ '
기호를 이용함.
✓ User class에는 총 3개의 field (fristName,lastName,_age) 가 있다.
class Experiment{
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);
constructor를 쓰지 않고 필드를 정의할 수 있는데 그냥 정의하게 되면
"public"
-> 외부에서 접근이 가능
'#' 해쉬기호
를 붙이게 되면private
.
class
내부에서만 값이 보여지고, 접근이 되고, 값이 변경 가능하지만
class
외부에서는 이 값을 읽을 수도, 변경할 수가 없다.따라서,
publicField
를 출력하면 '2' 가 출력되지만,privateField
는'undefined'
가 출력된다.아직 사파리, 최신 브라우저에서 지원을 하지 않는다.
class에 있는 데이터와 상관없이 class가 가지고 있는 공통적인 class의 고유의 값과 메소드를 동일하게 반복되어 사용해야 하는 경우가 있을 때 사용.
class Essential {
static supplements = "omega-3"
constructor(nutrition){
this.nutrition = nutrition;
}
static omega(){
console.log(this.supplements)
}
}
const essential = new Essential('sports research')
const essential2 = new Essential('Number 1 product')
console.log(essential.supplements) // undefined
console.log(Essential.supplements) // "omega-3"
Essential.omega(); // "omega-3"
// static이 안붙어 있는 경우에는 object이름을 불러서 하지만 static이 붙어 있는 경우에는 class 이름을 붙여서 프로퍼티를 가져온다.
>
console.log(essential.nutrition); // "sports research"
console.log(Essential.nutrition); // undefined
object
마다 할당되는 것이 아니기 때문에object
의 이름을 붙이지 않고,
class
의 이름을 붙여서 프로퍼티를 가져온다.따라서
'static'
이 붙여져 있으면object 인스턴스
에서 호출 할 수 없다.공통적으로 class에서 쓸 수 있는 거라면
'static'
을 사용해 메모리의 사용을 줄일 수 있다.
기존class
에 있는 것들을 extends
를 이용하여 새로운 class
에 상속할 수 있다.
상속을 하게 되면 공통되는 것들을 재사용
할 수가 있다.
재사용이 가능하기에 유지보수
가 쉬움.
다양한 object
를 만들어서 서로 다른 기능을 하도록 할 수 있다.
class Service{
constructor(roomNumber,drinks){
this.roomNumber = roomNumber;
this.drinks = drinks;
}
front() {
console.log(`Can I get welcome drinks as ${this.drinks}?`)
}
getNumber() {
console.log(`My room number is${this.roomNumber}`);
}
}
const service = new Service(2020,'coffee')
class Hotelservice extends Service {}
// 새로운 'Hotelservice'class에 'Service' class의 프로퍼티와 함수를 물려줌
const hotelservice = new Hotelservice(1004,'juice');
console.log(hotelservice); // {drinks: 'juice', roomNumber:1004}
hotalservice.front(); // "Can I get welcome drinks as juice?"
새로운class
에 원하는 기능을 끼워 넣어 필요한 함수만 바로 재정의
해서 쓸 수 있다.
class Service{
constructor(roomNumber,drinks){
this.roomNumber = roomNumber;
this.drinks = drinks;
}
front() {
console.log(`Can I get welcome drinks as ${this.drinks}?`)
}
getNumber() {
console.log(`My room number is${this.roomNumber}`);
}
}
const service = new Service()
class Roomservice extends Service {
front() {
super.front();
// 부모의 메소드(기존 class의 메소드)를 'supper'를 사용하여 가져 올 수 있다.
console.log(`Please deliver ${this.drinks} to ${this.roomNumber}`)
}
}
const roomservice = new Roomservice(1004,'juice');
console.log(roomservice); // {drinks:'juice', roomNumber: 1004}
roomservice.front();
/* "Can I get wellcome drinks as juice?"
-> super.front()인 부모 class의 front() 출력
"Please deliver juice to 1004"
-> roomservice.front() 추력*/
새로운
Roomservice
라는class
에 부모 class인Service
를 상속했다.
이는,Service
에 있는 프로퍼티와 함수가Roomservice
에 귀속된다는 말이다.
Roomservice
class 안에 원하는 함수만 가지고 와서 수정하거나, 새로운 함수를 추가 할 수 있다.이처럼
class
를 이용하여 다양한 값을 만들어 낼 수 있다.
'true' or 'false' 반환
instanceof
기준으로 왼쪽에 있는 object
가 오른쪽에 있는 class
의 object
인지 확인
즉, object
가 class
를 이용해서 만들진 것인지 아닌지 확인 하는 것
class Drinks {
constructor(wellcome){
this.wellcome = wellcome;
}
}
let hotel = new Drinks('ice coffee');
console.log(hotel instanceof Object) // true
자바스크립트에서 만든 모든 "object", "class"들은 자바스크립트에 있는 object를 상속한 것.
어떠한 object라도 공통적으로 존재하는 이미 지정된 메소드들을 쓸 수 있다.
💡 드림코딩 클래스와 오브젝트의 차이점
💡 드림코딩 클래스와 콜백함수
제코베 문제 푸는 중간에 class라는 문제가 나와서 2-3일간 class에 대해 공부한 것 같다.
사전적인 의미도 찾아보고, 기본서도 찾아보고, 벨로그 글도 찾아봤다.
그런데도 도무지 머리 속으로 안들어와서 유튜브 영상을 보게되었다.
눈동냥을 많이 해서 그런가 이해가 조금은 수월했고, class의 기본 개념이 들어왔다.
역시 인고의 시간은 배신하지 않는 것인가🙏
드림코딩님의 유튜브가 많은 도움되었다.
보고서 따라치고.. 따라치면 값이 나오고 🎊🎊
물론 값이 안나올 때도 있었다.
신기하게도 똑같이 따라 치는데도 안나올 때는 눈을 지긋이 감게 된다.
왜냐면 눈이 너무 피로해서.. 이 때 눈을 감아본다.🤦🏻♀️
특히 한/영 키 왜 말을 그렇게 안듣는지.
울컥할 때가 한두 번이 아니다.
그럴 때는 가끔 키보드를 뚱땅뚱땅 내려친다.
가아아아끔... 노트북은 소중하니까.🤝