카테고리 없음

JS 객체(계산된 프로퍼티, 단축 프로퍼티, in연산, for..in 반복문, 객체 기본)

Canyi 2022. 11. 9. 10:16 

<!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 fruit = prompt("어떤 과일 구매?", "apple");

        let bag = {
            [fruit + 'computer'] : 500,  //bag.applecomputer =500
        };
        alert(bag.applecomputer);

    </script>
</body>
</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>


        //단축 프로퍼티
        function makeUser(name, age){
            return {
                name : name,
                age : age, 
                //name,
                //age,
            }
        }
        let user = makeUser ("마이클", 30);
        console.log(user.name);
        console.log(user.age);



    </script>
</body>
</html>

return에는 

name: name,

age: age, 를 쓰나

 

name,

age, 쓰나 상관없다.

 

 

 

<!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>

        //in연산자
        let user = {name: "john", age: 30};
        console.log("age" in user);
        console.log("azzge" in user);
        console.log("name" !== user);
        let obj = {
            test: undefined
        }
        console.log("test" in obj);
    </script>
</body>
</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>
  
        //for - in
        let user = {
            name: "john", 
            age: 30,
            isadmin : true
        };

        for(let key in user){
            console.log(key);
            console.log(user[key]);
        }

    </script>
</body>
</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>

        //for - in
        let user = {
            name: "john", 
            age: 30,
            isadmin : true
        };

        for(let key in user){
            if(key === "name")
            console.log(key);
            console.log(user[key]);
        }

    </script>
</body>
</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", 

        };

        let admin = user;           //참조값(주소값)이 복사됨
        admin.name = "춘삼이";      //복사된 admin 참조값에 의해 변경
        console.log(user.name);     //원본 user의 참조값을 이용해서 변경사항을 확인

    </script>
</body>
</html>

https://piaocanyi.tistory.com/294