create an empty object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //An empty object (“empty cabinet”) can be created using one of two syntaxes:
        let user = new Object(); // "object constructor" syntax
        let user1 = {};  // "object literal" syntax
    </script>
</body>
</html>

____________________________________________________________________________

example of adding a key and value to an object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
                 let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};
user.isAdmin = true;
alert(user.isAdmin);
    </script>
</body>
</html>

____________________________________________________________________________

create an object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

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

____________________________________________________________________________

example of assign function of object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// copies all properties from permissions1 and permissions2 into user
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }
alert(user.name); // John
alert(user.canView); // true
alert(user.canEdit); // true
    </script>
</body>
</html>

____________________________________________________________________________

example of object cloning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182
    </script>
</body>
</html>

____________________________________________________________________________

example of object reference

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 = 'Pete'; // changed by the "admin" reference

alert(user.name); // 'Pete', changes are seen from the "user" reference
    </script>
</body>
</html>

____________________________________________________________________________

example of iterating values in object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    let user = {
        name: "John",
        age: 30
      };
      
      // loop over values
      for (let value of Object.values(user)) {
        alert(value); // John, then 30
      }
    </script>
</body>
</html>

____________________________________________________________________________

example of multiword keys in object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};
alert(user["likes birds"]);
    </script>
</body>
</html>

__________________________________________________________________________________________

example of printing object parameters

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
              let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};
        // get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30
    </script>
</body>
</html>

____________________________________________________________________________

example of getting value from object using square brackets on key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let user={};
        let key = "likes birds";

user[key] = true;
alert(user[key]);
    </script>
</body>
</html>

__________________________________________________________________________________________

