JavaScript
[모던 JavaScript] 4.1 ~ 4.4 과제 정리
보라해바라기
2022. 11. 22. 21:19
SMALL
- 객체
- 참조에 의한 객체 복사
- 가비지 컬렉션
- 메서드와 this
4.1 (1)
<!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>객체야 안녕?</title>
</head>
<body>
<script>
let user = {}; // 빈 객체 만들기
user.name = "John"; // user에 키가 name, 값이 John인 프로퍼티를 추가
user.surname = "Smith"; // user에 키가 surname, 값이 Smith인 프로퍼티
user.name = "Pete"; // name의 값을 Pete로 수정
delete user.name; // user에서 프로퍼티 name을 삭제
</script>
</body>
</html>4.1 (2)
<!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>객체가 비어있는지 확인하기</title>
</head>
<body>
<script>
let schedule = {};
function isEmpty(obj) {
for (let key in obj){ // ** for (let key in obj) 사용!
return false
}
return true
}
alert( isEmpty(schedule) ); // true
schedule["8:30"] = "get up";
alert( isEmpty(schedule) ); // false
</script>
</body>
</html>4.1 (3)
<!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>변하지 않는 객체?</title>
</head>
<body>
<script>
const user = {
name: "John"
};
// 아래 코드는 에러 없이 실행될까요? yes
// user 자체를 바꾸는 것 X
// user 속 내용(프로퍼티), 즉 user의 name 변경!
// user가 상수라도 그 속 내용은 변경 가능
user.name = "Pete";
</script>
</body>
</html>4.1 (4)
<!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>프로퍼티 합계 구하기</title>
</head>
<body>
<script>
let salaries = {
John: 100,
Ann: 160,
Pete: 130
};
let sum = 0;
if (salaries != null) {
sum = salaries.John + salaries.Ann + salaries.Pete
} else{
sum = 0
}
// for (let key in salaries) {
// sum += salaries[key]
// } ** 이것이 좀 더 간결한 코드!
alert(sum)
</script>
</body>
</html>4.1 (5)
<!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>프로퍼티 값 두 배로 부풀리기</title>
</head>
<body>
<script>
let menu = {
width: 200,
height: 300,
title: "My menu"
};
function multiplyNumeric(obj) {
for (let key in obj) {
if (typeof(obj[key]) == 'number') {
obj[key]*=2
}
}
}
multiplyNumeric(menu);
// obj객체의 key의 값 -> obj[key]
</script>
</body>
</html>4.4 (1)
<!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>객체 리터럴에서 'this' 사용하기</title>
</head>
<body>
<script>
function makeUser() {
return {
name: "John",
ref: this
};
};
let user = makeUser();
alert( user.ref.name );
// 결과는? error...
// makeUser 내의 this는 undefined
// 수정코드
function makeUser() {
return {
name: "John",
ref() {
return this; // 현재 함수
}
};
};
let newUser = makeUser();
alert( newUser.ref().name ); // John
// 결과는? error...
</script>
</body>
</html>4.4 (2)
<!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>계산기 만들기</title>
</head>
<body>
<script>
// ** this 사용!!!
let calculator = {
sum() {
return this.a + this.b
},
mul() {
return this.a * this.b
},
read() {
this.a = +prompt("첫번째 값:", 0);
this.b = +prompt("두번째 값:", 0);
}
};
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );
</script>
</body>
</html>4.4 (3)
<!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>체이닝</title>
</head>
<body>
<script>
// ** return this 추가!
// 여기서 this는 ladder 객체
let ladder = {
step: 0,
up() {
this.step++;
return this
},
down() {
this.step--;
return this;
},
showStep: function() { // 사다리에서 몇 번째 단에 올라와 있는지 보여줌
alert( this.step );
return this;
}
};
ladder.up().up().down().showStep(); // 1 (호출체이닝 되도록)
</script>
</body>
</html>
728x90