[코드팩토리] 클래스 기본기 (Class basics)
정의
사전적 정의
클래스는 객체지향 프로그래밍에서 특정 객체(인스턴스)를 생성하기 위한 변수와 메소드(함수)를 정의하는 일종의 틀이다.
코드팩토리 정의
정보를 일반화해서 정리하는 방법이다.
상세설명
예를 들어 아이브 멤버들의 이름으로 안유진, 가을, 레이, 장원영, 리즈, 이서라는 것을 알고 있다.
그리고 출생년도가 각각 2003, 2002, 2004, 2004, 2004, 2007년이라는 것을 알고 있다.
이것을 보면 우리는 두 개의 데이터를 알 수 있는 것이다. 사람의 이름과 출생년도.
이 이름과 출생년도라고 카테고리를 만든 것이 클래스가 된다.
그리고 안유진, 2003년 출생이라는 두 개의 클래스가 모여서 실제 사람 안유진을 만들어내게 되는데 이렇게 클래스가 모여서 만들어낸 것을 객체(인스턴스)라고 한다.
이렇게 클래스를 모아서 객체를 만드는 것을 인스턴스화 한다고 말한다.
클래스 선언과 인스턴스화
클래스 선언
| 기본형 : class 클래스명{ 변수명1; 변수명2; } |
위와 같은 기본형으로 사용하는데 각각의 변수에는 변수명만 쓰는 것이 아니라 변수명1 = '장원영'; 변수명2='2004'; 처럼 기본값도 지정할 수 있다.
그리고 클래스명은 camelCase가 아니라 첫 글자는 무조건 대문자로 쓰는 것이 개발자들의 암묵적인 네이밍룰이다.
// 기본형
class IdolModel {
name;
year;
}
// 기본값 지정
class IdolModel {
name = '장원영';
year = 2004;
}위처럼 기본형을 사용해서 클래스를 선언했고, 내부에 변수를 규칙적인 데이터의 그룹(카테고리)을 name과 year로 설정해서 클래스를 IdolModel이라는 완성했다.
그러면 이것을 이제 인스턴스화, 즉 실제 사람의 데이터인 객체로 만드는 작업을 해야 한다.
인스턴스화
| 기본형 : const 변수명 = new 클래스명 |
class IdolModel {
name = '장원영';
year = 2004;
}
const wonYoung = new IdolModel();
console.log(wonYoung);IdolModel이라는 클래스를 선언하고 변수로 name과 year를 넣고 각각 기본값도 지정하였다.
그리고 cosnt로 wonYoung이라는 변수를 생성한 뒤 new IdolModel()이라는 키워드와 클래스명을 넣어 wonYoung의 값은 IdolModel이라는 클래스에 포함된 변수와 기본값들이 객체 타입으로 들어가게 설정하였다.
그런데 위에서 사람은 장원영 1명이 아니었고 6명이었고 출생년도도 각각 달랐다. 이 모든 사람을 인스턴스화 하려면 class 선언도 다른 사람으로 또 만들고 const 변수명 = new 클래스명(); 이 작업을 6번이나 반복해줘야 하는 번거로움이 생긴다.
하나의 인스턴스만 생성할 것이 아니기에 기본값을 먼저 모두 지운다.
그 다음 constructor(생성자)를 클래스 안에다가 정의한다.
그 다음 constructor의 파라미터로 클래스 내부에서 사용한 변수를 그대로 담는다.
그 다음 constructor 다음 {} 중괄호를 열고 this를 사용한다. 그런데 this는 해당 변수에서의 값만 유효하게 불러오는데, 아래의 예시를 보면 우리는 기본값을 생성했기 때문에 받아올 값이 없다. 이 부분부터는 예시 코드를 보고 다시 설명하겠다.
class IdolModel {
name;
year;
constructor(name, year){
this.name = name;
this.year = year;
}
}
const wonYoung = new IdolModel();
console.log(wonYoung);
위 코드는 IdolModel 이라는 클래스를 선언하고 변수로 name;과 year;를 지정했다.
그리고 이 클래스 내에서 cunstructor를 사용하고 파라미터로 name과 year를 받았다. 이 파라미터는 내 마음대로 정한다기 보다 해당 클래스에서 사용한 변수명을 그대로 사용해주는 것이 좋다.
그리고 중괄호를 열고 this.name = name;과 같이 year도 작성했다.
this는 이 코드 내부에서의 값을 받아온다는 이야기인데 this.name이라고 해봤자 아까 기본값을 삭제했기 때문에 값이 없는 상태에서 name만 남게 된다. 그런데 그 this.name = name;으로 지정하라고 다시 코드를 작성했다.
this.name 다음에 나오는 name;은 이 코드 내부에서의 name값이 아니라 외부에서 인자로 받아오는 name 값을 의미한다.
그렇게 wonYoung이라는 변수를 새로 생성하고 new IdolModel();을 사용하여 wonYoung이라는 객체를 만들 준비를 한다.
그리고 콘솔에 wonYoung을 출력해보면 위와 같이 name: undefined라고 출력된다.
앞의 name은 this.name에서 기본값 없이 받아온 name, 즉 변수명 그 자체이고, 뒤의 undefined는 뒤의 name값이다. 외부에서 아규먼트 인자로 받아오는 값인데 아직 할당해준 값이 없으니 위와 같이 undefined로 출력되는 것이다.
이렇게 constructor에서 설정한 this.name = name;과 this.year = year; 이 두 개의 값이 하나의 객체로 인스턴스화 되었음을 확인할 수 있다.
따라서 이제는 new IdolModel();이라고 인스턴스화 하는 과정에서 해당 파라미터에 name값과 year값을 넣어주면 해당 위치에 반환되어 출력된다.
const wonYoung = new IdolModel('장원영', 2004);
console.log(wonYoung);그러면 이제 const를 통한 인스턴스화를 계속 반복해주면 모든 멤버의 객체가 생성되게 된다.
클래스 선언을 해놓았기 때문에 가능한 일이다.
const wonYoung = new IdolModel('장원영', 2004);
const yuJin = new IdolModel('안유진', 2003);
const ray = new IdolModel('레이', 2004);
const gaEul = new IdolModel('가을', 2002);
const liz = new IdolModel('리즈', 2004);
const eSeo = new IdolModel('이서', 2007);
console.log(wonYoung);
console.log(eSeo);
console.log(ray);
console.log(gaEul);
console.log(liz);
console.log(yuJin);오브젝트(객체)의 값 가져오기
그렇다면 위 처럼 객체 형태로 값을 생성하는 것이라면 오브젝트 타입의 값을 가져오는 형태로 값을 가져올 수 있는지 알아본다. 결론부터 말하자면 가능하다.
console.log(wonYoung.name);
console.log(wonYoung.year);클래스 내에 메서드 삽입하기
메서드란 클래스 또는 함수 내에서 사용되는 함수를 말한다.
만약 위의 클래스에서 원래대로 함수를 넣는다고 하면
class IdolModel {
name;
year;
constructor(name, year){
this.name = name;
this.year = year;
}
function(sayHello){
return `안녕하세요, 저는 장원영입니다.`;
}
}위와 같이 function(함수명){실행할 함수}와 같은 형태로 넣어야 하는 것이 맞는데, 클래스 내에서는 function을 생략하고 바로 함수명만 적는다.
class IdolModel {
name;
year;
constructor(name, year){
this.name = name;
this.year = year;
}
sayHello(){
return `안녕하세요, 저는 장원영입니다.`;
}
}
console.log(wonYoung.sayHello());
그런데 문제가 하나 있다.
console.log(wonYoung.sayHello());
console.log(yuJin.sayHello());
애초에 sayHello()라는 함수의 값으로 `안녕하세요, 저는 장원영입니다.`;라는 템플릿 리터럴을 return하도록 설정하였기 때문에 객체를 yuJin으로 바꿔도 똑같은 텍스트가 출력된다.
모든 멤버에 맞게 바꾸려면 장원영이라는 부분을 ${this.name}으로 바꾸면 된다. 그러면 역시 이 this는 sayHello()라는 함수에 귀속되어 그 함수를 실행한 객체 안에 있는 name이라는 key의 value를 찾아 반환한다.
class IdolModel {
name;
year;
constructor(name, year){
this.name = name;
this.year = year;
}
sayHello(){
return `안녕하세요, 저는 ${this.name}입니다.`;
}
}
console.log(wonYoung.sayHello());
console.log(yuJin.sayHello());클래스와 클래스로 생성한 인스턴스의 타입
console.log(typeof IdolModel); // function. 클래스는 함수.
console.log(typeof wonYoung); // function. 클래스로 생성한 인스턴스(객체)는 오브젝트.
추가학습. 용어정리 : 객체와 프로퍼티
const wonYoung = { // wonYoung은 객체(object)
name: '장원영', // name, year는 프로퍼티. 객체의 프로퍼티는 key : value를 쌍으로 갖는다.
year: '2004' // '장원영', '2004'는 프로퍼티에 할당된 값.
};추가학습. 객체의 프로퍼티를 추출하는 방법. 점 표기법과 괄호 표기법
const wonYoung = {
name: '장원영',
year: '2004'
};
// 점 표기법 (dot notation)
console.log(wonYoung.name); // '장원영'
console.log(wonYoung.year); // 2004
// 괄호 표기법 (bracket notation)
console.log(wonYoung['name']); // '장원영'
console.log(wonYoung['year']); // 2004
개발팁
class IdolModel {
name;
year;
constructor(name, year){
this.name = name;
this.year = year;
}
}
class IdolModel {
// name;
// year;
constructor(name, year){
this.name = name;
this.year = year;
}
}위 두 개는 모두 같은 식이다. 둘 다 같은 결과를 출력한다.이유는 this 메서드가 사용되면 클래스 내에서 변수를 생략해도 되는, 다른 언어에서는 보이지 않는 자바스크립트의 특이한 성격 때문이다.
하지만 오히려 없애는 것이 더 명확하지 않고 가독성을 해치는 것이니 베이직하게 모두 위의 코드처럼 작성하는 것을 권장한다.
'Programing > JavaScript' 카테고리의 다른 글
| [모던JS] 002. [소개] 매뉴얼과 명세서 (0) | 2024.03.25 |
|---|---|
| [모던JS] 001. [소개] 자바스크립트란? (1) | 2024.03.23 |
| [코드팩토리] try...catch (0) | 2024.03.05 |
| [코드팩토리] 값 레퍼런스 복사 (Copy by value and reference) (1) | 2024.03.05 |
| [코드팩토리] 객체 기본 (Object basics) (0) | 2024.03.05 |
댓글