JavaScript/Object Programs/Program

Object Basics

Program demonstrating object creation and manipulation

JavaScriptBeginner
JavaScript
Try
// Method 1: Object literal
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

console.log("Person:", person);
console.log("Name:", person.name);
console.log("Age:", person.age);

// Method 2: Adding properties
person.email = "[email protected]";
person["phone"] = "123-456-7890";

console.log("\nAfter adding properties:", person);

// Method 3: Object with methods
let calculator = {
    num1: 10,
    num2: 5,
    add: function() {
        return this.num1 + this.num2;
    },
    subtract: function() {
        return this.num1 - this.num2;
    },
    multiply() {  // ES6 shorthand
        return this.num1 * this.num2;
    }
};

console.log("\nCalculator:");
console.log("Add:", calculator.add());
console.log("Subtract:", calculator.subtract());
console.log("Multiply:", calculator.multiply());

// Method 4: Object constructor
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        return "Hello, I'm " + this.name;
    };
}

let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 30);

console.log("\nPerson 1:", person1.greet());
console.log("Person 2:", person2.greet());

// Method 5: Object.keys, Object.values, Object.entries
let student = {
    name: "Jane",
    grade: "A",
    subjects: ["Math", "Science"]
};

console.log("\nObject methods:");
console.log("Keys:", Object.keys(student));
console.log("Values:", Object.values(student));
console.log("Entries:", Object.entries(student));

// Method 6: Object destructuring
let { name, age } = person;
console.log("\nDestructured:", name, age);

// Method 7: Spread operator
let personCopy = { ...person };
personCopy.age = 31;
console.log("\nOriginal:", person.age);
console.log("Copy:", personCopy.age);

Output

Person: { name: 'John', age: 30, city: 'New York' }
Name: John
Age: 30

After adding properties: { name: 'John', age: 30, city: 'New York', email: '[email protected]', phone: '123-456-7890' }

Calculator:
Add: 15
Subtract: 5
Multiply: 50

Person 1: Hello, I'm Alice
Person 2: Hello, I'm Bob

Object methods:
Keys: [ 'name', 'grade', 'subjects' ]
Values: [ 'Jane', 'A', [ 'Math', 'Science' ] ]
Entries: [ [ 'name', 'Jane' ], [ 'grade', 'A' ], [ 'subjects', [ 'Math', 'Science' ] ] ]

Destructured: John 30

Original: 30
Copy: 31

This program demonstrates object creation and manipulation in JavaScript.

Method 1: Object Literal

Simplest way to create object:

javascript
let obj = {
    key: value,
    key2: value2
};

Method 2: Adding Properties

Two ways to add:

  • Dot notation: obj.property = value
  • Bracket notation: obj["property"] = value

Bracket notation useful for:

  • Dynamic property names
  • Properties with special characters
  • Properties stored in variables

Method 3: Object Methods

Functions as object properties:

javascript
let obj = {
    method: function() {
        return this.property;
    },
    shorthand() {  // ES6
        return this.property;
    }
};

this keyword:

  • Refers to the object itself
  • Context-dependent

Method 4: Constructor Function

Create multiple objects:

javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
}
let person = new Person("John", 30);

Method 5: Object Methods

Built-in Object methods:

  • Object.keys(obj): Array of keys
  • Object.values(obj): Array of values
  • Object.entries(obj): Array of [key, value] pairs

Method 6: Destructuring

Extract properties:

javascript
let { name, age } = person;

Method 7: Spread Operator

Shallow copy:

javascript
let copy = { ...original };

When to Use:

  • Literal: Simple objects, one-time use

  • Constructor: Multiple similar objects

  • Class: Modern OOP (ES6)

  • Spread: Copying, merging objects

Next
Classes (ES6)