[새싹 프론트엔드] JS class 실습 - 20221109
클래스는 객체 만들어주는 틀! 생성자 함수와 유사하다. ES6에 추가된 개념!
아마 생성자함수의 단점을 보완하고 업그레이드 시켜 좀 더 사용하기 편하고 최적화 됐겠지?
객체는 두가지로 구성되어있다.
1. 프로퍼티 (개체 고유 속성)
2. 메소드 (함수)
프로퍼티는 간단히 말해 변수같은 것, 객체 내 "key(키)" : "value(값)" 의 형태로 값을 담고 있는 것을 프로퍼티라 하고, 함수를 메소드라 한다. 용어를 잘 알자! 그래야 추후 설명을 보아도 헷갈리지 않는다.
객체 생성자
< 1번 문제 >
< 나의 코드 >
<script>
// 클래스
class Product {
constructor(code, ea) {
this.code = code;
this.ea = ea;
}
// 클래스 내 함수
display() {
alert("상품코드 : " + this.code + "\n재고수량 : " + this.ea);
let add = parseInt(prompt("추가수량을 입력하세요", 500));
document.write(
"상품코드 : " + this.code + "<br>재고수량 : " + (this.ea + add)
);
}
}
//클래스를 이용한 객체 생성
let product1 = new Product(
prompt("상품 코드를 입력하세요", "a0001"),
parseInt(prompt("재고수량을 입력하세요", 200))
);
// 객체 함수 실행
product1.display();
</script>
alert() 함수를 잘 몰라 가장 어렵게 느껴졌던 문제다.
이상하게 alert 함수엔 백틱 내 br태그가 먹히질 않아 br태그 대신 이스케이프 문자로 개행문자를 삽입했다.
-> 구글링을 해보니 alert 함수에서 개행 문제로 고민을 한 사람이 많았던 것 같다.
-> alert 함수에서 백틱을 사용하면 br태그를 넣지 않고도 실제로 행변경을 하면 그대로 적용이 된다고 한다.
< 2번 문제 >
< 나의 코드 >
<script>
class Account {
constructor(acountNo, ownerName, balance) {
this.acountNo = acountNo;
this.ownerName = ownerName;
this.balance = balance;
}
// 입금하기
set deposit(deposit) {
this.balance += deposit;
}
// 출금하기
set withdraw(withdraw) {
this.balance -= withdraw;
}
// 출력 문장
displayAccount() {
document.write(`
계좌번호 : ${this.acountNo} <br>
예금주 이름 : ${this.ownerName} <br>
잔액 : ${this.balance} <br>
<hr>
`);
}
}
let obj0 = new Account("111-222-33333", "정수아", 150000000);
let obj1 = new Account("111-222-33333", "노은기", 150000000);
let obj2 = new Account("555-666-77777", "서동교", 150000000);
let obj3 = new Account("111-888-99999", "이성현", 150000000);
let obj4 = new Account("123-456-88888", "정민희", 150000000);
// 모두 부자되세용 ~ :D
obj0.deposit = 1000000000;
obj1.deposit = 100000000;
obj1.deposit = 80000000;
obj3.deposit = 5000000;
obj4.withdraw = 100;
obj4.deposit = 100000000;
// 돈 세자릿수 콤마는 어떻게?!
obj0.displayAccount();
obj1.displayAccount();
obj2.displayAccount();
obj3.displayAccount();
obj4.displayAccount();
</script>제일 신나서 작성한 코드였다.
입력 값을 받고 함수로 document.write() 으로 브라우저에 나타내는 것이 그동안 자주 해온 방식이라 너무나 문제가 쉽게 읽혀 바로 시도했다.
그래도 함수짜는건 조금 해봤다고 나 함수 만들어주세요~! 하는 내용들이 몇개 보여서 신나서 만들고 조원들에게 입금해줬다.
< 오늘의 발견 ,, >
set이 들어간 함수는 화살표 함수가 되지 않았다.
< 3번 문제 >
< 나의 코드 >
<script>
// 클래스 이름 미리 정해주셔서 감사해요! 이름 고민 너무나 고통,,😂 <- 와우 이런 이모지도 들어가는구나
class FourCal {
constructor(num1, num2) {
this.num1 = num1;
this.num2 = num2;
}
add () {
document.write("두 수를 더한 값 : " + this.num1 + this.num2);
}
sub () {
document.write("<br>두 수를 뺀 값 : " + (this.num1 - this.num2));
}
mul () {
document.write("<br>두 수를 곱한 값 : " + this.num1 * this.num2);
}
div () {
document.write("<br>두 수를 나눈 값 : " + this.num1 / this.num2);
}
}
// 만약 숫자 아닌 것을 입력하면? 그럼 input을 다른 변수에 받고 그 변수에 조건문을 달고 -> 조건 통과 시에 여기로 넘어오는 걸로 해야겠지?
let nums = new FourCal(
parseInt(prompt("첫번째 숫자를 입력하세요")),
parseInt(prompt("두 번째 숫자를 입력하세요"))
);
nums.add();
nums.sub();
nums.mul();
nums.div();
</script>** 클래스생성자 내에 함수를 쓸 땐 화살표 함수 보다는 일반함수를 쓰는 것이 좋다고 한다. 그래서 수정했다.
** 다시 보니 <br> 태그는 출력문 뒤에 넣는 것으로 통일 시키는 것이 보기 좋겠단 생각이 든다.
< 4번 문제 >
< 나의 코드 >
<script>
class Die {
constructor(num) {
this.num = num;
}
// 생성자메소드가뭐지 = () => (num = 1);
roll = () => (num = parseInt(Math.random() * 6) + 1);
display = () => document.write(`현재 주사위의 상태는 : ${this.num}`);
}
let 이게생성잔가요 = new Die(1);
이게생성잔가요.display();
</script>ㅋㅋㅋㅋ,,,,, 문제에 있는 메소드 칸의 생성자 메소드가 뭔지 혼동이 돼서 여기저기 고민한 흔적을 남겼다...
구글링을 해보는데도 명확히 알고 적용하기 어려울 것 같아 대충 내가 이해한 대로 일단 제출하고 생성자 메서드에 대해 찾아 노션에 우선 정리중이다. 추후 내용 추가하겠다.
메서드란?
생성자란?
생성자 메서드란?
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅