JavaScript: Object Tutorial
JavaScript object is a collection of key/value pairs.
Each key/value pair of a object is called property. [see Property Overview]
Properties are unordered, and values can be changed anytime, and property can be added or removed, anytime.
- Property key is a string type or symbol type. [see Symbol Tutorial]
- Property value can be any type. [see Value Types]
Each object automatically inherit parent object's properties.
JavaScript objects are used for 2 purposes:
- As a data structure of list of key/value pairs. (for example, JSON)
- For Object Oriented Programing, where objects is a bundle of data and methods (functions).
Create Object
Most easy way is to use Object Literal Expression, like this:
{name_1:val_1, name_2:val_2 etc}
// create a object with 3 properties const jj = { "cat": 19, "dog": 20, "rabbit": 25 };
Access Property
2 syntax to access property:
- bracket notation:
object[property_key]
- dot notation:
object.property_key
// creating a object const jj = { "cat": 19, "dog": 20, "rabbit": 25 }; // Accessing property, bracket notation console.log(jj["cat"] === 19); // Accessing property, dot notation console.log(jj.cat === 19);
[see Property Dot Notation / Bracket Notation]
Add Property
Create a empty object, then add some properties:
const jj = {}; // creating a object jj.c1 = 3; // add a property c1 jj.c2 = 4; console.log(jj); // { c1: 3, c2: 4 }
Change a Property's Value
const jj = { "a": 1, "b": 2 }; jj.a = 9; console.log(jj); // { a: 9, b: 2 }
Delete a Property
To delete a property, use the
delete
[see “delete” Operator]
.
const jj = { "cat": 19, "dog": 20, "rabbit": 25 }; delete jj.cat; console.log(jj); // { dog: 20, rabbit: 25 }
Enumerate Object's Properties
const jj = { "a": 19, "c": 20, "b": 25 }; // loop thru object's own enumarable properties Object.keys(jj).forEach((x) => { console.log(x, jj[x]); }); /* [ prints a 19 c 20 b 25 ] */
See:
Nested Array and Object
Because object's property's value can be any object data type, so you can have any nested array and object. (because array is also a object. [see Understand JS Array])
// Key/Value, with one value being array const x = { "a": 1, "b": 2, "c": [3, 4] }; console.log(x["c"][0] === 3);
Example of key/value with one value being a variable that eval to array:
const y = [3, 4]; const x = { "a": 19, "b": 20, "c": y }; console.log(x["c"][0] === 3);
The syntax for accessing elements can be chained.
// syntax for accesing array/hash can be chained console.log({ "a": 1, "b": 2, "c": [3, 4] }["c"][0] === 3);
Following is another example of JavaScript object. This is a JSON format. [see What is JSON]
// JSON format is basically nested js objects const myStructure = { name: { first: "Cat", last: "bird", }, age: 19, hobbies: ["shopping", "dancing"], };
Object and Methods
Remember, property names are string type or symbol type. [see Property Key]
Remember, property values can be any type, including any object. (function and array are both objects) [see Object Type]
Define Method
A method is just a property that has value of function.
// create a object const jj = {}; // create a method named m jj.m = function (x) { return x + 1; }; // calling the method console.log(jj.m(3) === 4);
ThisBinding
In JavaScript, when a function is called, it has a associated value called “ThisBinding”.
In function body, the “ThisBinding” is represented by the keyword this
.
The purpose of “ThisBinding” is to allow function to implicitly work with a object. (without actually passing a argument in function call.)
When a function is called as a method in the form obj.f()
,
the value of “thisBinding” is the object obj.
// create a object, with one property p1 const jj = { "p1": 3 }; // make property p2 to be a function, which simply return thisBinding jj.p2 = function () { return this; }; // show jj console.log(jj); // { p1: 3, p2: [Function] } console.log(jj === jj.p2()); // true because p2 is a function that returns 「this」, which is jj
How this
keyword gets its value depends on many things. For detail, see
this Binding
JavaScript Object Model
JavaScript object model is very different from Java, Python, Ruby.
For detail, see: Object Overview
Browser Console Object Syntax Error?
JavaScript Object and Inheritance
- Object Tutorial
- Object Overview
- Object Type
- Test If a Value is Object Type 🚀
- Find Object's Type
- Prototype and Inheritance
- Prototype Chain
- Is in Prototype Chain?
- Get/Set Parent
- Show Parent Chain 🚀
- Create Object
- Object Literal Expr
- Create Object + Parent
- Prevent Adding Property
- Clone Object 🚀
- Test Object Equality 🚀
- Add Method to Prototype