.png)
저는 학교에서 배운 언어중 Java 언어를 가장 좋아하는데요.
그 이유가 객체지향적이라 가장 깔끔하다고 생각해서 좋아합니다. 깰꼼하면 좋자네요.
그래서 오늘은 Class!
1. Class
IF, JS에 class나 object가 없다면?
우리가 만든 변수들이 떠다니게 되면서(묶여지지 않아서) 규모 있는 Project를 만들기가 어려울 거예요.
1-1) Class?
class는 ES6에서 추가된 친구예요. 친하게 지내도록해요
class가 나오기 이전에는 function을 이용해서 template를 만들 수 있었답니다.
그리고 JS에서 쓰이는 Class는 Java처럼 완벽하게 객체지향적으로 만들어진 게 아니라, prototype을 기반으로 그 위에 문법만 class를 추가한 거예yo.
이렇게 기존에 존재하는 것 위에 살짝 올라간 친구들은 Syntactic Sugar라고 부릅니다.
(문법적으로 달달한, 가짜의 편리함을 제공하는 것)
CLASS
- 청사진, template
- 연관 있는 data들이 묶여있는 container.
- Data class: field만 있는 class
//Class example class person{ name, age, speak();}Field(속성): name, age
Method(행동): speak();
즉, (관련 있는)field, method의 묶음을 의미 합니다.
1-2) Class VS Object
Class와 object의 차이는 무엇일까요?
- Class: 붕어빵 틀
- Object: 만들어진 붕어빵
Q. 갑자기 붕어빵이 왜 나와요?!
A. 겨울이니까 붕어빵 비유를 드는 겁니다.
class 자체에는 No data! 틀만 정의한 것입니다.
그리고 한 번만 선언할 수 있어요.
object는 이런 class를 가지고 만든 instance입니다.
무슨 말인지 모르시겠죠?
백번 듣는 것보다 한 번 보는 게 낫다는 말을 따라 . . .
//Class Vs Object example
class Person{
// constructor: 생성자
//나중에 object를 만들 때 필요한 data를 전달받음.
constructor(name,age){
//fields: 전달 받은 data를 할당
this.name=name;
this.age = age;
}
//method
speak(){
console.log(`${this.name}: hello!`);
}
}
const Owoy = new Person('0woy', 22);
const Coder = new Person('Coder', 120);위 예시에서 Class랑 Object 찾아볼까여?
-> Class: Person // Object: Owoy, Coder
Person이라는 한 번만 정의된 Class를 이용하여 각기 다른 data를 가진 0woy, Coder라는 Object들을 만든 겁니다.
1-3) 정리
CLASS
- template
- declare once
- No data in
- NOT go up in memory (메모리에 올라가지 않음)
OBJECT
- instance of Class
- created many times
- data in
- Go up in memory (메모리에 올라감)
2. Getter & Setter
Getter & Setter는 사용자가 바보같이 Class를 사용하려고 할 때 막아주는 친구들이에요. (또 친하게 지내세요)
//make object, using const user1 = new User('Steve', 'Job',-1); console.log(user1.age);이 사용자는 아래있는 User class를 이용해서 user1이라는 obj를 만들었는데, 나이를 음수로 지정하는 멍청나라의 멍청시민처럼 행동해버렸네요.
//class Decalartion class User{ constructor(fisrtName, lastName, age){ this.fisrtName=fisrtName; this.lastName=lastName; this.age=age; }멍청나라 시민권을 박탈하기 위해서 User class 안에
getter와 setter를 사용해준답니다.get age() {return this.age;} set age(value){ this.age=value;}
Q. 엥 근데 이렇게 썼는데 에러 뜨는데요?
A. 그 이유는 아래 코드 때문입니다.
//Call stack error
get age()
{return this.age;}
set age(value){ this.age=value;}이렇게 코드를 작성한 우리는 해당 에러를 만날 수가 있어요.
바로 Call Stack이 초과 됐다는 에러!
Call stack이 초과됐다는 에러가 발생한 이유👇
class User{
constructor(fisrtName, lastName, age){
this.fisrtName=fisrtName;
this.lastName=lastName;
this.age=age;
}
get age() {return this.age;}
set age(value) { this.age=value;}
}우리가 age라는 getter를 정의하는 순간,
this.age는 memory에 올라간 data를 읽어오는 게 아닌 getter를 호출합니다.
setter도 마찬가지로 정의하는 순간,
this.age=age(in User)는 메모리에 값을 할당하는 것이 아닌, setter를 호출하게 됩니다.
setter가 호출이 되면
this.age=value(in set)는 메모리의 값을 update하는 게 아니라
또 setter를 호출하게 되는데 그렇다면 무한 반복으로 setter가 호출이 되겠죠?
그래서 Call stack이 꽉차게 되면서 위와 같은 에러가 발생한답니다.
(정리) getter, setter를 정의하는 순간 메모리에서 값을 받고 저장하는 게 아닌 get, set을 호출함
이해가 되시나요?.. 멍청나라를 떠나려면 이해가 돼야합니다.
# Call Stack Error 벗어나기
getter & setter안에 쓰여진 변수이름(age)을 다른 것으로 바꿔주면 됩니다!
Like this!👇
//age -> _age
get age(){ return this._age; }
set age(value){
// 공격적인 딴지
if(value<0){
throw Error('age can not be negative');
}
// gentle한 딴지
this._age=value < 0 ? 0 : value;
}User's fields: firstName, lastName, _age
Note!
Q. field는 _age인데 우리가 .age를 쓸 수 있는 이유?
A. 내부적으로 getter와setter를 이용하기 때문!
여기선 문법 설명
gentle한 딴지 보시면 ? : 같은 기호들이 있죠?
저건 삼항연산자(조건부 연산자) 친구예요.
? 의 조건에 따라서 0 또는 value가 반환되는 건데요.
쉬운 예를 들어보면,
3<5 ? 'correct' : 'error';
-20>30 ? 'correct' : 'error';
3 < 5는 참이니깐 correct가 반환되고,
-20>30은 거짓말이니까 error가 반환됩니다.
this._age=value < 0 ? 0 : value;
이건 value를 this._age에 저장한 다음, 이 값이 0보다 작다면(참) 0을 반환하고, 아니라면(거짓) value를 반환하기때문에 사용자가 전달한 값이 음수가 되지 못하게 막아주는 거랍니다.
주절주절
class 배운 내용은 별로 없는데 뭐이리 많이 차지하는지..
이해를 도우려고 삽입한 코드들이 상당히 차지하네요.
쉽게 설명하려고 부연의 부연설명을 해서 그런가 길어지는데(근데 쉽게 설명한 거 같지도 않고...)
그래서 제가 하고 싶은 말은 Class [2]를 만들어야 할 것 같아요.
어차피 블로그도 내가 보고 고생도 내가 하니깐 상관 없는데
혹시나 저의 개발로그를 보는 분이 있을지도 모르니..
빠른 시일 내에 Class의 둘째자식을 가지고 오도록 하겠습니다. 오늘은 좀 공손하게 썼네요. 다음엔 반말로 쓸게!
새해 복 많이 받으세요🎈
그럼 안녕!
해당 Post는 유튜브 드림코딩 by 엘리님의 영상을 보고 공부하여 작성했습니다. 엘리님께서 설명해 주시는 게 훨씬 더 이해가 잘 되실 거예요!
더 자세하고 이해가 쉽게 공부하고 싶으신 분은 하단의 링크를 참조해 주세요!
