Cara menggunakan javascript object property number

As we know from the chapter Data types, there are eight data types in JavaScript. Seven of them are called “primitive”, because their values contain only a single thing (be it a string or a number or whatever).

In contrast, objects are used to store keyed collections of various data and more complex entities. In JavaScript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else.

An object can be created with figure brackets

user.isAdmin = true;

user.isAdmin = true;

user.isAdmin = true;

We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key. It’s easy to find a file by its name or add/remove a file.

An empty object (“empty cabinet”) can be created using one of two syntaxes:

let user = new Object(); // "object constructor" syntax
let user = {};  // "object literal" syntax

Usually, the figure brackets

user.isAdmin = true;

We can immediately put some properties into

user.isAdmin = true;

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

A property has a key (also known as “name” or “identifier”) before the colon

user.isAdmin = true;

In the

user.isAdmin = true;

1. The first property has the name

   user.isAdmin = true;

   9 and the value

   delete user.age;

   0.
2. The second one has the name

   delete user.age;

   1 and the value

   delete user.age;

   2.

The resulting

user.isAdmin = true;

We can add, remove and read files from it at any time.

Property values are accessible using the dot notation:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

The value can be of any type. Let’s add a boolean one:

user.isAdmin = true;

To remove a property, we can use the

delete user.age;

delete user.age;

We can also use multiword property names, but then they must be quoted:

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

The last property in the list may end with a comma:

let user = {
  name: "John",
  age: 30,
}

That is called a “trailing” or “hanging” comma. Makes it easier to add/remove/move around properties, because all lines become alike.

For multiword properties, the dot access doesn’t work:

// this would give a syntax error
user.likes birds = true

JavaScript doesn’t understand that. It thinks that we address

delete user.age;

delete user.age;

The dot requires the key to be a valid variable identifier. That implies: contains no spaces, doesn’t start with a digit and doesn’t include special characters (

delete user.age;

delete user.age;

There’s an alternative “square bracket notation” that works with any string:

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

Now everything is fine. Please note that the string inside the brackets is properly quoted (any type of quotes will do).

Square brackets also provide a way to obtain the property name as the result of any expression – as opposed to a literal string – like from a variable as follows:

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

Here, the variable

user.isAdmin = true;

For instance:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

The dot notation cannot be used in a similar way:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

We can use square brackets in an object literal, when creating an object. That’s called computed properties.

For instance:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

The meaning of a computed property is simple:

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

So, if a visitor enters

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

Essentially, that works the same as:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

…But looks nicer.

We can use more complex expressions inside square brackets:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

Square brackets are much more powerful than dot notation. They allow any property names and variables. But they are also more cumbersome to write.

So most of the time, when property names are known and simple, the dot is used. And if we need something more complex, then we switch to square brackets.

In real code, we often use existing variables as values for property names.

For instance:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

In the example above, properties have the same names as variables. The use-case of making a property from a variable is so common, that there’s a special property value shorthand to make it shorter.

Instead of

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

We can use both normal properties and shorthands in the same object:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

As we already know, a variable cannot have a name equal to one of the language-reserved words like “for”, “let”, “return” etc.

But for an object property, there’s no such restriction:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

In short, there are no limitations on property names. They can be any strings or symbols (a special type for identifiers, to be covered later).

Other types are automatically converted to strings.

For instance, a number

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

There’s a minor gotcha with a special property named

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

As we see from the code, the assignment to a primitive

let user = {
  name: "John",
  age: 30,
}

We’ll cover the special nature of

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

A notable feature of objects in JavaScript, compared to many other languages, is that it’s possible to access any property. There will be no error if the property doesn’t exist!

Reading a non-existing property just returns

let user = {
  name: "John",
  age: 30,
}

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

There’s also a special operator

let user = {
  name: "John",
  age: 30,
}

The syntax is:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

For instance:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

Please note that on the left side of

let user = {
  name: "John",
  age: 30,
}

If we omit quotes, that means a variable should contain the actual name to be tested. For instance:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

Why does the

let user = {
  name: "John",
  age: 30,
}

let user = {
  name: "John",
  age: 30,
}

Well, most of the time the comparison with

let user = {
  name: "John",
  age: 30,
}

let user = {
  name: "John",
  age: 30,
}

It’s when an object property exists, but stores

let user = {
  name: "John",
  age: 30,
}

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

In the code above, the property

// this would give a syntax error
user.likes birds = true

let user = {
  name: "John",
  age: 30,
}

Situations like this happen very rarely, because

let user = {
  name: "John",
  age: 30,
}

// this would give a syntax error
user.likes birds = true

let user = {
  name: "John",
  age: 30,
}

To walk over all keys of an object, there exists a special form of the loop:

// this would give a syntax error
user.likes birds = true

// this would give a syntax error
user.likes birds = true

The syntax:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

For instance, let’s output all properties of

user.isAdmin = true;

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

Note that all “for” constructs allow us to declare the looping variable inside the loop, like

// this would give a syntax error
user.likes birds = true

Also, we could use another variable name here instead of

user.isAdmin = true;

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

Are objects ordered? In other words, if we loop over an object, do we get all properties in the same order they were added? Can we rely on this?

The short answer is: “ordered in a special fashion”: integer properties are sorted, others appear in creation order. The details follow.

As an example, let’s consider an object with the phone codes:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

The object may be used to suggest a list of options to the user. If we’re making a site mainly for a German audience then we probably want

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

But if we run the code, we see a totally different picture:

• USA (1) goes first
• then Switzerland (41) and so on.

The phone codes go in the ascending sorted order, because they are integers. So we see

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

Integer properties? What’s that?

The “integer property” term here means a string that can be converted to-and-from an integer without a change.

So,

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

…On the other hand, if the keys are non-integer, then they are listed in the creation order, for instance:

user.isAdmin = true;

So, to fix the issue with the phone codes, we can “cheat” by making the codes non-integer. Adding a plus

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

Like this:

user.isAdmin = true;

Now it works as intended.

Objects are associative arrays with several special features.

They store properties (key-value pairs), where:

• Property keys must be strings or symbols (usually strings).
• Values can be of any type.

To access a property, we can use:

• The dot notation:

  let user = {};
  
  // set
  user["likes birds"] = true;
  
  // get
  alert(user["likes birds"]); // true
  
  // delete
  delete user["likes birds"];

  7.
• Square brackets notation

  let user = {};
  
  // set
  user["likes birds"] = true;
  
  // get
  alert(user["likes birds"]); // true
  
  // delete
  delete user["likes birds"];

  8. Square brackets allow taking the key from a variable, like

  let user = {};
  
  // set
  user["likes birds"] = true;
  
  // get
  alert(user["likes birds"]); // true
  
  // delete
  delete user["likes birds"];

  9.

Additional operators:

• To delete a property:

  let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  0.
• To check if a property with the given key exists:

  let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  1.
• To iterate over an object:

  let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  2 loop.

What we’ve studied in this chapter is called a “plain object”, or just

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

There are many other kinds of objects in JavaScript:

• let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  4 to store ordered data collections,

• let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  5 to store the information about the date and time,

• let key = "likes birds";
  
  // same as user["likes birds"] = true;
  user[key] = true;

  6 to store the information about an error.
• …And so on.

They have their special features that we’ll study later. Sometimes people say something like “Array type” or “Date type”, but formally they are not types of their own, but belong to a single “object” data type. And they extend it in various ways.

Objects in JavaScript are very powerful. Here we’ve just scratched the surface of a topic that is really huge. We’ll be closely working with objects and learning more about them in further parts of the tutorial.

Apa tanda yang dapat digunakan untuk membuat objek di javascript?

Apa itu objek pada javascript?

Apa yang dimaksud dengan method pada javascript?

Apa itu tipe data javascript?