Stack/JavaScript
[JS] 객체
7ingout
2022. 5. 4. 15:48
객체
다양한 데이터를 담을 수 있음
서로 연관된 배열과 함수를 그룹화하여 정리전돈하기 위한 것이다
key와 value의 집합체이다
object = { key: value }
let name = "green";
let age = 30;
let user = {
name: 'green',
age: 30,
isJob: true,
}
fuction print(user){
console.log(user.name);
console.log(user.age);
}
print(user)
객체 리터럴 방식
let user = {};
let user = {
name: "green",
age: 30,
}
- 새로운 key와 value를 추가할 수 있다
user.hasJob = true;
- 프로퍼티 삭제(crazy)
delete user.name;
user.name
user['name']
객체 생성자 방식
let user = new Object();
forEach
for(let item of arr)
for(let item in obj){
obj[item]
}
프로퍼티 (key: value)
let = cat {
name: '나비',
age: 3,
weight: 4
sleep: function() {
console.log('쿨쿨잔다');
}
}
cat.sleep();
function print() {
console.log('출력했어요');
}
print();
JavaScript 내장 객체
JavaScript 엔진이 구동되는 시점에 바로 제공되며, JavaScript코드 어디에서든 사용이 가능한 객체
- Global
- Object
- String
- Number
- Boolean
- Date
_ Array
- Math
Math.random() 0보다 크고 1보다 작은 무작위 숫자를 반환
Math.round() 인수로 전달받은 값을 소수점 첫번째 자리에서 반올림한 결과를 반환
Math.floor() 인수로 전달받은 값을 소수점 첫번째 자리에서 내림한 결과를 반환
Math.ceil() 인수로 전달받은 값을 소수점 첫번째 자리에서 올림한 결과를 반환
Math.min()
Math.max()
Math.abs()
계산된 속성 . ['']
.['']
.을 사용할 때는 코딩하는 순간 그 값을 받아 오고 싶을 때
[]를 사용할 때는 런타임에서 결정하거나 실시간으로 원하는 키값을 받아오고 싶을 때
fuction printValue(obj, key) {
console.log(obj.key);
console.log(obj[key]);
}
단축 프로퍼티
let person1 = { name: 'bob', age: 2 };
let person2 = { name: 'steve', age: 5 };
let person3 = { name: 'dave', age: 4 };
let person4 = { name: 'min', age: 4 };
fuction makePerson(name, age) {
return {
// 키 생략 가능
// name: name,
// age: age,
name,
age,
}
}
makePerson('blue', 5);
생성자 함수
function Person(name, age) {
// this = {}
this.name = name;
this.age = age;
// return this;
}
let person6 = new Person('abc', 30);
in 연산자: 오브젝트에 키가 있는지 없는지 확인
'name' in obj
객체의 순환
for ...in문
let user = {
name: 'min',
age: 30,
}
for (let a in user){
console.log(user[a])
}
forEach(()=>{
})
let array = [1, 2, 3, 4, 5, 6]
for (let li of array) {
}
객체 복사
let user = {
name: 'a',
age: 30,
}
let user2 = {};
for (let key in user){
user2[key] = user[key];
}
let user3 = {};
Object.assign(user3, user);
let user4 = Object.assign({}, user);
Object.assign({}, obj)
Objcet.keys(obj) 객체의 키항목을 배열로 반환해줌
Object.values(obj) 객체의 값항목을 배열로 반환해줌
Object.entries(obj) 객체의 키 / 값을 배열로 반환해줌
01object.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>
// 객체 리터럴방식
// 객체의 종류
// 배열
// 함수
// 날짜
// 수학
// Boolean은 객체일 수 있음(new 키워드로 정의된 경우)
// 숫자도 객체일 수 있음(new 키워드로 정의된 경우)
// 문자열도 객체일 수 있음(new 키워드로 정의된 경우)
let num = new String('abc');
console.log(typeof num);
let str = 'abc'
console.log(typeof str);
let user = {
name: 'green',
age: 32,
}
user['hobby'] = '독서';
console.log(user.name);
console.log(user['age']);
console.log(user);
delete user.age;
console.log(user);
// for(let key in user) {
// console.log(user[key]);
// }
for(let key in user) {
console.log(key);
}
//객체의 프로퍼티와 메서드
let cat = {
name: 'naby',
age: 3,
weight: 4,
sleep: function() {
console.log('잠을 잔다.');
},
eat:function() {
console.log('음식을 먹는다.');
}
}
console.log(cat.name);
cat.sleep();
// 객체 복사
let student1 = {
name: 'green',
};
let student2 = student1;
student1.name = 'blue';
console.log(student2); // 값이 같이 바뀜
let num1 = 10;
let num2 = num1;
num1 = 20;
console.log(num2);
console.log(student1 == student2);
console.log(student1 === student2);
let a = {};
let b = {};
console.log(a == b);
let clone = {}; // 값이 같이 안바뀜
for (let key in student1) {
clone[key] = student1[key];
}
console.log(clone === student1);
</script>
</body>
</html>
02objectcopy.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: 30,
}
let clone = {};
// clone.name = user.name;
// clone.age = user.age;
for (let key in user){
clone[key] = user[key]
}
console.log(clone);
user.name = 'blue';
console.log(clone.name);
let user2 =user;
</script>
</body>
</html>
03Math.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~10까지 랜덤한 숫자 출력하기
let result = Math.floor(Math.random()*10)+1;
console.log(result);
</script>
</body>
</html>
04lotto.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>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
h1 {
position: absolute;
top: 0;
left: 0;
}
ul {
width: 70%;
display: flex;
}
li {
width: 180px;
height: 180px;
border-radius: 50%;
background-color: mediumslateblue;
list-style: none;
line-height: 180px;
text-align: center;
}
</style>
</head>
<body>
<h1>로또 번호 출력하기</h1>
<ul>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>
<script>
let arrLotto = [];
for(let i= 1; i<46; i++) {
arrLotto.push(i);
}
// 1. arrLotto배열에서 랜덤한 값을 반환
// arrLotto[0]~arrLotto[44]
for(let i=0; i<6; i++){
let ranNum = Math.floor(Math.random() * arrLotto.length); // 인덱스 번호
document.querySelector(`li:nth-child(${i+1})`)
.innerHTML = arrLotto[ranNum]; // 인덱스 번호 0에는 1이 담겨있음
arrLotto.splice(ranNum, 1);
}
</script>
</body>
</html>
05property.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 key = "likes birds"
let minyoung = {
name: '민영',
age: 32,
hasJob: true,
[key]: true,
}
console.log(minyoung[key]);
console.log(minyoung.key);
function printValue(obj, key){
console.log(obj.key);
console.log(obj[key]);
}
// 키 값은 String 타입으로 적어야 함
printValue(minyoung, 'name');
function Person(name, age){
this.name = name;
this.age = age;
}
let person1 = new Person('aaaa', 30);
console.log(person1);
console.log('name' in person1);
console.log('abc' in person1);
// 객체의 순환
for (let key in person1) {
console.log(person1[key]);
console.log(key);
}
//객체의 복사
let dog1 = {
name: '구름',
age: 3,
color: 'white',
}
let dog2 = {};
for (let key in dog1){
dog2[key] = dog1[key];
}
console.log(dog2);
// dog1.name = '흰둥이';
// console.log(dog2);
let dog3 = Object.assign({name: 'abc', weight: 500}, dog1);
console.log(dog3);
let fruit1 = { color:'red' };
let fruit2 = { color:'blue', size: 'big' };
let fruit3 = Object.assign({}, fruit1, fruit2);
console.log(fruit3);
let objkeyarr = Object.entries(dog3);
console.log(objkeyarr);
let arr2 = [1, 'name', true, undefined, [0, 1], {name: 'min', age: 30}]
</script>
</body>
</html>
06object_ex_teacher.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 bookinformation = {
이름: 'Nature of Code',
가격: '30000원',
저자: 'Deniel Shifman',
ISBM: 9788968481901,
페이지: 620,
}
console.log(bookinformation);
// 데이터를 객체 배열로 만들어라
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));
// let units = [{이름: '일벌레', 미네랄: 50, 가스: 0, 보급품: 1}, {}, {}, {}, {}] 이렇게 해도 똑같음
console.log(units);
</script>
</body>
</html>
07students.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>
// name, age, score1, score2
// 생성자 함수
function Student(name, age, score1, score2) {
// this = {}
this.name= name;
this.age = age;
this.score1 = score1;
this.score2 = score2;
// return this;
}
const students = [
new Student('A', 29, 45, 50),
new Student('B', 30, 60, 70),
new Student('C', 28, 90, 80),
new Student('D', 27, 85, 65),
new Student('E', 32, 80, 90)
];
console.log(students);
// 01. score1이 80점 이상인 학생의 이름을 출력
// find는 하나만 찾음
// filter는 해당하는 조건 다 찾음
// let result = students.filter(student=>{
// return student.score1 >= 80;
// })
let result = students.filter(student => student.score1 >= 80);
result = result.map(student=>{
return student.name;
}) // result = result.map(student => student.name)
// 02. score2만 배열로 출력
let result2 = students.map(student => student.score2);
console.log(result);
// 03. score1의 점수가 90점인 학생객체 출력
let result3 = students.find(student => student.score1 === 90);
console.log(result3);
// 04. 학생들의 score2를 문자열로 만들어서 출력
let result4 = students.map(student => student.score2);
result4 = result4.join(',');
// let reuslt4 = students.map(student => student.score2).join(',');
console.log(result4);
// 05. some() true / false 반환
// 학생배열에서 score1의 점수가 60점 이하가 있는지 확인
let result5 = students.some(student=> student.score1 == 100);
console.log(result5);
</script>
</body>
</html>
08burger.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>
<!-- burger 객체 생성해서 burgers 배열에 넣기
1. 생성자 함수 Burger 만들기
2. 객체 만들기
'새우버거' / 5000 / 'big'
'불고기버거' /4500 / 'regular'
'주니어불고기버거' / 3500 / 'small'
'치즈버거' / 5500 / 'reguler'
'스테이크버거' / 7000 / 'big'
'치킨버거' / 5500 / 'regular'
'야채버거' / 4500 / 'regular'
'주니어새우버거' /3000 / 'small'
3. 햄버거 이름만 문자열로 출력하시오
4. 가격이 5000원 이하인 햄버거들만 출력
5. 크기가 big인 햄버거들만 출력
6. 햄버거 가격이 4000원 이하도 있는지 출력 -->
<script>
function Burger(name, price, size) {
this.name= name;
this.price = price;
this.size = size;
}
const burgers = [
new Burger('새우버거', 5000, 'big'),
new Burger('불고기버거', 4500, 'regular'),
new Burger('주니어불고기버거', 'small'),
new Burger('치즈버거', 5500, 'regular'),
new Burger('스테이크버거', 7000, 'big'),
new Burger('치킨버거', 5500, 'regular'),
new Burger('야채버거', 4500, 'regular'),
new Burger('주니어새버거', 3000, 'small'),
];
console.log(burgers);
let burger_name = burgers.map(burger => burger.name).join(',');
console.log(burger_name);
let down5000 = burgers.filter(burger => burger.price <= 5000);
down5000 = down5000.map(burger => burger.name)
console.log(down5000);
let sizebig = burgers.filter(burger => burger.size == 'big');
sizebig = sizebig.map(burger => burger.name)
console.log(sizebig);
let down4000 = burgers.some(burger => burger.price <= 4000);
console.log(down4000);
</script>
</body>
</html>
09가위바위보.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>
<!-- Math.floor(Math.random()*3) -->
<script>
let user_input = prompt('가위 바위 보 중 하나를 입력해주세용');
let com_input = ['가위', '바위', '보'];
console.log(`나는 " ${user_input} " 를 냈고 , `);
let com = com_input[Math.floor(Math.random()*3)]
console.log(`컴퓨터는 " ${com} " 를 내서 ,`);
if (user_input === com) {
console.log('비겼어용 !');
} else if (user_input =="가위" && com =="바위") {
console.log('졌어용 !');
} else if (user_input =="가위" && com =="보") {
console.log('이겼어용 !');
} else if (user_input =="바위" && com =="가위") {
console.log('이겼어용 !');
} else if (user_input =="바위" && com =="보") {
console.log('졌어용 !');
} else if (user_input =="보" && com =="가위") {
console.log('졌어용 !');
} else if (user_input =="보" && com =="바위") {
console.log('이겼어용 !');
}
</script>
</body>
</html>
09가위바위보_teacher.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. 입력창에 가위, 바위, 보 중 하나를 입력받는다.
// 2. 컴퓨터도 랜덤하게 가위, 바위, 보 중 하나를 지정해준다.
// 3. 입력받은 값과 컴퓨터 값을 비교하여 결과를 콘솔에 출력
let rps = prompt('가위, 바위, 보 중 하나를 입력해주세요');
rpsGame(rps);
// 컴퓨터의 값을 랜덤하게 반환해주는 함수
function rpsRandom(){
let num = Math.floor(Math.random() * 3); // 0, 1, 2
// let com_rps = num === 0 ? '가위' : com_rps === 1 ? '바위' : '보';
if(num === 0) return '가위';
else if(num === 1) return '바위';
else return '보';
}
function rpsGame(rps){
// 사용자가 가위 또는 바위 또는 보를 입력하지 않았을 때
if(rps !== '가위' && rps!== '바위' && rps!== '보') {
console.log('잘못 입력하셨습니다.')
return;
} else {
let com_rps = rpsRandom();
console.log(`당신: ${rps}, 컴퓨터 : ${com_rps}`);
if(rps === com_rps) comsole.log('비겼습니다.');
else if(rps == '가위' && com_rps == '보' || rps == '바위' && com_rps == '가위' || rps == '보' && com_rps == '바위') {
console.log('당신이 이겼습니다.');
} else console.log('컴퓨터가 이겼습니다.');
}
}
</script>
</body>
</html>
10주사위.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 my_dice = Math.floor(Math.random() * 6 + 1);
let com_dice = Math.floor(Math.random() * 6 + 1);
dice(my_dice, com_dice);
function dice(my_dice, com_dice) {
console.log(`컴퓨터의 주사위는 ${com_dice}입니다.`);
console.log(`당신의 주사위는 ${my_dice}입니다.`);
if(my_dice > com_dice) {
console.log('당신의 승리입니다.');
} else if(my_dice === com_dice) {
console.log('비겼습니다.');
} else {
console.log('컴퓨터의 승리입니다.');
}
}
</script>
</body>
</html>