✅ Class란?
- 객체를 생성하기 위한 템플릿
- 객체를 생성하기 위한 틀이지 객체는 아니다.
- 클래스 안에 데이터는 존재하지 않는다.
- 메모리에 올라가지 않는다.
- 자바스크립트에서의 Class는 ES6 부터 도입되었다.
클래스를 사용할 때는 this를 정말 많이 사용한다. 따라서, this에 대해 잘 이해를 해야한다.
❓ Class 생성 방법
Class 클래스명 {
// 생성자
constructor(){
this.name = name
}
//함수들
getName() {
return this.name;
}
}클래스에서는 Propery들에 대한 접근을 설정을 할 수 있다. private로 외부에서 접근을 할 수 있게 하거나 불가능하게 public으로 내부에서만 사용할 수 있도록 할 수 있다.
❓ Class에서의 접근제어자
1. private Property
- 외부에서 접근이 불가능하다.
- Class안에서만 사용이 가능하고 변경이 가능하다.
- 변수앞에 #을 붙인다.
아래에 코드로 변수앞에 #을 붙였을 때(private) 어떻게 작동하는지 확인해보자.
class Info {
// 생성자
constructor(name, age) {
this.#name = name;
this.age = age;
this.gender = "남자";
}
//함수들
getName() {
return this.name;
}
}
let info = new Info("덩두", 30);
console.log(info.name); // output : SyntaxError: Private field '#name' must be declared in an enclosing class이렇게 name이라는 변수명 앞에 #을 붙였더니 SyntaxError가 발생하였다. 오류 내용은 private 하기 때문에 접근 할 수 없다. 라는 내용이다. 따라서, private한 Property는 외부에서 접근이 불가능하고 내부에서만 사용할 수 있다는 것을 알 수 있다.
2. public Property
- 외부에서 접근이 가능하다.
- Class 외부에서 사용이 가능하고 변경이 가능하다.
- 변수 앞에 #을 안붙인다.
class Info {
// 생성자
constructor(name, age) {
this.name = name;
this.age = age;
this.gender = "남자";
}
//함수들
getName() {
return this.name;
}
}
let info = new Info("덩두", 30);
console.log(info.name); // output : 덩두public은 #을 붙이지 않으면 된다. name이 잘 출력되는 것을 확인할 수 있다.
❓ Class Getter와 Setter
1. getter
- 프로퍼티 값을 가져오기 위한 함수
2. setter
- 프로퍼티 값을 설정하기 위한 함수
class Info {
// 생성자
constructor(name, age) {
this.name = name;
this.age = age;
this.gender = "남자";
}
get name() {
return this.name;
}
set name(newName){
this.name = newName;
}
}
let info = new Info("덩두", 30);
// getter
info.name; // output: 덩두
// setter
info.name = "새로운덩두"
📗 인스턴스(Instance)
- 클래스나 프로토타입을 이용하여 만든 것이다.
- 프로퍼티와 메서드를 상속 받는다
- 클래스로 만든 객체이다.
let info = new Info() 이렇게 만든 변수 info를 인스턴스라고 한다. (클래스로 만든 객체 = 인스턴스)
❓ 인스턴스 생성 방법
- 생성자 함수와 클래스를 활용하여 new 연산자와 더불어서 만든다.
- 클래스 생성자함수로 만들 때는 new 연산자를 활용한다.
class Info {
// 생성자
constructor(name, age){
this.name = name;
this.age = age;
this.gender = "남자";
}
//메서드들
getName() {
return this.name;
}
getGender() {
return this.name
}
}
let info = new Info("덩두", 30);
console.log(info) // output : Info { name: '덩두', age: 30, gender: '남자' }❓ Class에서의 Static(정적) Property, Method
- static(정적)은 변하지 않는다는 것을 뜻한다.
- 따라서, static을 property나 method에 붙이게 된다면, 변하지 않는 값, 변하지 않는 메서드라고 해석이 된다.
1. 정적(static)
- 객체로 접근할 수 없다.
- 클래스명으로만 접근이 가능하다.
- 변수나 메서드 앞에 static을 붙이면 된다.
class Info {
constructor(name, age) {
this.name = name;
this.age = age;
}
static staticName = "STATIC";
getName() {
return this.name;
}
static getStaticName() {
return this.staticName;
}
}2. 정적 프로퍼티(static property)
- 인스턴스가 사용할 수 없는 프로퍼티
인스턴스가 사용할 수 없다는게 무슨 의미냐면 info.property 이렇게 접근하는게 아니라 class로만 접근이 가능한 프로퍼티라는 것이다.
원래는 클래스로 인스턴스를 만들면 인스턴스명.name ex) info.name 이렇게 name에 접근을 했는데 Info.staticName 이렇게 Class로만 접근이 가능하다는 얘기이다. 코드를 보면서 이해를 해보자.
class Info {
constructor(name, age) {
this.name = name;
this.age = age;
}
static staticName = "STATIC";
getName() {
return this.name;
}
static getStaticName() {
return this.staticName;
}
}
let info = new Info("덩두", 27);
console.log(info.staticName); // output : undefinded이렇게 하면 undefined와 함수가 아니라는 오류가 발생한다 하지만 클래스명으로 접근을 하면 static으로 설정한 property와 method들을 출력을 할 수 있다.
class Info {
constructor(name, age) {
this.name = name;
this.age = age;
}
static staticName = "STATIC";
getName() {
return this.name;
}
static getStaticName() {
return this.staticName;
}
}
let info = new Info("덩두", 27);
console.log(Info.staticName); // output : STATIC3. 정적 메소드(static Method)
- 인스턴스가 사용할 수 없는 함수이다.
위에 정적 프로퍼티와 같은 내용이다. 인스턴스.메서드명 ex) info.getStaticName() 이런식으로 접근이 불가능하다는 소리이다.
클래스명.메소드를 해야 접근이 가능하다.
- "prototype"이 아닌 클래스 함수 자체에 메서드를 설정할 수도 있다. 이런 메서드를 정적(static) 메서드라고 부릅니다.
- 어떤 특정한 객체가 아닌 클래스에 속한 함수를 구현하고자 할 때 주로 사용됩니다.
class Info {
constructor(name, age) {
this.name = name;
this.age = age;
}
static staticName = "STATIC";
getName() {
return this.name;
}
static getStaticName() {
return this.staticName;
}
}
let info = new Info("덩두", 27);
console.log(info.getStaticName()); // output : info.getStaticName is not a function클래스로 접근을 한다면 오류가 발생하지 않을 것이다. 한번 코드를 실행해보자.
class Info {
constructor(name, age) {
this.name = name;
this.age = age;
}
static staticName = "STATIC";
getName() {
return this.name;
}
static getStaticName() {
return this.staticName;
}
}
let info = new Info("덩두", 27);
console.log(Info.getStaticName()); // output : STATIC📗 상속(Extends)
- 부모가 자식에게 물려주는 것이다.
- 부모 class가 자식 class에게 물려주는 것이다.
- 자식 class는 부모 class에 있는 메서드들을 사용할 수 있다.
class Parent {
// 생성자
constructor(name, age){
this.name = name;
this.age = age;
this.gender = "남자";
}
//메서드들
getName() {
return this.name;
}
getGender() {
return this.name
}
}
class Child extends Parent {
introduce () {
return `안녕하세요 ${this.name}이고 나이는 ${this.age}세 입니다.`
}
}
let parent = new Parent("덩두", 27);
console.log(parent.introduce()) // output : 안녕하세요 덩두이고 나이는 27세 입니다.이렇게 자식 Class가 부모 Class를 상속받으면 자식Class에서 부모 Class 값이나 메서드들을 사용할 수 있는 super()를 사용할 수 있다.
❓ super 사용
- 부모 CLass의 속성 값을 불러와 초기값을 셋팅한다.
- 부모 Class의 메서드를 불러올 경우 그 메서드를 사용하는 것이다.
class Parent {
// 생성자
constructor(name, age){
this.name = name;
this.age = age;
this.gender = "남자";
this.year = 2023;
}
//메서드들
getName() {
return this.name;
}
getGender() {
return this.name
}
introduce() {
return `안녕하세요 반갑습니다 ${this.name}입니다.`
}
sum() {
return this.age + this.year;
}
}
class Child extends Parent {
constructor(name, age, gender, year, addNum){
super(name, age, gender, year);
this.addNum = addNum
}
introduce () {
return `안녕하세요 ${this.name}이고 나이는 ${this.age}세 입니다.`
}
sum() {
return super.sum() + this.addNum;
}
}
let child = new Child("덩두", 27, 100);
console.log(child.sum()); // 2150super는 쉽게 생각하면 부모 class를 뜻한다고 생각하면 된다. 예를 들면, 위에 코드에서처럼 super.sum()이면 부모 class인 Parent 클래스의 sum 메서드를 가지고 와서 사용하는 것이다.
❓ override
- 부모 class와 자식 class에 똑같은 이름의 메서드가 있을 경우에는 부모class에 있는걸 사용하지 않고 자식 class에 있는 메서드를 뒤집어 쓴다. 이것을 override라고 한다.
class Parent {
// 생성자
constructor(name, age){
this.name = name;
this.age = age;
this.gender = "남자";
}
//메서드들
getName() {
return this.name;
}
getGender() {
return this.name
}
introduce() {
return `안녕하세요 반갑습니다 ${this.name}입니다.`
}
}
class Child extends Parent {
introduce () {
return `안녕하세요 ${this.name}이고 나이는 ${this.age}세 입니다.`
}
}
let parent = new Parent("덩두", 27);
console.log(parent.introduce()) // output : 안녕하세요 덩두이고 나이는 27세 입니다.원래 같으면 안녕하세요 반갑습니다 덩두입니다. 라고 출력이 됬겠지만 상속받은 자식 클래스에 부모클래스에도 있는 동일한 메서드가 있기 때문에 자식 클래스에 있는 introduce 메서드로 return이 된다. 따라서 안녕하세요 덩두이고 나이는 27세 입니다. 가 출력이 된다.
프론트엔드 개발자가 되기 위한 기록