ES6 म्हणजे काय? JavaScript च्या नवीन युगाची सुरुवात

नमस्कार! JavaScript शिकत असाल तर ES6 हा शब्द ऐकला असेल. पण ES6 म्हणजे काय? हे समजले नाही असेल. चिंता करू नका. हा लेख तुमच्यासाठी आहे. मी NIVA Growth Consultants च्या वतीने सोप्या मराठीत सांगतो.

ES6 म्हणजे ECMAScript 2015. हे JavaScript चे एक मोठे अपडेट आहे. 2015 मध्ये हे आले. यामुळे JavaScript अधिक शक्तिशाली आणि सोपे झाले. आधीचे JavaScript (ES5) मध्ये बरेच फीचर्स नव्हते. ES6 ने ते भरले.

ES6 चे महत्त्व काय?

• सोपे कोड लिहिणे: कमी ओळींमध्ये जास्त काम.

• आधुनिक वेब डेव्हलपमेंट: React, Node.js सारख्या फ्रेमवर्क्स ES6 वापरतात.

• ब्राउजर सपोर्ट: आता सर्व ब्राउजर ES6 समर्थन देतात.

जर तुम्ही वेब डेव्हलपर आहात, तर ES6 शिकणे आवश्यक आहे. हे प्रॅक्टिकल आहे. प्रत्येक फीचरसह कोड उदाहरण देईन.

ES6 ची मुख्य फीचर्स

ES6 मध्ये 20 हून अधिक नवीन गोष्टी आहेत. मी मुख्य 10 सांगतो. प्रत्येकी उदाहरणासह.

1. Let आणि Const

आधी var वापरायचे. पण var चे scope issues होते. let आणि const ने ते सोडवले.

• let: Variable चे block scope.

• const: Constant value, बदलता येत नाही.

उदाहरण:

// ES5 (var)
var x = 10;
if (true) {
  var x = 20;
}
console.log(x); // 20 (global scope)

// ES6 (let)
let y = 10;
if (true) {
  let y = 20;
}
console.log(y); // 10 (block scope)

const z = 30;
// z = 40; // Error!

हे वापरा loops मध्ये. for loop मध्ये i चे issues सुटतात.

2. Arrow Functions

Arrow functions (=>) ने functions सोपे केले. this keyword चे issues सुटतात.

उदाहरण:

// ES5
const add = function(a, b) {
  return a + b;
};

// ES6
const add = (a, b) => a + b;

// Object method

const person = {
  name: 'राहुल',
  greet: function() {
    console.log(this.name); // Works
  }.bind(this) // ES5 मध्ये bind लागते
};

const personES6 = {
  name: 'राहुल',
  greet: () => console.log(this.name) // Arrow ने this preserve होते
};

Array methods जसे map, filter मध्ये super useful.

3. Template Literals

String interpolation सोपे. ${} वापरा.

उदाहरण:

// ES5
var name = 'अमित';
var msg = 'नमस्कार ' + name + '!';

// ES6
const name = 'अमित';
const msg = `नमस्कार ${name}!`;

const age = 25;
const fullMsg = `तुमचे नाव ${name} आणि वय ${age} आहे.`;

Multi-line strings सोप्या.

4. Destructuring

Objects आणि arrays मधून values सोप्या पद्धतीने काढा.

उदाहरण (Array):

const colors = ['लाल', 'हिरवा', 'निळा'];
const [first, second] = colors;
console.log(first); // लाल

उदाहरण (Object):

const user = {
  name: 'प्रिया',
  age: 28,
  city: 'मुंबई'
};
const {name, age} = user;
console.log(name, age); // प्रिया 28

Functions मध्ये params साठी super.

5. Default Parameters

Functions मध्ये default values.

उदाहरण:

// ES5
function greet(name) {
  name = name || 'मित्र';
  console.log('नमस्कार ' + name);
}

// ES6
function greet(name = 'मित्र') {
  console.log(`नमस्कार ${name}`);
}
greet(); // नमस्कार मित्र
greet('सिता'); // नमस्कार सिता

6. Spread Operator (...)

Arrays आणि objects copy करा, merge करा.

उदाहरण:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1,2,3,4,5]

const obj1 = {a: 1};
const obj2 = {...obj1, b: 2};

// Function args
function sum(x, y, z) { return x+y+z; }
const numbers = [1,2,3];
console.log(sum(...numbers)); // 6

7. Classes

OOP सोपे. Prototype based आधी.

उदाहरण:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    return `नमस्कार, मी ${this.name}`;
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}

const stu = new Student('किरण', 20, 'A');
console.log(stu.greet());

React components साठी useful.

8. Modules (Import/Export)

Code organize करा. Files divide करा.

math.js:

export const pi = 3.14;
export function add(a,b) { return a+b; }

export default function multiply(a,b) { return a*b; }

main.js:

import multiply, {pi, add} from './math.js';
console.log(multiply(2,3));

Node.js आणि browsers मध्ये transpilers ने चालते.

9. Promises

Async code साठी. Callback hell टाळा.

उदाहरण:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('डेटा मिळाला');
    }, 1000);
  });
}

fetchData().then(data => console.log(data));

Async/await ES8 मध्ये, पण ES6 ने base दिला.

10. Rest Parameters

Functions मध्ये variable args.

उदाहरण:

function sum(...numbers) {
  return numbers.reduce((a,b) => a+b);
}
console.log(sum(1,2,3,4)); // 10

ES6 कसे वापरावे?

1. Browser console: Chrome DevTools मध्ये थेट चालवा.

2. Transpilers: Babel ने ES6 ला ES5 मध्ये convert करा.

3. Node.js: Version 6+ ने native support.

ब्राउजर सपोर्ट टेबल:

ब्राउजरसपोर्टChrome51+Firefox45+Safari10+Edge14+

CanIUse.com वर तपासा.

प्रॅक्टिकल टिप्स

• CodePen किंवा JSFiddle वर practice करा.

• ES6 to ES5 converter Babel online वापरा.

• Projects: Todo app ES6 ने बनवा.

उदाहरण Todo app snippet:

const todos = [];

function addTodo(text) {
  todos.push({text, done: false});
}

const newTodo = 'अभ्यास करा';
addTodo(newTodo);
console.log(todos);

ES6 नंतर काय?

ES6 नंतर ES7, ES8... आले. पण ES6 base आहे. आता TC39 ने yearly updates देतात.

निष्कर्ष

ES6 ने JavaScript बदलले. हे शिकल्याने तुमचे कोड clean, fast होईल. Practice करा. Projects बनवा.