DEV Community

PRIYA K
PRIYA K

Posted on

Objects in JavaScript

Varibles stores values and function

Object
Keys and Values inside curly braces{}
States and Behavior
are containers for Properties and Methods
Methods are functions.
Properties can be added,changed,deleted.

Objects are objects
Maths are objects
Dates are objects
Arrays are objects
Maps are objects
Sets are objects
RegExp are Objects
Errors are Objects
Enter fullscreen mode Exit fullscreen mode

All JavaScript values, except primitives, are objects.

Example

const car = {
  type: "Fiat",
  model: "500",
  color: "white"
};
Enter fullscreen mode Exit fullscreen mode

Expplanation
car => object
Key or Properties =>type,model,color
Value or Properties Value => Fiat,500,white

Create an empty object,add the properties later
Example

// Create an Object
const person = {};

// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Enter fullscreen mode Exit fullscreen mode

-Using the Object Literal
Example

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
console.log(person.age)
Enter fullscreen mode Exit fullscreen mode

-Using the new keyword
Example

const person = new Object({
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
console.log(person.age)
Enter fullscreen mode Exit fullscreen mode

Explanation
No need to use New Object()
for simplicity and execution speed ,use only object literal

Object.create()
creates an object from the existing objects
Example

const person = {
  firstName: "John",
  lastName: "Doe"
};

// Create new Object
const man = Object.create(person);
man.firstName = "Peter";
console.log(person.firstName + "and" + man.firstName)
Enter fullscreen mode Exit fullscreen mode

Object FromEntries()
Create an object from key/value pairs

Example

const fruits =[
    ["apples",200],
    ["mango",180],
    ];
const myobj = Object.fromEntries(fruits);
console.log(myobj.mango)
Enter fullscreen mode Exit fullscreen mode

Object Properties
Access object Properties in two ways

  • Dot Notation
  • Bracket Notation
  • Expression

Dot Notation
objectName.propertyName

person.firstname
Enter fullscreen mode Exit fullscreen mode

Bracket Notation
objectName["PropertyName"]

person["firstName"]
Enter fullscreen mode Exit fullscreen mode

Expression

let age = person[x];
Enter fullscreen mode Exit fullscreen mode

Object Methods
Object Methods are actions performed on objects

const person = {
  firstName: "John",
  lastName : "Doe",
  age      : 50,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
Enter fullscreen mode Exit fullscreen mode

Explanation
'this' refers to object.
'this' refers to person object.

Changing Properties
Change the value of Property

const person = {
  firstName: "John",
  lastName : "Doe",
  age      :  50
};
person.age = 10;

console.log(person.age)
Enter fullscreen mode Exit fullscreen mode

Adding new Properties

const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
};

person.nationality = "English";
console.log(person.nationality)
Enter fullscreen mode Exit fullscreen mode

Deleting Properties

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
};

delete person.age;
console.log(person.age)
Enter fullscreen mode Exit fullscreen mode

Output
Undefined

(or)

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
};

delete person["age"];
Enter fullscreen mode Exit fullscreen mode

Explanation
The delete keyword deletes both the value and the property.
After deleting, the property is removed. Accessing it will return undefined.

Check if a property exists

const person = {
  firstName: "John",
  lastName : "Doe",
  age      :  50
};

let result = ("firstName" in person);
console.log(result)
Enter fullscreen mode Exit fullscreen mode

Nested Objects

const myObj = {
  name: "John",
  age: 30,
  myCars: {
    car1: "Ford",
    car2: "BMW",
    car3: "Fiat"
  }
}
console.log(myObj.myCars.car2)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)