멋쟁이v의 개발일지

[Javascript] 객체 본문

0년차/Javascript

[Javascript] 객체

멋쟁이v 2023. 4. 29. 15:39
728x90
320x100
📕

[목차]

01. 객체란?

💡
객체 또는 오브젝트는 클래스에서 정의한 것을 토대로 메모리에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료구조, 함수, 또는 메소드가 될 수 있습니다.
  • 특징

    ➡️ 메모리에 등록된 데이터(함수, 메소드, 자료구조)

    ➡️ 객체는 속성과 기능을 가지고 있다.

    ➡️ 객체를 대입하는 변수는 메모리에 올라간 객체의 주소를 참조하고 있다.

    ➡️ 객체를 대입하는 변수는 참조변수라고 한다.

02. 참조변수

💡
메모리에 등록된 객체의 주소값을 참조하는 변수(기본형X)
  • [코드예제] 객체 참조 변수
    // 원시타입 : 값
// 서로 다른 곳을 가르킨다.
// 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 reference)
const arr1 = [1, 2, 3];
const arr2 = arr1;
console.log(arr1 == arr2);
arr2[1] = 4;
console.log(arr1, arr2);

03. 객체 선언

💡
객체 생성 방법 1️⃣ const obj = {}; 2️⃣ const obj = new Object();
  • 객체 선언 방법

    ➡️ {}의 기호로 객체를 선언 할 수 있다.

    ➡️ 객체는 키와 값으로 이루어져 있다.

    ➡️ 값에는 모든 데이터타입(객체, 함수 포함)을 담을 수 있다.

    ➡️ 키는 객체에 담긴 값의 주소이다.

    ➡️ 키는 주로 문자열로 지정을 한다.

    ➡️ 값에 지정된 함수를 메소드라고 한다.

  • [코드예제] 객체 선언
    // 키 : 값
// 식별자(키) 선언시 유의사항
/**
 * 숫자 x, -(대시바) x, _(언더바) x
 * 키 : 카멜표기법
 * 영어는 문자열로 인식
 */

const obj3 = {
    num : 1,
    arr : [1,2,3],
    'member-name' : '홍길동', // 키에 대시바를 넣으면 ''로 감싼다.
    47 : '한국스마트정보교육원47기', // 키에 숫자는 숫자로 취급 안한다.
    obj : {
        arr : [4,5,6]
    },
    getNum : function(){
        return this.num;
    },
    setNum : function(number){
        this.num = number;
    }
};
console.log(obj3);

04. 객체 활용

💡
1️⃣ 객체를 선언하고 그 객체의 속성 접근 및 메소드 실행을 할 수 있다.

2️⃣ this. : 객체의 메소드 내부에서 나 자신의 객체를 가리킬 때

3️⃣ 체이닝기법 : .(도트연산자)을 찍어 그 당시의 객체의 속성이나 메소드를 활용하는 방법

  • [코드예제] 객체 속성, 메서드 접근
    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();

  • [코드예제] this
    const obj5 = {
    name : '',
    getName : function() {
        return this.name;
    },
    setName : function(name){
        this.name = name;
    }
}
obj5.setName('홍길동');
console.log(obj5.getName()); // 홍길동

  • [코드예제] 체이닝기법
    const obj6 = {
    num : 1,
    arr : [1,2,3],
    'member-name' : '홍길동',
    47 : '한국스마트정보교육원47기',
    obj : {
        arr : [4,5,{
            name : '홍길동'
        }]
    },
    getNum : function(){
        console.log(this.num);
        return this.num;
    },
    setNum : function(number){
        this.num = number;
        console.log(this.num);
    }
};

let testName = obj6.obj.arr[2].name;
console.log(testName); // 홍길동

05. 객체 실습

  • [코드예제] 객체 실습1
    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}
    ]
}
// 실습 1. 한국스마트서점에 이펙티브 자바 책이 존재하면 
// '이펙티브 자바 책이 있습니다.' 존재하지 않으면 '책이 없습니다.'라고 
// 콘솔에 출력하시오.
let findBookName = '이펙티브 자바';
// let findBookName = '자바의 정석';

// 내가 한 방법
let bookPrint = '';
for(let i = 0; i < bookObj.bookNameArr.length; i++) {
    if(bookObj.bookNameArr[i] == findBookName) {
        bookPrint += `${findBookName} 책이 있습니다.`;
    }
}
if(bookPrint == '') {
    bookPrint += `${findBookName} 책이 없습니다.`;
}
console.log(bookPrint);

// 선생님이 한 방법
const bookNameArr = bookObj.bookNameArr;
let isExisit = false;
for(let bookName of bookNameArr) {
    if (bookName == findBookName) {
        isExisit = true;
        break;
    }
}
if(isExisit) {
    console.log(`${findBookName} 책이 있습니다.`);
} else{
    console.log(`${findBookName} 책이 없습니다.`);
}

  • [코드예제] 객체 실습2
    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}
    ]
}

// 실습2. 서점에서 이것이 자바다, 이펙티브 자바를 구입했다. 
//        얼마를 지불해야하는지 콘솔에 출력하시오.
let barCode1 = '이것이 자바다';
let barCode2 = '이펙티브 자바';

const purchaseList1 = [];
let priceTotal1 = 0;

// 내가 한 방법
for(let i = 0; i < bookObj.bookInfoArr.length; i++){
    if(bookObj.bookInfoArr[i].bookName == barCode1) {
        purchaseList1.push(barCode1);
        priceTotal1 += bookObj.bookInfoArr[i].price;
    }

    if(bookObj.bookInfoArr[i].bookName == barCode2) {
        purchaseList1.push(barCode2);
        priceTotal1 += bookObj.bookInfoArr[i].price;
    }
}
console.log(`구입한 책은 ${purchaseList1}입니다.\n지불하실 총 금액은 ${priceTotal1}원 입니다.`);

// 선생님이 한 방법
const purchaseList2 = [];
let priceTotal2 = 0;
const bookInfoArr = bookObj.bookInfoArr;
for(let bookInfo of bookInfoArr) {
    if(bookInfo.bookName == barCode1) {
        purchaseList2.push(bookInfo);
    }
    if(bookInfo.bookName == barCode2) {
        purchaseList2.push(bookInfo);
    }
}
const bookInfo1 = bookInfoArr[0];
console.log(bookInfo1); // bookname, price
console.log('bookName' in bookInfo1, 'in 연산자');
// 반복문 for in 객체 순회
// 배열에서 for in 시 index값은 string 타입이다.
for(let key in bookInfo1) {
    //console.log(typeof key, 'for in 시 key 타입여부');
    //console.log(bookInfo1.key);
    //console.log(key);
    //console.log(bookInfo1[key]);
    //if(key == 'price') priceTotal2 += bookInfo1[key];
}
// 실습3. purchaseList 배열안에 있는 객체를 활용하여
//        priceTotal2의 값을 구하시오
console.log(purchaseList2);
for(let goods of purchaseList2) {
    // 방법1
    priceTotal2 += goods.price;
    // 방법2(for in 활용)
    // for(let key in goods){
    //     if(key=='price') priceTotal2 += goods[key];
    // }
}
console.log(`지불하실 총 금액은 ${priceTotal2}원 입니다.`);

  • [코드예제] 객체 실습3
    // 실습. myObj의 addArr메서드를 3번 실행시켰더니
// myObj의 arr 속성 배열에 '홍길동', '유관순', '이순신' 이라는 문자열이
// 차례대로 담겼다. 위의 문구처럼 문자열이 담길 수 있도록 메서드 내의 코드를 완성하시오.

const myObj = {
	arr : [],
	addArr(name) {
		this.arr.push(name);
		return this;
	}
}
myObj.addArr('홍길동')
	 .addArr('유관순')
	 .addArr('이순신');
console.log(myObj.arr);


//실습. 자동차 주행시 주행내역과 총주행 거리를 구하시오.
//위 문구대로 실행될 수 있도록 코드를 완성하고 결괏값을 출력하시오.

const car = {
			color : 'red',
			model : 'K5',
			moveHistory : [],
			totalMove : 0,
			move(num) {
				this.moveHistory.push(num);
				this.totalMove += num;
				return this;
			},
			getTotalMove(){
				// for(let km of this.moveHistory){
				// 	this.totalMove += km;
				// }
				return this.totalMove;
			}
}
car.move(50).move(100).move(70);
console.log(`주행내역: ${car.moveHistory}`);
console.log(`총 주행거리:  ${car.getTotalMove()}km`);


// 실습. nObj의 getAvg메서드를 호출 하였더니 nObj의 nArr 배열 속성 요소의
// 평균값이 리턴되었다. 위 문구대로 실행될 수 있도록 코드를 완성하고 결괏값을 출력하시오.

const nObj = {
		 		nArr : [10,20,30,40,50],
				getAvg() {
					let sum = 0;
					let avg = 0;
					for(let num of this.nArr){
						sum += num;
						avg = (sum / this.nArr.length);
					}
					return avg;
				}
	}
console.log(nObj.getAvg());


// 실습. getMaxScoreStudent 메서드 호출 시 최고의 점수를 받은 학생의 명을 리턴하고
// 그 결괏값을 출력하도록 하시오.

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 tagetScore = this.score[i].score;
							if(maxScore < tagetScore) {
								maxScore = tagetScore;
							}
						}

						let maxScoreStudent = '';
						let isFirst = true;
						for(let studentInfo of this.score) {
							if(studentInfo.score == maxScore) {
								if(isFirst) {
									maxScoreStudent += studentInfo.studentName;
									isFirst = false;
									continue;
								}
								maxScoreStudent += `, ${studentInfo.studentName}`;
							}
						}
						return maxScoreStudent;
					}
				};
console.log(studentObj.getMaxScoreStudent());


// 실습. 아래의 실행코드에서 에러가 발생하지 않도록 메서드 내의 코드를 완성하시오.

const numObj = {
		 			nArr : [],
					addN(num) {
						this.nArr.push(num);
						return this;
					},
					sum() {
						let total = 0;
						for(let arrHap of this.nArr) {
							total += arrHap;
						}
						return total;
					}
			 	}

let n = numObj.addN(10).addN(10).addN(10).addN(10).addN(10).sum();

console.log(n, '50 결괏값');

  • [코드예제] 객체 실습4
    // 실습. 아래는 구매에 따른 마일리지 적립 서비스이다. 실행코드에서 에러가 발생하지 않도록 메서드 내의 코드를 완성하시오.<br>
// 조건. 구매에 따른 내역이 히스토리에 등록되어야한다.(프로퍼티명: history)

/*
	현재날짜)
	let date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	let time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
	let currentDate = `${year}-${month}-${day} ${time}`;

	예시:) 
	mileageService.addMileage('id001',100000);
	mileageService.addMileage('id002',90000);
	mileageService.addMileage('id001',110000);
	mileageService.addMileage('id003',80000);
	mileageService.addMileage('id004',50000);

	console.log(mileageService.addMileage('id001',100000).getMemberInfo('id001'));
	console.log(mileageService.getMemberInfo('id002'));
	console.log(mileageService.getMemberInfo('id003'));
	console.log(mileageService.getMemberInfo('id004'));
	console.log(mileageService.history);

	======================출력==========================
	{ memberId: 'id001', currentMileage: 9170, memberLevel: 'VIP' }
	{ memberId: 'id002', currentMileage: 1270, memberLevel: 'SILVER' }
	{ memberId: 'id003', currentMileage: 3320, memberLevel: 'GOLD' }
	{ memberId: 'id004', currentMileage: 5250, memberLevel: 'FLATINUM' }
	[
		{
			memberId: 'id001',
			status: '누적',
			mileage: 700,
			date: '2022-10-13 21:46:27'
		},
		{
			memberId: 'id002',
			status: '누적',
			mileage: 270,
			date: '2022-10-13 21:46:27'
		},
		{
			memberId: 'id001',
			status: '누적',
			mileage: 770,
			date: '2022-10-13 21:46:27'
		},
		{
			memberId: 'id003',
			status: '누적',
			mileage: 320,
			date: '2022-10-13 21:46:27'
		},
		{
			memberId: 'id004',
			status: '누적',
			mileage: 250,
			date: '2022-10-13 21:46:27'
		},
		{
			memberId: 'id001',
			status: '누적',
			mileage: 700,
			date: '2022-10-13 21:46:27'
		}
	]

*/
const mileageService = {
							memberList : [
											{memberId : 'id001', currentMileage: 7000, memberLevel: 'VIP'},
											{memberId : 'id002', currentMileage: 1000, memberLevel: 'SILVER'},
											{memberId : 'id003', currentMileage: 3000, memberLevel: 'GOLD'},
											{memberId : 'id004', currentMileage: 5000, memberLevel: 'FLATINUM'},
											{memberId : 'id005', currentMileage: 7000, memberLevel: 'BRONZE'},
											{memberId : 'id006', currentMileage: 7000, memberLevel: 'GOLD'},
											{memberId : 'id007', currentMileage: 7000, memberLevel: 'DIAMOND'}
										],
							reserveReferenceTable : [
														{memberLevel: 'VIP',      ratio: 0.007},
														{memberLevel: 'DIAMOND',  ratio: 0.006},
														{memberLevel: 'FLATINUM', ratio: 0.005},
														{memberLevel: 'GOLD',     ratio: 0.004},
														{memberLevel: 'SILVER',   ratio: 0.003},
														{memberLevel: 'BRONZE',   ratio: 0.001}
													],
							history : [],
							addMileage(id, paymentAmount) {
								// 1. 회원의 정보를 조회
								let memberInfo;
								for(const info of this.memberList) {
									if(id == info.memberId) {
										memberInfo = info;
										break;
									}
								}
								// 2. 회원 레벨에 맞는 회원 마일리지 적립 기준비율 구하기
								let memberLevel = memberInfo.memberLevel;
								let ratio;
							for(const level of this.reserveReferenceTable) {
								if(memberLevel == level.memberLevel) {
										ratio = level.ratio;
									}
								}
								console.log(memberLevel, ratio);

								// 3. 마일리지 적립금 구하기
								let mileage = paymentAmount * ratio;
								console.log(mileage);

								// 4. 회원의 현재마일리지에 적립금 누적하기
								memberInfo.currentMileage += mileage;
								console.log(memberInfo);

								// 5. 현재 날짜 구하기
								let date = new Date();
								let year = date.getFullYear();
								let month = date.getMonth() + 1;
								let day = date.getDate()
								let time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
								let today = `${year}-${month}-${day} ${time}`;
								console.log(today);

								// 6. history 배열에 내역 등록
								const mileageHistory = {};
								mileageHistory.memberId = id;
								mileageHistory.status = '누적';
								mileageHistory.mileage = mileage;
								mileageHistory.date = today;
								this.history.push(mileageHistory)
								console.log(mileageHistory);

								return this;
						
							},
							getMemberInfo(id) {
								let memberInfo;
								for(let info of this.memberList) {
									if(id == info.memberId) {
										memberInfo = info;
										break;
									}
								}
								return memberInfo;
							}

						};
mileageService.addMileage('id001',100000);
mileageService.addMileage('id002',90000);
mileageService.addMileage('id001',110000);
mileageService.addMileage('id003',80000);
mileageService.addMileage('id004',50000);

console.log(mileageService.addMileage('id001',100000).getMemberInfo('id001'));
console.log(mileageService.getMemberInfo('id002'));
console.log(mileageService.getMemberInfo('id003'));
console.log(mileageService.getMemberInfo('id004'));
console.log(mileageService.history);

tag : #javascript #객체 #참조변수 #선언 #this. #체이닝기법 #속성 #메소드


Uploaded by N2T

728x90
320x100

'0년차 > Javascript' 카테고리의 다른 글

[Javascript] 내장객체  (0) 2023.04.29
[Javascript] 함수  (1) 2023.04.29
[Javascript] 배열  (0) 2023.04.29
[Javascript] 반복문  (1) 2023.04.29
[Javascript] 제어문, 스코프, 블록문, 조건문  (1) 2023.04.29
'0년차/Javascript' Related Articles more
Comments