JavaScript Objects

Hey folks, hope you all are doing well! In today's article, we're gonna discuss JavaScript Objects.

Object Definition

A pair of curly braces { } containing comma , separated key-value pairs represent an object. It is a collection of unordered properties.

The key-value pair inside objects is called property.

Any property which contains a function definition is known as a method.

const myObj = {
        firstName : 'Bobby',
        lastName : 'Sadhwani'  //  property
        fullName : function () {
            return `My name is ${this.firstname} ${this.lastname}`
        }  // method
}

console.log(myObj.fullName())  //  My name is Bobby Sadhwani

The key must either be a string or a valid identifier. Values can be of any type.

Creating Objects

Using object literal { }

const myObj = { name: 'Bobby', age: 23 }

Using object constructor with new keyword

const myObj = new Object()

myObj.name = 'Bobby'
myObj.age = 23

Adding properties

Dot Notation ' . '

myObj.colorOne = 'blue'

Bracket Notation ' [ ] '

 myObj['colorTwo'] = 'red'

Accessing properties

Dot Notation ' . '

myObj.colorOne  //  'blue'

Bracket Notation '[ ]'

myObj['colorTwo']  //  'red'

Always write key inside quotes (' ') while using Bracket notation.

Adding methods

Dot Notation ' . '

const myObj = { name: 'Bobby' }
myObj.greet =  function(){  return `Hello, ${this.name} this side` }

Bracket Notation '[ ]'

const myObj = { name: 'Bobby' }
myObj['greet'] = function(){  return `Hello, ${this.name} this side` }

Accessing Methods

Dot Notation ' . '

const myObj = { 
name: 'Bobby Sadhwani', 
greet: function(){ return `Hii, I am ${this.name}`}
// ES6 shorthand syntax for defining methods inside an object
job(){ return 'Hii, I am a Web Developer' }
}

console.log(myObj.greet())  //  Hii, I am Bobby Sadhwani
console.log(myObj.job())  //  Hii, I am Web Developer

In ES6, shorthand syntax was introduced for defining methods inside an object. In this syntax colon(:) and function keyword are omitted.

Limitations of using Dot notation ' . '

1. Any key that is not a valid identifier cannot use dot notation. For example, a key that has a space or a hyphen, that starts with a number, can only be accessed using the square bracket notation.

  myObj.123  // ❌ SyntaxError
  myObj.123 name  // ❌ SyntaxError
  myObj.name-123  // ❌ SyntaxError

  myObj['123']  // ✅ 
  myObj['123 name']  // ✅ 
  myObj['name-123']  // ✅

You can skip quotes (' ') if key is a number.

1. A dynamic key or a key that is held inside a variable can only be added or accessed using the square bracket notation.

Adding => Dot notation . will create a new property with the variable name instead of with the variable value.

let attribute = 'age'

const myObj = {
name: 'Bobby',
}

myObj.attribute = 23  //  { name: 'Bobby', attribute: 23 }
myObj[attribute] = 23  //  { name: 'Bobby', age: 23 }

Accessing =>

let attribute = 'age'

const myObj = {
name: 'Bobby',
age: 23
}

console.log(myObj.attribute)  //  undefined
console.log(myObj[attribute])  //  23

When you're referencing a variable in the Bracket Notation, you need to skip the quotes (' ').

Getters and Setters

Getters => It is used to get the value of a property. get keyword is used to define a getter method.

let user = {
name: "Bobby",
surname: "Sadhwani",

get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

console.log(user.fullName);  //  Bobby Sadhwani

Setters => It is used to set the value of a property. set keyword is used to define a setter method.

let user = {
name: "Bobby",
surname: "Sadhwani",

get fullName() {
    return `${this.name} ${this.surname}`;
  },

set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

user.fullname = "Virat Kohli"
console.log(user.fullname)  //  Virat Kohli

Final Words

And that’s it for this blog.

I hope you’ve found this blog a good referencing resource and thank you for reading.

If this blog was helpful, please do like, comment and share. Thanks, see you in the next article.✌️