JavaScript Properties and Methods Simplified with a Real-World Example - (Smartphone📱)

JavaScript is a flexible programming language that is frequently utilized in web development. If you're learning JavaScript, understanding the concepts of properties and methods is essential. Let's break down these concepts with a relatable real-world example: a smartphone.

Properties: Explaining the Object

In JavaScript, properties are pieces of information about an object. Think of them as characteristics or attributes that describe the object.

Real-world Example: Properties of Smartphones

Assume you own a smartphone. Some properties that describe this smartphone might include:

• Brand: The brand of the smartphone (e.g., "Samsung").
• Model: The model of the smartphone (e.g., "Samsung Galaxy S24 Ultra").
• Battery Life: The battery life of the smartphone (e.g., "10 hours").
• Color: The color of the smartphone (e.g., "Titanium Orange").

These properties provide essential information about the smartphone. In JavaScript, you might represent these properties like this:

const smartPhone = {
  brand: "Samsung",
  model: "Samsung Galaxy S24 Ultra",
  batteryLife: "10 hours",
  color: "Titanium Orange",
};        

Methods: Actions the Object Can Perform

Methods are actions or functions that an object can perform. They define what the object can do.

Real-life Example: Methods of Smartphones

Using our smartphone as an example again, think about the different things you can do with it.

• makeCall( ): The action of making a phone call.
• sendText( ): The action of sending a text message.
• playMusic( ): The action of playing music.

In JavaScript, you can define these actions as methods of the smartphone object:

const smartPhone = {
  brand: "Samsung",
  model: "Samsung Galaxy S24 Ultra",
  batteryLife: "10 hours",
  color: "Titanium Orange",

  makeCall: function (number) {
    console.log("Calling " + number);
  },

  sendText: function (message) {
    console.log("Sending text: " + message);
  },

  playMusic: function (song) {
    console.log("Playing song: " + song);
  },
};        

Utilizing Properties and Methods:

Now that you know how properties and methods function, let's look at some examples of how to utilize them:

• Accessing properties: You can retrieve the values of an object's properties.

console.log(smartPhone.brand); // Output: Samsung
console.log(smartPhone.model); // Output: Samsung Galaxy S24 Ultra
console.log(smartPhone.batteryLife); // Output: 10 hours
console.log(smartPhone.color); // Output: Titanium Orange        

• Using methods: You can call the methods to perform actions.

smartPhone.makeCall("707xxxxxxx"); // Output: Calling 707xxxxxxx 
smartPhone.sendText("Hello Duniya"); // Output: Sending text: Hello Duniya
smartPhone.playMusic("Baby Shark"); // Output: Playing song: Baby Shark        

Summary:

• Properties: Characteristics of the object that describe it (e.g., brand, model, battery life, color).
• Methods: Actions the object can perform (e.g., make a call, send a text, play music).

By understanding properties and methods, you can create more dynamic and functional objects in JavaScript. Just like a smartphone has attributes and actions, JavaScript objects can store data and perform tasks, making your code more powerful and flexible.

Thank you for reading my article! For more updates and useful information, feel free to connect with me on LinkedIn and follow me on Twitter and GitHub. I'm excited to exchange insightful ideas and interact with other experts who share my interests.