JavaScript: Object Basics
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 nn = {"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 nn = {"cat":19, "dog":20, "rabbit":25}; // Accessing property, bracket notation nn["cat"] // 19 // Accessing property, dot notation nn.cat // 19
[see Property Dot Notation / Bracket Notation]
Add Property
Create a empty object, then add some properties:
const oj = {}; // creating a object oj.c1 = 3; // add a property c1 oj.c2 = 4; console.log(oj); // { c1: 3, c2: 4 }
Change a Property's Value
const obj = {"a": 1, "b": 2}; obj.a = 99; console.log( obj); // { a: 99, b: 2 }
Delete a Property
To delete a property, use the
delete
[see Delete operator]
.
const nn = {"cat":19, "dog":20, "rabbit":25}; delete nn.cat; console.log(nn); // { dog: 20, rabbit: 25 }
Enumerate Object's Properties
const nn = {"a":19, "c":20, "b":25}; // loop thru object's own enumarable properties Object.keys(nn).forEach( (x => { console.log(x, nn[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":19, "b":20, "c":[3,4]}; console.log( x["c"][0]); // prints 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}; // the y is array console.log( x["c"][0] ); // prints 3
The syntax for accessing elements can be chained.
// syntax for accesing array/hash can be chained console.log( {"a":19, "b":20, "c":[3,4]}["c"][0] ); // prints 3
Following is another example of JavaScript object. This is a JSON format.
// JSON format is basically nested js objects const myStructure = { name: { first: "Cat", last: "bird" }, age: 19, hobbies: [ "shopping", "dancing" ] };
JSON is essentially a (nested) JavaScript object (including array) where the leaf values are string or number.
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.
j = {}; // create a object j.m = function (x) {return x + 1;}; // create a method named m // calling the method const y = j.m(3); console.log(y); // prints 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 obj = {"p1":3}; // make property p2 to be a function, which simply return 「this」 obj.p2 = function () { return this; }; // show obj console.log( obj ); // { p1: 3, p2: [Function] } console.log( obj === obj.p2() ); // true // returns true because p2 is a function that returns 「this」, which is obj
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?

see Browser JS Console Object Syntax Error