Intro ES6

ECMASCRIPT - for JavaScript standardization

The European Computer Manufacturers Association (ECMA)

Use Cases

ES6 Variable

Interview

  • In programming, a variable is a named container that stores data.
  • It helps reuse and manipulation during program execution.
  • For example: let age = 25; stores the value 25 in a variable called age.

Syntax
var snacks = "Milk Bikis";

👉 Variable Type → var
👉 Variable Name → snacks
👉 Value → "Milk Bikis"

Variable Naming Conventions
JavaScript is Dynamically Typed
Scope in JavaScript
Types of Scope
  1. Global Scope
  2. Local Scope
Global Scope
Local Scope

👉 Function Scope → function உள்ளே.
👉 Block Scope → for loop, while loop உள்ளே.

Interview

  • Global Scope → Variable can be accessed anywhere in the program.
    Example: var x = 10; (x is available everywhere).

  • Local Scope → Variable can be accessed only inside a function or block.
    Example: let y = 20; inside a function (y can’t be used outside).

var Keyword Drawbacks
let Keyword

👉 Local Scope

  1. Function Scope
  2. Block Scope
const Keyword

👉 Example in Array:
const array-க்குள் values push செய்யலாம், ஆனால் datatype & variable definition மாற்ற முடியாது.

Important Note
  1. If you didn't define them, they would be assigned to the global object
  2. If you use for var outside of a function, its belongs to the global scope
  3. If you use var inside of a function, its belongs to that function
  4. If use var inside of a block, i.e. a for loop, that variable is still available outside of that block.
Feature var let const
Scope Function scope Block scope Block scope
Re-declare Allowed Not allowed Not allowed
Re-assign Allowed Allowed Not allowed
Hoisting Hoisted (undefined) Hoisted (not initialized) Hoisted (not initialized)
Example var a = 5; let b = 10; const c = 15;
Overall Summary

A variable is just a container to hold data, and variable scope tells us where we can use it. If it’s in the global scope, we can access it anywhere, but if it’s local, it only works inside that function or block. Between the keywords, var has function scope and can be re-declared, let has block scope and can be reassigned, while const also has block scope but its value cannot change once assigned

Objects

🔹 Object Creation Methods

JS-ல் object உருவாக்க பல methods இருக்கு.
Common methods 👇

1️⃣ Constructor Object Method

const objectName = new Object();

2️⃣ Object Literal Syntax (Simple way)

const objectName = {};

👉 Example:

const person = {
  firstName: "Arun",
  age: 26
};
// Example of Object creation in object literal method
let car = {
    make: 'Toyota',
    model: 'Corolla',
    year: 2020,
    displayInfo: function () {
        console.log(`This ${this.make} ${this.model} was manufactured in ${this.year}`);
    }
}

car.displayInfo();

Syntax Explanation:

🔹 Object Basics

👉 Example:

const person = {
  firstName: "Arun",
  age: 26
};
🔹 Object Properties & Methods

👉 Example:

const person = {
  firstName: "Arun",
  lastName: "Selvam",
  fullName: function() {
    console.log(this.firstName + " " + this.lastName);
  }
};

this keyword

Why use this.firstName instead of person.firstName inside the method?

We use this.firstName instead of person.firstName so the method can work on any object that calls it, not just one fixed object. this gives flexibility and re-usability.

Why this keyword not working arrow function?

The this keyword doesn’t work in arrow functions because arrow functions don’t have their own this binding.
They inherit this from the surrounding (lexical) scope, unlike normal functions which get their own this based on how they are called.

🔹 Accessing Object Values
person.firstName;    // property
person.fullName();   // function (method)
🔹 Template Literals with Object

👉 Backtick ` + ${} வைத்து values print செய்யலாம்.

const person = {
  firstName: "Arun",
  lastName: "Selvam",
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
};
🔹 Modern Method Shortcut
const person = {
  firstName: "Arun",
  lastName: "Selvam",
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};
🔹 Object Merging
const person = { firstName: "Arun", age: 26 };

const personMethod = {
  yearOfBirth() {
    return new Date().getFullYear() - this.age;
  }
};

👉 Merging Syntax

Object.assign(target, source);
Object.assign(person, personMethod);
🔹 Object Cloning
Object.assign({}, source);
Object.assign({}, person);

✅ Modern Way → Spread Operator

const finalObject = { ...person, ...personMethod };
🔹 Delete Object Property / Method
delete objectName.key;
delete person.age;
🔹 Object Property Initializer
function getFullName(firstName, lastName) {
  return {
    firstName,   // firstName : firstName
    lastName,    // lastName  : lastName
  }
}
🔹 Object Destructuring
const { key } = objectName;

Example:

const { firstName, lastName } = person;

✅ Default Value Assign

const { favColor = "red" } = person;  // default value

✅ Rename Property

const { oldName: newName } = objectName;
const { firstName: myFirstName, lastName } = person;

✅ Rest Operator

const { key, ...rest } = objectName;
const { firstName, lastName, ...otherInfo } = person;