JavaScript Objects
JavaScript Tutorial » JavaScript Objects
A JS object is a collection of named values.
These named values are usually referred to as properties of the object.
If you remember from the JavaScript arrays chapter, an array is a collection of values, where each value has an index (a numeric key) that starts from zero and increments by one for each value.
An object is similar to an array, but the difference is that you define the keys yourself, such as name, age, gender, and so on.
You can include key-value pair in { }
Syntax:
Example:
var = { key1: value1, key2: value2,... keyN: valueN};
Creating Objects - example
An object can be created with curly brackets {} with an optional list of properties..
Example:
Output:
Chrys-Jonson Dalton
32
Male
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating Objects in JavaScript</title>
</head>
<body>
<script>
var my_person = {
name_surname: "Chrys-Jonson Dalton",
age: 32,
gender: "Male",
display_Name: function() {
alert(this.name_surname);
}
};
document.write(my_person.name_surname + "<br>");
document.write(my_person.age + "<br>");
document.write(my_person.gender);
console.log(my_person);
</script>
</body>
</html>
Chrys-Jonson Dalton
32
Male
Accessing Object's Properties - example
To access or get the value of a property, you can use the dot (.), or square bracket ([]) notation, as demonstrated in the following example:
Example:
Output:
If You’re Looking to Learn Something
by Aldo Sohm and Christine Muhlke
2009
If You’re Looking to Learn Something
by Aldo Sohm and Christine Muhlke
2009
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Get Properties Values of an Object</title>
</head>
<body>
<script>
var my_book = {
"book_name": "If You’re Looking to Learn Something",
"book_author": "by Aldo Sohm and Christine Muhlke",
"year": 2009
};
// Dot notation
document.write(my_book.book_name + "<br>");
document.write(my_book.book_author + "<br>");
document.write(my_book.year);
document.write("<hr>");
// Bracket notation
document.write(my_book["book_name"] + "<br>");
document.write(my_book["book_author"] + "<br>");
document.write(my_book["year"]);
</script>
</body>
</html>
If You’re Looking to Learn Something
by Aldo Sohm and Christine Muhlke
2009
If You’re Looking to Learn Something
by Aldo Sohm and Christine Muhlke
2009
javascript objects array, methods, keys, examples. mdn, add item, arrays, list, explained
javascript objects array, methods, keys, examples. mdn, add item, arrays, list, explained
JavaScript Objects - javascript tutorial
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.