노력이 좋아서

<step45>'js_구조분해할당, 프로토타입'

zoaseo 2022. 5. 23. 12:10

1) decomposition.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 fruits = ["🍌","🍊","🍉","🍇","🥝"];
        //구조분해할당
        let [fruit1, fruit2, , fruit3] = fruits;   //띄어넘기 가능
        console.log(fruit1, fruit2, fruit3);
        //나머지 매개변수로 배열받기
        let [fru, ...frus] = fruits;
        console.log(`fru변수에 담긴 값은: ${fru}입니다.`);
        console.log(`frus에 담긴 값은: ${frus}배열입니다.`);
        console.log(frus);  //배열
        let green = 'green';
        let blue = 'blue';
        console.log(`green변수에 담긴 값은 ${green}이다.`);
        console.log(`blus변수에 담긴 값은 ${blue}이다.`);
        //변수값 변경하기
        [green, blue] = [blue, green];
        console.log(`green변수에 담긴 값은 ${green}이다.`);
        console.log(`blue변수에 담긴 값은 ${blue}이다.`);

        let [a, b, c] = ["green","blue","pink"];
        
        //기본값
        let [name ="bob", age] = [];  //age는 undefined 할당
        console.log(name, age);

        //객체 구조분해할당
        let options = {
            title: "Menu",
            width: 100,
            height: 200,
        }
        let {width, height} = options;
        console.log(width);

        //키명과 다른 변수명으로 할당
        let {title: m} = options;
        console.log(m);

        //객체 구조분해할당 나머지 할당하기
        let {title, ...rest} = options;
        console.log(`title변수에는 ${title}이 할당됨`);
        console.log(`rest변수에는 ${rest} title을 제외한 나머지 객체가 할당됨`);
        console.log(rest);

        //객체 구조분해할당 기본값 설정하기
        let person1 = {
            name: "bob",
            age: 30,
            subname: "abc",
            isJob: true,
        }
        let {name: n, age: ag, subname, hobby} = person1;
        console.log(hobby);

        let opt = {
            title2: "Menu",
        }
        let {
            width2 = prompt('width?'), 
            height2 = prompt('height?'), 
            title2} = opt;
        console.log(width2, height2, title2);
    </script>
</body>
</html>

2) ex01.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: "John",
            years: 30,
        };
        //name 프로퍼티의 값을 변수 name에 할당하세요.
        //years 프로퍼티의 값을 변수 age에 할당하세요.
        //isAdmin 프로퍼티의 값을 변수 isAdmin에 할당하세요.
        //isAdmin이라는 프로퍼티가 없으면 false를 할당하세요.
        let {name, years: age, isAdmin = false} = user;
        console.log(name, age, isAdmin);
    </script>
</body>
</html>

3) prototype.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 animal = {
            eats: true,
            say(){
                console.log('안녕하세요');
            }
        };
        let rabbit = {
            jumps: true,
        }
        rabbit.__proto__ = animal;  //프로토타입 지정
        console.log(rabbit.jumps);
        console.log(rabbit.eats);
        console.log(rabbit);
        console.log(animal.eats);
        animal.say();
        rabbit.say();

        const car = {
            wheels: 4,
            drive: function(){
                console.log('drive...');
            }
        }
        const bmw = {
            color: 'red',
            navigator: 1,
        }
        bmw.__proto__ = car;  //프로토타입 지정
        bmw.drive();
        let keys = Object.keys(bmw);
        console.log(keys);

        //for in문은 해당객체의 키뿐만 아니라
        //해당객체의 프로토타입의 키까지 포함
        //Object.keys(obj)
        //해당객체의 키만 배열로 반환(프로토타입의 키는 포함하지 않음)
        
        //obj.hasOwnPreperty(key) 해당객체의 키만 true를 반환
        //프로토타입의 키는 false를 반환
        for(let key in bmw){
            if(bmw.hasOwnProperty(key)){  //key를 직접 가지고 있는지 확인
                console.log('o', key);
            }else {
                console.log('x', key);
            }
        }
        const Car2 = function(color){
            this.color = color;
        }
        const x1 = new Car2("pink");
        const x2 = new Car2("blue");
        Car2.prototype.wheels = 4;  //프로토타입 속성 지정
        console.log(x1, x2.wheels);
        console.log(x1 instanceof Car2);
    </script>
</body>
</html>