<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#" type="image/x-icon">
<title>객체</title>
</head>
<body>
<h1>객체 참조 변수</h1>
- 객체의 주소를 담은 변수
<script type="text/javascript">
//원시타입:값
//num1, num2 변수 => 값을 가리킨다(call by value)
let num1 = 100;
let num2 = num1;
console.log(num1 ==num2);
num2 = 200;
console.log(num1 == num2);
//원시타입 외의 자료형 : 객체
//arr1, arr2 ==> 참조변수(주소를 가리키는 변수)(call by referense)
const arr1 = [1,2,3];
const arr2 = arr1;
console.log(arr1 ==arr2);
arr2[1] = 4;
console.log(arr1, arr2);
</script>
<h1>객체</h1>
- 메모리에 등록된 데이터(자료구조, 함수, 메서드) <br>
- 객체는 속성과 메서드를 가지고 있다. <br>
- 생성된 객체를 대입한 변수는 참조 변수라고 하며, 객체의 주소값을
가지고 있다.<br>
- 프로퍼티 : 객체의 상태를 나타는 값<br>
- 메소드 : 프로퍼티를 참조하고 조작(값을 변경)할 수 있는 기능(동작)<br>
<h2>객체 선언</h2>
<script type="text/javascript">
//객체 생성 1
const obj1 ={};
//객체 생성 2
const obj2 = new Object();
console.log(obj1, obj2);
// 객체 생성 및 속성, 메소드
// 키 : 값
//식별자(키) 유의사항
/*
숫자 x, -(대쉬바)x,_(언더스코어)x
키: 카멜표기법
영어는 문자열로 인식한다.
*/
const obj3 = {
num : 1,
arr : [1,2,3],
obj : {
arr : [4,5,6]
},
getNum : function () {
return this.num;
},
setNum : function(number) {
this.num = number;
}
}
console.log(obj3);
</script>
<h2>객체 속성이나 메서드 접근(실행)</h2>
- 속성에 접근하였다면 값을 가지고 오거나 대입 할 수 있다. <br>
- 메서드는 실행 할 수 있다. <br>
<script type="text/javascript">
const obj4 = {
num : 1,
arr : [1,2,3],
'member-name' : '홍길동',
'47' : '한국스마트정보원 47기입니다',
obj : {
arr : [4,5,6]
},
getNum : function () {
console.log(this.num);
return this.num;
},
setNum : function(number) {
this.num = number;
console.log(this.num);
}
}
obj4.num = 4;
//속성 동적 추가
obj4.str = '가'
console.log(obj4);
//속성접근 .(도트연산자)
console.log(obj4.num);
//속성접근 객체참조변수['키']
console.log(obj4['47']);
console.log(obj4['member-name']);
obj4.getNum();
obj4.setNum(5);
obj4.getNum();
</script>
<h2>체이닝 기법</h2>
- 도트 연산자를 활용하여 객체 멤버에 접근하는 방법 <br>
- 마지막에 호출된 메서드나 속성이 객체라면 도트 연산자를 활용하여
마지막 도달된 객체 멤버에 접근 할 수 있다. <br>
<script type="text/javascript">
//bookObj.getstoreName();
let test
const bookObj = {
storeName : '한국스마트서점',
bookNameArr : [
'이것이 자바다',
'10분 sql',
'토비의 스프링',
'클린코드',
'이펙티브 자바',
'자바스크립트 딥다이브'
],
bookInfoArr : [
{bookName : '이것이 자바다', price : 30000},
{bookName : '10분 sql', price : 20000},
{bookName : '토비의 스프링', price : 60000},
{bookName : '클린코드', price : 30000},
{bookName : '이펙티브 자바', price : 30000},
{bookName : '자바스크립트 딥다이브', price : 45000}
]//array안에 객체가 있음
}
// 실습 1. 한국스마트서점에 이펙티브 자바 책이 존재하면
// '이펙티브 자바 책이 있습니다.' 존재하지 않으면 '책이 없습니다.'라고
// 콘솔에 출력하시오.
let findBookName = '이펙티브 자바';
//findBookName = '자바의 정석';
let isExist = false;
const bookNameArr = bookObj.bookNameArr;
for(let bookName of bookNameArr){
if(findBookName == bookName) {
isExist = true;
break;
}
}
if(isExist){
console.log(`${findBookName} 책이 있습니다.`);
}else{
console.log(`${findBookName} 책이 없습니다.`);
}
//findBookName = '자바의 정석';
// 실습2. 서점에서 이것이 자바다, 이펙티브 자바를 구입했다.
// 얼마를 지불해야하는지 콘솔에 출력하시오.
let barCode1 = '이것이 자바다';
let barCode2 = '이펙티브 자바';
const purchaseList = [];
let priceTotal = 0;
bookObj.bookInfoArr.barCode1 =
console.log(`지불하실 총 금액은 ${priceTotal}원 입니다.`);
const bookInfoArr = bookObj.bookInfoArr;
for(let bookInfo of bookInfoArr){
if(barCode1 == bookInfo.bookName) {
purchaselist.push(bookinfo);
}
if(barCode2 == bookInfo.bookName){
purchaselist.push(bookInfo);
}
}
const bookInfo1 = bookInfoArr[0];
console.log(bookInfo1);
console.log('bookName' in bookInfo1, 'in 연산자');
//반복문 for in 객체 순회
for(let key in bookInfo1){
//console.log(typeof key, 'for in 시 key 타입여부');
//console.log(bookInfo1.key);
//console.log(bookInfo1[key]);
if(key == 'price') pricetotal += bookInfo1[key];
}
//실습3 purchaseList안에 있는 객체를 활용하여 priceTotal의 값을 구하시오.
for(const goods of purchaseList){
//1
priceTotal += goods.price;
//2
/* for in 활용
for(let key in goods){
if(key=='price') priceTotal += goods[key]
*/
}
</script>
<h1>객체 this</h1>
<h2>this</h2>
- this -> 객체 자신
<script type="text/javascript">
const ks47student = {
course : '한국스마트정보교육원47기',
member :[],
joinMember(name){
this.member.push(name);
return this;
}
}
ks47student.joinMember('김상원')
.joinMember('이동훈')
.joinMember('이다야')
.joinMember('박지성')
.joinMember('송지연')
.joinMember('임민호')
console.log(ks47student.member);
const obj5 = {
name : '',
getName : function() {
return this.name;
},
setName : function(name) {
this.name = name;
}
}
obj5.setName('홍길동');
console.log(obj5.getName());
</script>
</body>
</html>
==============================================================================
객체실습
<h1>객체 실습</h1>
<h2>실습1</h2>
실습. myObj의 addArr메서드를 3번 실행시켰더니
myObj의 arr 속성 배열에 '홍길동', '유관순', '이순신' 이라는 문자열이
차례대로 담겼다. 위의 문구처럼 문자열이 담길 수 있도록 메서드 내의 코드를 완성하시오.
<script type="text/javascript">
const myObj = {
arr:[],
addArr(name){
this.arr.push(name); //객체를 바라볼수 있게
return this;
}
}
myObj.addArr('홍길동');
myObj.addArr('유관순');
myObj.addArr('이순신');
console.log(myObj.arr);
<h2>실습2</h2>
실습. 자동차 주행시 주행내역과 총주행 거리를 구하시오. <br>
위 문구대로 실행될 수 있도록 코드를 완성하고 결괏값을 출력하시오.
<script type="text/javascript">
const car = {
color : 'red',
model : 'K5',
moveHistory : [],
totalMove : 0,
move(km) {
console.log(`${km}km 주행하였습니다.`);
this.moveHistory.push(km);
this.totalMove += km;
return this;
},
getTotalMove(){
return this.totalMove
}
}
car.move(50).move(100).move(70);
console.log(`주행내역: ${car.moveHistory}`);
console.log(`총 주행거리: ${car.getTotalMove()}km`);
</script>
실습3은 못풀었음... 이거 답 디스코드에서 사람들한테 물어봐 코딩 아래꺼 엉터리임
<h2>실습3</h2>
실습. nObj의 getAvg메서드를 호출 하였더니 nObj의 nArr 배열 속성 요소의
평균값이 리턴되었다. 위 문구대로 실행될 수 있도록 코드를 완성하고 결괏값을 출력하시오.
<script type="text/javascript">
const nObj = {
nArr : [10,20,30,40,50],
getAvg(){
let total = 0;
for(let digit of this.nArr){
total += digit;
}
return total;
}
}
console.log(nObj.getAvg(`${total}/${[nArr.length]}`));
</script>
실습4은 못풀었음... 이거 답 디스코드에서 사람들한테 물어봐 코딩 아래꺼 엉터리임
<h3>실습4</h3>
실습. getMaxScoreStudent 메서드 호출 시 최고의 점수를 받은 학생의 명을 리턴하고
그 결괏값을 출력하도록 하시오.
<script type="text/javascript">
const studentObj = {
score : [
{studentName : '홍길동', score : 30},
{studentName : '이순신', score : 60},
{studentName : '유관순', score : 80},
{studentName : '고길동', score : 70},
{studentName : '홍길순', score : 80}
],
getMaxScoreStudent(){
let maxScore = this.score[0].score;
for(let i=1; i<this.score.length; i++){
let targetScore = this.score[i].score;
if(maxScore < targetScore) maxScore = targetScore;
}
let isFirst = true;
let result
for(const studentInfo of this.score){
if(studentInfo.score == maxScore){
if(isFirst){
result += studentInfo.studentName;
isFirst = false;
}else {
result +=`, ${studentInfo.studentName}`;
}
}
}
}
}
console.log(studentObj.getMaxScoreStudent());
</script>
'나혼자공부시간(평일저녁,주말,휴일때)' 카테고리의 다른 글
| 열흘만에 노드js 격파 - 이중인자 const add =x =>y => x+y; / filter/map/Promise/async/await/파일리스트 출력하는법 (0) | 2023.08.19 |
|---|---|
| 자바스크립트:함수 정의문: 호이스팅 (0) | 2023.04.04 |
| 자바초보(별모양 트리만들기:이중반복문:Nested loops) (0) | 2023.03.29 |
| 인터페이스 메소드 (0) | 2023.03.25 |
| 메소드 호출,선언:개념 제대로 알고 가기/지역변수,전역변수,정적변수 차이점 (0) | 2023.03.20 |
