Web - Front end 20. Javascript 사용자 객체 만들기

 Web - Front end 20. Javascript  사용자 객체 만들기



JavaScript에서 제공하는 코어객체 외에 새로운 타입의 객체를 사용자가 만들어 사용할 수 있음

프로토타입(prototype) : 개발자가 선언하는 새로운 객체 타입

3가지 방법으로 사용자 객체 생성 가능




1. new Object()로 객체 생성

'new Object()' 로 프로퍼티가 없는 빈 객체를 만들고 프로퍼티와 메소드를 추가

프로퍼티 추가시 이름과 함께 값을 줘야함


- 객체와 프로퍼티 선언

let account = new Object(); // account 객체 생성
account.owner = "Tom"; // 프로퍼티 owner 생성 및 초기화
account.code = "111"; // 프로퍼티 code 생성 및 초기화
account.balance = 35000; // 프로퍼티 balance 생성 및 초기화


- 프로퍼티 사용

객체["프로퍼티"]  or  객체.프로퍼티

let name = account["owner"]; // name = "Tom"
account["balance"] = 10000; // balance 프로퍼티에 값 10000 저장
account.balance += 20000; // balance 프로퍼티에 + 20000



- 메소드 만들기

메소드 이름과 동일한 이름의 함수 생성

객체의 메소드 이름을 함수 이름으로 초기화 (메소드와 함수 뒤에 ( ) 를 붙이지 않는다.)

function deposit(money) { // 메소드로 사용할 함수 작성
this.balance += money; // 객체(this)의 프로퍼티 balance에 money 더하기
}
account.deposit = deposit; // 메소드 deposit을 함수 deposit으로 초기화

this는 이 객체를 의미하며 this.balance는 이 객체의 balance 프로퍼티를 뜻함. this 없이 balance만 선언했으면 balance를 프로퍼티가 아닌 전역변수나 지역변수로 인식

객체의 맴버변수인 프로퍼티에 접근할 때는 반드시  this. 사용



* 예시 - 'new Object' 키워드를 이용한 은행 계좌 객체 생성 및 사용

<head>
<script>
//함수 정의
function inquiry(){ // 잔액 확인
return this.balance
}
function deposit(money){ // 입금
this.balance += money;
}
function withdraw(money){ // 출금
this.balance -= money;
return money;
}
//객체 생성
let account = new Object();
//프로퍼티 생성
account.owner = "Tom";
account.code = "111-33-7-888";
account.balance = 10000;
//메소드 연결
account.inquiry = inquiry;
account.deposit = deposit;
account.withdraw = withdraw;
</script>
</head>
<body>
<script>
document.write("<h1>계좌정보</h1>");
document.write("<h3>성명 : " + account.owner + "</h3>");
document.write("<h3>계좌번호 : " + account.code + "</h3>");
document.write("<h3>잔액 : " + account.balance + "원</h3>");
// 예금
account.deposit(50000);
document.write("50000원 예금<br>");
// 잔액 확인
document.write("잔액 : " + account.inquiry() + "<br>");
// 인출
account.withdraw(30000)
document.write("30000원 인출<br>");
document.write("잔액 : " + account.inquiry());
</script>
</body>

















2. 리터럴 표기법으로 객체 생성 

중괄호({ })를 이용하여 프로퍼티와 메소드를 한 번에 작성 -> 리터럴 표기법

메소드와 프로퍼티가 블록 안에 모두 만들어지기 때문에 가독성이 높음

'프로퍼티 or 메소드 이름 : 내용' 형식

중괄호 안의 프로퍼티와 메소드들은 콤마(,)로 구분




* 예시 - 리터럴 표기법을 이용한 은행 계좌 객체 생성 및 사용

<head>
<script>
//객체 생성
let account = {
//프로퍼티 생성
owner : "Tom",
code : "111-33-7-888",
balance : 10000,

//메소드 정의
inquiry : function (){ // 잔액 확인
return this.balance
},
deposit : function (money){ // 입금
this.balance += money;
},
withdraw : function (money){ // 출금
this.balance -= money;
return money;
}
};
</script>
</head>
<body>
<script>
document.write("<h1>계좌정보</h1>");
document.write("<h3>성명 : " + account.owner + "</h3>");
document.write("<h3>계좌번호 : " + account.code + "</h3>");
document.write("<h3>잔액 : " + account.balance + "원</h3>");
// 예금
account.deposit(50000);
document.write("50000원 예금<br>");
// 잔액 확인
document.write("잔액 : " + account.inquiry() + "<br>");
// 인출
account.withdraw(30000)
document.write("30000원 인출<br>");
document.write("잔액 : " + account.inquiry());
</script>















3. 프로토타입(class) 개념

C언어나 Java, Python 등의 언어에서 class의 개념이 JavaScript에서는 프로토타입

개발자가 프로토타입을 만들고 new 연산자로 객체를 생성해서 활용 가능

위의 두 방식과는 다르게 동일한 속성의 객체를 여러개 생성할 때 유용


* 프로토타입은 함수로 생성

프로토타입은 함수로 작성해서 함수를 호출하면 해당 객체가 생성됨

프로토타입을 만들 때 사용하는 함수를 생성자 함수(constructor)라고 함

new 키워드로 객체가 생성될 때 호출됨

JavaScript 에서 제공하는 Array, String 등의 객체들도 함수로 만들어져 있음


객체를 생성할 때는 new 키워드와 함께 생성자 함수를 호출하고 매개변수로 프로퍼티들의 값을 지정해 줌



* 예제 - 프로토타입을 이용한 은행 계좌 객체 생성 및 사용

<head>
<script>
// 프로토타입 Account 생성
function Account(owner, code, blance){
this.owner = owner;
this.code = code;
this.balance = balance;
//메소드 정의
this.inquiry = function (){ // 잔액 확인
return this.balance
}
this.deposit = function (money){ // 입금
this.balance += money;
}
this.withdraw = function (money){ // 출금
this.balance -= money;
return money;
}
}
</script>
</head>
<body>
<script>
// 객체 생성
let account = new Account("Tom", "111-33-7-888", 30000);
document.write("<h1>계좌정보</h1>");
document.write("<h3>성명 : " + account.owner + "</h3>");
document.write("<h3>계좌번호 : " + account.code + "</h3>");
document.write("<h3>잔액 : " + account.balance + "원</h3>");
// 예금
account.deposit(30000);
document.write("30000원 예금<br>");
// 잔액 확인
document.write("잔액 : " + account.inquiry() + "<br>");
// 인출
account.withdraw(20000)
document.write("20000원 인출<br>");
document.write("잔액 : " + account.inquiry());
</script>
</body>








댓글

댓글 쓰기

이 블로그의 인기 게시물

Spring Boot 6. 계시판 프로젝트

이미지
 Spring Boot 6. 계시판 프로젝트 1. 프로젝트 구조 1:N 관계 하나의 유저는 여러개의 글을 작성할 수 있음 하나의 글에는 여러 댓글이 달릴 수 있음 3개의 테이블이 서로 참조함(user, board, reply) 2. 프로젝트 생성 - 추가 라이브러리 Spring Boot DevTools, Lombok, Spring Web, Thymeleaf, Spring Data JPA - DB 및 Thymeleaf 설정 build.gradle dependencies 안에 mariadb 드라이버 추가 dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' testImplementation 'org.springframework.boot:spring-boot-starter-test' // 추가 implementation group : 'org.mariadb.jdbc' , name : 'mariadb-java-client' , ...
자세한 내용 보기

Spring Boot 2. Maria 데이터베이스 & Spring Data JPA

이미지
 Spring Boot 2. Maria 데이터베이스 & Spring Data JPA 1. Maria DB 설치와 데이터베이스 생성 1) Maria DB 설치 맥에서는 홈브류를 이용해서 설치 brew install mariadb 2) DB 생성 워크벤치를 이용해서 DB 생성 - 새로운 연결 생성 username : root pw : 1234 - DB 생성 Schemas ->우클릭 create schema.. -> 이름 :bootex, Character set : utf8 -> apply - 사용자 생성 Administration -> Users and Privileges -> Add Account  -> Login Name : bootuser, Limit to Hosts Matching : %(모든 곳에서 접근 가능), pw : bootuser -> Schema Privileges -> Add Entry -> Selected schema -> bootex 선택 -> Select All -> Apply   2. Spring Data JPA 를 이용하는 프로젝트 생성 1) 프로젝트 생성 기존 프로젝트 생성방식과 동일. 단 Dependencies를 선택하는 부분에서 기존에 선택한 라이브러리에서 추가로 SQL 탭의 Spring Data JPA 선택 2) DB를 위한 Spring Boot 설정 Spring Boot에서는 특정한 라이브러리가 있다면 관련된 설정들을 자동으로 추가해줌 그러나 지금 상태에서 실행을 하면 에러가 발생하는데 이는 Spring Data JPA 라이브러리가 추가되면서 자동으로 이에 관련된 설정도 추가되었지만 구체적인 값이 지정되지 않았기 때문 -> 두 가지 설정 필요 - Maria DB를 위한 JDBC 드라이버 https://mvnrepository.com/artifact/org.mariadb.jdbc  접속 -> 1. MariaDB J...
자세한 내용 보기

Django 10. DB 연동

이미지
 Django 10. DB 연동 1. 테이블 생성 settings.py 파일의 DATABASE 딕셔너리에 DB 관련 정보 작성 기본적으로 SQLite로 되어있고 다른 DB를 사용할 수도 있음 models.py 파일에 클래스를 이용해서 모델 생성 models.Model 을 상속받아서 작성 클래스 명은 테이블 명으로 작성 멤버 변수로 테이블의 컬럼 지정 models.[데이터 타입](옵션) * 데이터 타입  integer, char, boolean, date, decimal(float), text, file 등 * 옵션 null, blank, choice, default, primary_key, unique 등 PK 컬럼은 따로 지정하지 않으면 자동으로 생성됨 * 예시 class Question ( models . Model ): question_text = models.CharField( max_length = 200 ) pub_date = models.DateField( "date published" ) class Choice ( models . Model ): question = models.ForeignKey(Question, on_delete = models. CASCADE ) choice_text = models.CharField( max_length = 200 ) votes = models.IntegerField( default = 0 ) python3 manage.py makemigrations : magrations 폴더 안에 마이그래이션 파일(py) 생성 python3 manage.py migrate : 마이그래이션 파일을 DB에 적용해서 테이블 생성 * 데이터 표시 테이블의 해당 컬럼에 대한 정보를 지정하려면 모델 클래스에 __str__ 맴버함수를 정의해소 표시할 문자열을 반환 * 예시 class Question ( models . Model ): question_text...
자세한 내용 보기