JavaScript objects

Javascript objects

What is an Object in Javascript?

Everything else that is not a Primitive type is an Object type.

In JavaScript, an object is a standalone entity, an unordered collection of related data in the form of “key: value” pairs.
keys can be variables or functions and are called properties (for variables) and methods (for functions).

All objects in JavaScript are descended from Object. All objects inherit methods and properties from Object.prototype, although they may be overridden.

Object data types characteristics

  • Objects are mutable by default
  • Objects have unique identities and are compared by reference
  • Variables hold references to objects

Javascript objects are reference data types

A JavaScript Object is a reference data type.
Variables that are assigned by reference points to a location in memory, which is accessible only by javascript itself. The variables don’t actually contain the value.

So when you do:
objA = objB
you only copy the reference pointer to object in memory.

Object Properties

JavaScript objects can have properties, which define their characteristics.
An object property can be any valid JavaScript string or anything that can be converted to a string, including the empty string.

Accessing Object Properties

You can access the properties of the object in the following ways:

  • objectName.propertyName
  • objectName[“propertyName”]
  • Or if an object have multiple properties, You can use the bracket notation with for…in to iterate over all the enumerable properties of an object.
var book1 = {
    title: "First book title",
    author: "John Doe",
    pages: 500,
    type: "Fiction",
    "e book": "yes"
};
console.log(book1.title);
console.log(book1["title"]);
//Result
First book title
First book title


Object.length

Has a value of 1.
Object.prototype
Allows the addition of properties to all objects of type Object.

Object methods

Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.

var book1 = {
    title: "First book title",
    author: "John Doe",
    pages: 500,
    type: "Fiction",
    "e book": "yes",
    getAuthor: function(){
        return this.author;
    }
};

Accessing Object Methods

You access an object method with the following syntax:
objectName.methodName()

var book1 = {
    title: "First book title",
    author: "John Doe",
    pages: 500,
    type: "Fiction",
    "e book": "yes",
    getAuthor: function(){
        return this.author;
    }
};
console.log(book1.getAuthor());
//Result 
John Doe

this is the book object that “owns” the getAuthor() function.
this.author means the author property of this object.

Object methods examples

Object.assign()
Copies the values of all enumerable own properties from one or more source objects to a target object.

Object.create()
Creates a new object with the specified prototype object and properties.

How to create an object in JavaScript?

You can create an object:

  1. using an object initializer { … }
  2. using a constructor function and then instantiate an object invoking that function in conjunction with the new operator

1. with figure brackets { … } with an optional list of properties (“key: value” pairs)

The key is a string, called “property name“.
The property names can be strings or numbers. If the property name contains several separate words, the property names must be enclosed in quotes.

var book1 = {
    title: "First book title",
    author: "John Doe",
    pages: 500,
    type: "Fiction",
    "e book": "yes"
};

2. Using Constructor

Object()
The Object constructor creates an object wrapper for the given value.
Objects of the same type are created by calling the constructor function with the new keyword:

function Book(title, author, pages, type){
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.type = type;
};
book2 = new Book("Second book", "Mike", 299, "Non fiction");
//Result
Non fiction

Also, You can declare Strings, Numbers, and Booleans as Objects, like:

var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object

The String global object is a constructor for strings or a sequence of characters.

It’s not recommended to do this, because they complicate your code and slow down the execution speed.

Copying Objects in JavaScript

What is the difference between window, screen, and document in Javascript?

window Object and document Object are not the same things!

Window Object

The window Object is the first thing that gets loaded into the browser, the root of everything. This window object has the majority of the properties like length, innerWidth, innerHeight, location, history etc

Document Object

The document Object is the top DOM object, like your HTML, PHP, or other documents that will be loaded into the browser. The document actually gets loaded inside the window object and has own properties like title, URL, cookie, etc

Screen Object

The screen Object just contains information about the screen dimensions. Screen properties width and height are the full-screen dimensions.

Sets in JavaScript

Set objects are collections of unique values. Set can store any types of values whether primitive or objects.
Set in ES6 are ordered! Read more here about sets in JavaScript.

Creates a new Set object

Set()

Set Methods

  • Set.prototype.add() – It adds new elements with a specified value at the end of the Set object.
  • Set.prototype.delete() – It deletes an element with the specified value from the Set object.
  • Set.prototype.clear() – It removes all the element from the set.
  • Set.prototype.has() – It returns true if the specified value is present in the Set object.
  • Set.prototype.values() – It returns all the values from the Set in the same insertion order.
  • Set.prototype.forEach() – It executes the given function once for every element in the Set, in the insertion order.

Hello there!

I hope you find this post useful!

I'm Mihai, an online marketing specialist, very passionate about everything that means online marketing, focused on eCommerce.

If you have a collaboration proposal or need helps with your projects feel free to contact me. I will always be glad to help you!

Leave a Reply

Your email address will not be published. Required fields are marked *