<!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">
<title>Document</title>
</head>
<body>
<script>
// ●● 객체 리터럴 방식
// ■ 객체의 종류
// → 배열, 함수, 날짜, 수학
// Boolean은 객체 일 수 있음 (new라는 키워드로 정의된 경우)
// 숫자도 객체일 수 있음 (new라는 키워드로 정의된 경우)
// 문자열도 객체일 수 있음 (new라는 키워드로 정의된 경우)
let num = new String('abc');
console.log(typeof num); // object 타입으로 나옴
let str = 'abc';
console.log(typeof str); // string 타입으로 나옴
// let name = 'green'
// let age = 32;
// 변수를 계속 만들어줘야되는걸 객체로 묶어줌
let user = {
name : 'green',
age : 20, // 마지막 프로터피는 , 로 끝날 수도 없을 수도
}
user['hobby'] = '독서'; // 추가
console.log(user.name);
console.log(user['age']); // 접근 방법 2가지
console.log(user);
delete user.age; // 삭제
console.log(user);
for(let key in user) {
console.log(user[key]); // key(name,age)로 접근 // vlaue(값/green,독서)
}
// ●● 객체의 프로퍼티와 메서드
let cat = {
name : 'naby',
age : 3,
weight : 4,
sleep : function() {
console.log('잔다.');
},
eat : function() {
console.log('먹는다.');
}
}
console.log(cat.name);
cat.sleep(); // 출력, 접근 방식 2가지
// ●● 객체 복사 (object copy) ★
let student1 = {
name : 'green',
};
let student2 = student1; // 1을 2에 할당
student1.name = 'blue'; // 할당 했을 때 문제 ) 같이 변경됨, object의 문제점
// 같은 서랍장의 참조 주소를 복사한 것, 값이 아니라
console.log(student2);
let num1 = 10;
let num2 = num1;
num1 = 20; // num2 는 변경되지 않음, 원시형 데이터는 괜찮음 → 문자, 불린, 넘버
console.log(num2);
console.log(student1 == student2);
console.log(student1 === student2); // 둘 다 true가 나옴
let a = {};
let b = {}; // 독립된 두 객체
console.log(a == b); // false 반환
let clone = {}; // 독립적인 복제본, 값을 담아줌
for (let key in student1) {
clone[key] = student1[key];
}
console.log(clone);
console.log(clone === student1); // false 반환
// 객체가 가진 프로퍼티를 새로운 객체에 넣어줌 clone
// 새로 복사한 객체의 key에 넣어줌
</script>
</body>
</html>
objectCopy.html
<!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">
<title>Document</title>
</head>
<body>
<script>
let user = {
name : 'green',
age : 20,
}
let clone = {};
clone.name = user.name;
clone.age = user.age;
// → 코인문 사용하면됨
for (let key in user) {
clone[key] = user[key]
// 값을 할당해줘 ~
}
console.log(clone);
let user2 = user; // 얕은 복사, 참조 주소만 복사
user.name = 'blue';
console.log(user.name);
console.log(clone.name); // 같이 변경되지않음
</script>
</body>
</html>
object_ex.html
<!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">
<title>Document</title>
</head>
<body>
<script>
// (1)
let bookinfomation = {
이름 : 'Nature of Code',
가격 : '30000원',
저자 : 'Deniel Shifman',
ISBM : 9788968481901,
페이지 : 620,
}
console.log(bookinfomation);
// (2) 데이터를 객체 배열로 만들기
let units = [];
function Unit (이름, 미네랄, 가스, 보급품) {
this.이름 = 이름;
this.미네랄 = 미네랄;
this.가스 = 가스;
this.보급품 = 보급품;
// → 생성자 함수
}
units.push(new Unit('일벌레', 50, 0, 1));
units.push(new Unit('여왕', 150, 0, 2));
units.push(new Unit('바퀴', 75, 25, 2));
units.push(new Unit('하드라리스크', 100, 50, 2));
units.push(new Unit('타락귀', 150, 100, 2));
console.log(units);
// let units = [{이름 : '일벌레', 미네랄:50, 가스:0, 보급품:1}, { }, { }, { }, { }]
</script>
</body>
</html>
