[모던 JavaScript] 4.1 ~ 4.4 과제 정리

    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
    저작자표시

    'JavaScript' 카테고리의 다른 글

    [모던 JavaScript] 4.6 ~ 5.3 과제 정리!  (0) 2022.12.01
    [모던 JavaScript] 4.5 과제 정리  (0) 2022.11.25
    [모던 JavaScript] 3.3 ~ 3.6 과제 정리  (0) 2022.11.20
    [모던 JavaScript] 2.17 ~ 3.2 과제 정리  (0) 2022.11.18
    [모던 JavaScript] 2.12 ~ 2.16 과제 정리  (0) 2022.11.17

    관련글

    댓글

    라이브러리 브랜드 그룹 | 심리학도의 좌충우돌 개발 여행기

    티스토리툴바