Javascript Destructuring and spread operator in hindi

Post Views : 429

Introduction

हेलो दोस्तों आज हम इस post में javscript के Destructuring और spread operator के बारे में detail से example के साथ समझेंगे!. Spread और destructuring techniques ES6 में futured हुवी थी!.

Javascript Destructuring

Javascript में destructuring, arrays और objects से value को get करने और variable में assign करने का एक आसान तरीका है!. यह हमें एक syntax provide करता है जिससे हम array से values को  और objects से properties को अलग-अलग variable में unpack करने की अनुमति देता है!.
Destructuring को हम एक example के जरिये समजते है!.

Array Destructuring:

syntax:

let [var1, var2, ...rest] = array;

Example:

मान लीजिये हमारे पास numbers name का एक array है!.

let numbers = [1, 2, 3, 4, 5];

तो array से value को निकलने के लिए, हम इसके indexes के adhar पर value को array से निकल सकते है!. जैसे की

numbers[0]
numbers[1]
numbers[2]
numbers[3]
numbers[4]

लेकिन वह method पुरानी है और use करने का दूसरा बेहतर तरीका है array destructuring के इस्तेमाल करना जैसे की

let [ indexOne, indexTwo, indexThree, indexFour, indexFive ] = numbers;

ऊपर के done methods शामे ही results देंगे!
लेकिन क्या हो अगर हम array से किसी एक value को skip करना चाहते है तो destructuring में हम वह कैसे कर सकते है?
उसके लिए हमें ज्यादा कुछ  करने के जरुरत नहीं है!. just हमें जो element या value को skip करना चाहते वह empty space pass करना होता है, जैसे की आप निचे के examle में देख सकते है!.

let [ indexOne, indexTwo, indexThree, , indexFive ] = numbers;

ऊपर के example में देख सकते है हमने indexFour की value को skip किया है empty space set करके!.

Object Destructuring

Object destructuring, array destructuring की तरह ही है!.

syntax:

let { property1, property2, ...rest } = object;

मान लीजिये हमारे pass person name का एक object है जैसे की

let person = {
 name: 'John',
 age: 30,
 country: 'USA'
};

person object से हम properties को person.name और person.age और person.country से properties value को object से निकल सकते है!.
लेकिन इसके आलावा ham destructuring technique से better तरीके object की properties को access कर सकते है!.

Example:

let person = {
  name: 'John',
  age: 30,
  country: 'USA'
};

let { name, age, country } = person;

console.log(name);    // Output: John
console.log(age);     // Output: 30
console.log(country); // Output: USA

Variables rename

उसके आलावा हम destructuring के दरमियान variable rename बी कर सकते है ” : “ syntax का इस्तेमाल करके!.

Example:

let person = {
  name: 'John',
  age: 30,
  country: 'USA'
};

let { name: fullName, age: years, country: nation } = person;

console.log(fullName); // Output: John
console.log(years);    // Output: 30
console.log(nation);   // Output: USA

ऊपर के example में देख सकते है, default name variable को fullName variable के साथ renaming किया है, इसी तरह आप age और country variable के लिए बी देख सकते है!.

Set default variable

यदि array और object से निकाला गया value और property undefined है तो आप variable में default value assign कर सकते है!.

Example:

let person = {
  name: 'John',
  age: 30
};

// Destructuring with default values
let { name, age, country = 'Unknown' } = person;

console.log(name);    // Output: John
console.log(age);     // Output: 30
console.log(country); // Output: Unknown (default value)

ऊपर के example में देख सकते है. person name के  object में country name की property available नहीं है लेकिन destructuring के दौरान हम default variable के साथ property को set कर सकते है!.

Nested Destructuring

हम array और object को nested destructure कर सकते है!.

Example:

let data = {
  user: 'John',
  details: {
    age: 30,
    country: 'USA'
  }
};

let { user, details: { age, country } } = data;

console.log(user);    // Output: John
console.log(age);     // Output: 30
console.log(country); // Output: USA

ऊपर के example में data नामक object को दो properties के साथ defined किया गया है, “user” और “details”. details property एक खुद object है और इसमें “age” और “country” वाली properties है!.
फिर, Javascript में object destructuring का इस्तेमाल करके, variable “user”,”age”,”country” को data object से निकाला गया है!. यह  syntax आपको object और arrat से value को अलग-अलग variablee में unpack करने की अनुमति देता है!.

Functions Parameters Destructuring

Example:

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

let person = {
  name: 'John',
  age: 30
};

greet(person); // Output: Hello, John! You are 30 years old.

ऊपर के example में देख सकते है की greet name के function defined किया है, जिसमे ek person name का एक object parameter की रूप में पास किया है. और इस function में वह directly parameter list के अंदर object को destructuring कर देता है!.

Spread Operator (…)

Javascript में spread operator को three(…) dots के साथ represented किया जाता है!. ES6 में Spread Operator introduced हुवा था!. जो एक iterable ( जैसे की array और string) को अलग-अलग elements में expanded करने की अनुमति देता है!. spread operator इस्तेमाल दो array को  merge करने, array और object को copy करने के लिए किया जा सकता है!.

Usage of the Spread Operator

1. Copying Arrays:

एक array elements को दूसरे array में copy करने के लिए Spread Operator का इस्तेमाल कर सकते है!.

Example:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // Output: [1, 2, 3]

2. Concatenating Arrays:

दो arrays को एक single array variable में merge करने के लिए Spread Operator का इस्तेमाल कर सकते है!.

Example:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = [...array1, ...array2];

console.log(concatenatedArray); // Output: [1, 2, 3, 4, 5, 6]

3. Adding Elements to an Array:

Example:

const array = [1, 2, 3];
const newArray = [...array, 4, 5];

console.log(newArray); // Output: [1, 2, 3, 4, 5]

4. Copies of Objects

Example:

const originalObject = { name: 'John', age: 30 };
const copiedObject = { ...originalObject };

console.log(copiedObject); // Output: { name: 'John', age: 30 }

5. Merging Objects:

Example:

const object1 = { name: 'John' };
const object2 = { age: 30 };
const mergedObject = { ...object1, ...object2 };

console.log(mergedObject); // Output: { name: 'John', age: 30 }