Class / Javascript

summerlee·2022년 9월 29일
0

TIL

목록 보기
28/39
  • 조금 더 연관있는 데이터를 한데 묶어놓는 컨테이너 같은 것
  • class 안에 (fields or methods) 종합적으로 묶여있는 구조!
  • 관련있는 변수나 함수를 묶어놓는 것
class Person {
  name;  // 프로퍼티 (속성 - field)
  age;  // 프로퍼티 (속성 - field)
  speak();  // function (행동 - 메서드) 
}

class

  • 붕어빵의 틀 같은 것
  • class 자체에는 데이터가 들어있지 않고 틀, 템플릿만 정의해 놓는 것

object

  • 앙금 들어간 붕어빵 같은 것 ㅋ.ㅋ
  • class 를 이용해서 실제로 데이터를 넣어서 만드는 것

class 사용법

class Person {
  // constructor (생성자)
  constructor(name, age) {
    // fields
    this.name = name;
    this.age = age;
  }
  
  // methods
  speak() {
  	console.log(`${this.name}: hello!`);
  }
}
  1. class 키워드를 이용해서 person 이라는 키워드를 생성
  2. 생성자를 이용해서 object 를 만들 때 필요한 데이터 전달
  3. 전달받은 데이터를 class 에 존재하는 두가지 fields(name, age) 에 할당해준다.
  4. class 에는 name 과 age 라는 fields 가 존재하고, speak 이라는 메서드도 존재.

Object 생성

  • 위의 잘 정의한 class 를 통해 object 를 생성해보자!
const jack = new Person('jack', 20);

console.log(jack.name);  // jack
console.log(jack.age);  // 20
jack.speak();  		// jack: hello!

Getter and Setters

class User {
	constructor (firstName, lastName, age) {
    	this.firstName = firstName;
      	this.lastName = lastName;
      	this.age = age;
    }
  	
  	// get 키워드를 이용해서 값을 리턴
    get age() {
    	return this.age2; // call stack 에러 방지를 위해 게터&세터 안에서 쓰여지는 변수 이름을 조금 다른걸로 만들어줘야 함.
    } // 사용자가 get age 를 호출하게 되면 우리는 바로 this age2 를 리턴해야되고,
  
  	
   // set 키워드를 이용해서 값을 설정, set은 값을 설정해야 하기 때문에 value 를 받아와야함!
  	set age(value) {
      	if (value < 0) {
        	throw Error('age can not be negative!');
        }
    	this.age2 = value;
    } // 새로운 value 를 받으면 우리가 this age2 를 value 로 설정하게 된다.
  
}

  
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
// 사용자가 실수로 age를 -1 로 지정해버렸다.
// 이는 객체지향적인 개념으로 봤을 때 말이 안됨...어떻게 사람 나이가 -1?
// 이렇게 class를 사용하는 사용자가 잘못 사용해도 조금 더 방어적인 자세로 만들 수 있도록 해주는 것이 바로 Getter and Setters!

⬆️ 이러한 경우 getter 와 setter 를 통해 문제를 해결할 수 있다!
profile
완벽하지 않아도 기록하려고 노력하기 😅

0개의 댓글