JavaScript · Lesson 13 / 32 · தமிழ்

JavaScript Objects

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesRunnable JavaScriptPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

Objects group related properties. Reading a property, updating it, and sharing a reference are separate ideas: two bindings can refer to the same object.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

Objects என்னன்னு தெரியுமா?

Object என்பது key-value pairs (properties)-ஆல ஆன ஒரு collection. Objects JavaScript-ன் fundamental building blocks — கிட்டத்தட்ட எல்லாமே object.

Objects Create பண்றது

JavaScript reference fragmentCODE

// Object literal (most common)
const person = {
  name: "Alice",
  age: 30,
  isAdmin: false,
  greet() {                    // shorthand method
    return `Hi, I'm ${this.name}`;
  }
};

// Properties access பண்றது
console.log(person.name);      // dot notation
console.log(person["age"]);    // bracket notation
console.log(person.greet());   // "Hi, I'm Alice"

// Properties add மற்றும் delete பண்றது
person.email = "alice@example.com";
delete person.isAdmin;

Destructuring

JavaScript reference fragmentCODE

const { name, age, email = "unknown" } = person;
console.log(name);  // "Alice"
console.log(age);   // 30

// Destructuring-ல rename பண்றது
const { name: fullName } = person;
console.log(fullName); // "Alice"

Spread மற்றும் Object Methods

JavaScript reference fragmentCODE

const defaults = { theme: "light", lang: "en" };
const userPrefs = { theme: "dark" };

// Spread — objects merge பண்ண (later keys win)
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'en' }

const car = { make: "Toyota", model: "Camry", year: 2023 };

Object.keys(car);    // ["make", "model", "year"]
Object.values(car);  // ["Toyota", "Camry", 2023]
Object.entries(car); // [["make","Toyota"], ...]

for (const [key, value] of Object.entries(car)) {
  console.log(`${key}: ${value}`);
}

03 / Read & predict

முழுமையான உதாரணம்

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

const learner = { name: "Kavi", completed: 2 };
const sameLearner = learner;
sameLearner.completed += 1;
console.log(learner.name);
console.log(learner.completed);

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

Kavi
3

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Create a shallow copy with {…learner}, then change the copy's completed value.

விடை மற்றும் விளக்கம்

The original completed remains 3 because the top-level object is copied. Nested objects would still be shared.

தவிர்க்க வேண்டிய தவறு: const does not freeze an object. Avoid assuming that assigning an object creates a new independent copy.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.