JavaScript

Object - part 1

JavaScript has a datatype called object. JavaScript has two ways to create objects:

Object literals

The object literal method of creating objects starts with a standard variable definition.

In real life an object could be a car, house, person and so on

When vi make an object we use { }

const person = { }

In the right side of the statement, you’ll use curly braces with comma-separated name/value pairs

const person = {eyes: 2, feet: 2, hands: 2, eyeColor: “blue”};

The house object

If we look at a ahouse. All houses have the same properties, but the property values differ from house to house. All house have the same methods, but the methods are performed at different times.

objects

The object will look like this:

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null
};

house is the object. color, rooms, pool and owners is key. "red", 2, false, null is values

Properties

The name:values pairs in JavaScript objects are called properties:

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null
};

The properties would be color, rooms, pool, owners and the propertie values would be "red", 2, false and null

Accessing Object Properties

We have an obejct, but we want to use the data on your site. we can use dot notation to do that

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null
};
console.log(house.color); //prints the color of the house
console.log(house.rooms); //prints the rooms of the house

Or bracket notation

console.log(house['color']); //prints the color of the house
console.log(house['rooms']); //prints the rooms of the house

Methods

Objects can also have methods, which are actions that can be performed on objects. They are stored in properties as function definitions.

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null,
bedrooms: function() {
return this.rooms - 1;
}
};

The this Keyword

In a function definition, this refers to the "owner" of the function.

Accessing Object Methods

You access an object method with the following syntax:

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null,
bedrooms: function() {
return this.rooms - 1;
}
};
console.log(house.bedrooms());

Remove a property

You can remove a property in your object

const house = {
color: "red",
rooms: 2,
pool: false,
owners: null,
bedrooms: function() {
return this.rooms - 1;
}
};
delete house.bedrooms;
console.log(house);

Object - part 2

Object constructor - part 3

We have talked about the object literal method, we will now talk about an Object constructor.This method declares the object using new Object and then populates it with properties.

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}

Create an object

Objects of the same type are created by calling the constructor function with the new keyword:

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Jane", "Doe", 48, "green");

Adding a Property to an Object

Adding a new property to an existing object is easy:

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Jane", "Doe", 48, "green");
myFather.nationality = "Danish";

DO NOT CHANGE THE BUILT IN OBJECTS!

Adding a Method to an Object

Adding a new method to an existing object is easy:

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Jane", "Doe", 48, "green");
myFather.nationality = "Danish";
myFather.name = function () {
return this.firstName + " " + this.lastName;
};

DO NOT CHANGE THE BUILT IN OBJECTS!

Adding a Property to a Constructor

You need to write it in the constructor:

function Person(first, last, age, eye, language) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = language;
}

DO NOT CHANGE THE BUILT IN OBJECTS!

Adding a Method to a Constructor

You need to write it in the constructor:

function Person(first, last, age, eye, language) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = language;
this.name = function() {
return this.firstName + " " + this.lastName;
};
}

DO NOT CHANGE THE BUILT IN OBJECTS!

Object literals vs Object constructor

With the constructor function notation you create an object that can be instantiated into multiple instances (with the new keyword), while the literal notation delivers a single object.

Example

See the Pen add a user (obejcts) by Dominoeffekten (@dominoeffekten) on CodePen.