An object is a complex data type, that stores values and lets them be accessible with a specific key. A key/value combination inside an object is called a property.
JavaScript is an object-oriented programming language. This means that nearly every value is an object. Some kinds of values are called primitives, and they are seen as the "foundation", as simple data types. These primitives are strings, numbers, booleans, null, and undefined.
(Note that apart from booleans, null and undefined, all primitives are secretly objects as well, because only objects can have methods - you have String.split, Number.toString, etc.)
There are also many other data types, which are a specific kind of object:
- Arrays store values in an indexed fashion, and guarantee order (unlike objects)
- Functions receive values, execute code, and may return a value for later use
- Sets are similar to an array, but store only unique values
An object literal, however, is what many people think of when they think "object". It looks like this:
const myObject = {
name: "Jack",
cool: false,
friends: 0
pets: ["Dog", "Cat", "Snake"]
};
You can see that object properties are in the format of key: value, with a comma , afterwards if there are more properties (in ES6, trailing commas are allowed).
Objects can also contain methods:
const myObject = {
name: "Jack",
sayHello: function() {
console.log(`Hello, my name is ${this.name}!`);
}
};
Note: When making methods within an object, the highest-level function (in this case, the part directly after sayHello), must be an ES5-style function in order for references to this to function correctly. If nested functions (like setTimeout) need to refer to the object as well, they must be ES6-style functions, because arrow functions (=>) do not carry their own this binding.
Objects can also be constructed using constructors (ES5) or classes (ES6).
A constructor needs to be an ES5 function, and within it, you assign all the properties (usually from passed parameters):
function MyObject(name, cool) {
this.name = name;
this.cool = cool;
}
var jack = new MyObject("Jack", false);
var bob = new MyObject("Bob", true);
console.log(jack);
console.log(bob);
.as-console-wrapper { max-height: 100% !important; top: auto; }
To attach methods to new objects, you can attach them to the prototype of the constructor:
function MyObject(name, cool) {
this.name = name;
this.cool = cool;
}
MyObject.prototype.sayHello = function() {
console.log(`Hello, I am ${this.name}`);
};
var jack = new MyObject("Jack", false);
var bob = new MyObject("Bob", true);
jack.sayHello();
bob.sayHello();
ES6 classes are a restyling of the constructor. You have a constructor function, where you define all your properties, and you place all your other methods in the same place. Here's our MyObject constructor transformed into an ES6 class:
class MyObject {
constructor(name, cool) {
this.name = name;
this.cool = cool;
}
sayHello() {
console.log(`Hello, I am ${this.name}`);
}
}
let jack = new MyObject("Jack", false);
let bob = new MyObject("Bob", true);
jack.sayHello();
bob.sayHello();
You can also place objects into other data containers - like objects and arrays. If you place an object inside an object, you have a nested object:
const parent = {
nested: {
value: "I am nested"
}
};
console.log(parent.nested.value);
As you can see above, you access different properties and methods of objects by using dot notation. But what if you have a property you want to get, but the property name is stored in a variable? You need to use dynamic property notation, which is also called square bracket notation (because it involves square brackets []):
const obj = {
aReallyObscureKey: "Hello!"
};
const key = "aReallyObscureKey";
console.log(obj[key]);
Arrays can also hold objects:
const arrayOfObjects = [{
name: "Jack",
cool: false
}, {
name: "Bob",
cool: true
}];
console.log(arrayOfObjects);
.as-console-wrapper { max-height: 100% !important; top: auto; }
Hopefully this helps. Here's a few links to help learn more about objects:
