Skip to content

Latest commit

 

History

History
245 lines (154 loc) · 10.8 KB

33-Spread-operator.md

File metadata and controls

245 lines (154 loc) · 10.8 KB

The Spread Operator

The Spread Operator in JavaScript is denoted by three dots (...) and it allows an iterable object, such as an array or string, to be expanded into individual elements. This means that you can use the spread operator to pass the elements of an array as individual arguments to a function or to create a new array by combining existing arrays.

Let me explain this with an example in Hinglish:

Suppose you have an array of fruits:

const fruits = ['apple', 'banana', 'orange'];

Now let's say you want to create a new array that contains all the elements of the fruits array plus some additional fruits. You can use the spread operator to achieve this like so:

const moreFruits = [...fruits, 'grape', 'kiwi'];
console.log(moreFruits); // Output: ['apple', 'banana', 'orange', 'grape', 'kiwi']

Here we used the spread operator to expand the fruits array and then added two additional fruits ('grape' and 'kiwi') to create a new array called moreFruits.

Similarly, you can also use the spread operator to pass the elements of an array as individual arguments to a function like so:

function add(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];

console.log(add(...nums)); // Output: 6

Here we used the spread operator to pass the elements of the nums array (i.e., 1, 2, and 3) as individual arguments to the add function, which then returns their sum.

So, in summary, the spread operator is a handy feature in JavaScript that allows you to easily manipulate arrays and pass their elements as individual arguments to functions.

assign values using spread operator

Spread operator se hum ek array ya object ke values ko dusre array ya object mein assign kar sakte hain. Ye operator '...' ka use karta hai aur ye new version of JavaScript (ES6) mein aaya hai.

Ek example ke through samjhate hain:

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

let allNumbers = [...numbers, ...moreNumbers];

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

Is example mein humne do array banaye hain numbers aur moreNumbers. Fir humne unke values ko combine karke ek naya array allNumbers mein store kiya hai spread operator ka use karke.

Ek aur example dekhte hain object ke saath:

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

let completeDetails = {...person, ...details};

console.log(completeDetails);
// Output: { name: 'John', age: 30, country: 'USA', hobby: 'Reading' }

Is example mein humne do objects banaye hain person aur details. Fir humne unke properties ko combine karke ek naya object completeDetails mein store kiya hai spread operator ka use karke.

Spread operator ka istemaal array ya object ke values ko easily combine karne ke liye kiya ja sakta hai.

How to copy Array spread operator

Array spread operator in JavaScript is used to copy an array or merge multiple arrays into a single array. To use the spread operator, we use three dots (...) followed by the name of the array.

Here's an example of how to copy an array using the spread operator:

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

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

In this example, we have created an array arr1 with three elements. We then create another array arr2 and use the spread operator to copy the elements from arr1 into arr2.

Now, arr2 is a separate array that contains the same elements as arr1. If we modify arr2, it will not affect arr1. Similarly, if we modify arr1, it will not affect arr2.

To summarize, the spread operator in JavaScript is a convenient way to copy an array without modifying the original array.

Hinglish Explanation: JavaScript mein Array spread operator ka upyog ek array ko copy karne yaad phir doosre arrays ko ek hi array mein milane ke liye kiya jaata hai. Spread operator ka upyog karne ke liye, hum teen dots (...) ka upyog karte hain aur uske baad array ke naam ka upyog karte hain.

Yahaan ek udaharan diya gaya hai ki kis tarah se spread operator ka upyog karke ek array ko copy kiya jaa sakta hai:

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

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

Is udaharan mein, humne teen elements ke saath ek array arr1 banaya hai. Phir humne doosra array arr2 banaya aur spread operator ka upyog karke arr1 ke elements ko arr2 mein copy kiya hai.

Ab, arr2 ek alag array hai jismein arr1 ke samaan elements hain. Agar hum arr2 ko modify karte hain, to yah arr1 ko influence nahi karega. Isi tarah, agar hum arr1 ko modify karte hain, to yah arr2 ko influence nahi karega.

Saaransh mein, JavaScript mein spread operator ek saral tareeka hai ek array ko copy karne ke liye jo ki original array ko modify na kare.

How to Join 2 Arrays using spread operator

Spread operator ka use karke JavaScript mein 2 arrays ko merge ya join karna bahut hi asaan hai. Spread operator "..." ke dwara ham Arrays, Objects aur Strings ko easily manipulate kar sakte hain.

Ab samjhein ki spread operator se 2 arrays ko join karne ke liye kaise karenge:

  1. Sabse pehle, humein 2 arrays kaafi hain jo humein join karna hai. Example:

    const firstArray = [1, 2, 3];
    const secondArray = [4, 5, 6];
  2. Ab hum spread operator ka use karenge aur dono arrays ko combine karenge. Hum ise mergeArray variable mein store karenge.

    const mergeArray = [...firstArray, ...secondArray];
  3. Yeh ho gaya! Hamari dono arrays merge ho chuki hain aur mergeArray mein store ho chuki hai.

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

Is tarah se hum spread operator ka use karke 2 arrays ko join kar sakte hain.

How to convert String to array using spread

Hinglish mein samajhane ke liye, sabse pehle "string" ka arth hai ek text ya sentence, aur "array" ka arth hai ki kuch values ko ek list mein rakhna. Ab aap spread operator ka upyog karke ek string ko array mein convert kar sakte hain.

Iske liye, aapko pehle ek string banana padega. Maan lo ki aapka string hai "Hello World". Ab aap ise array mein badalne ke liye, niche diye gaye code ko follow karein:

const str = "Hello World";
const arr = [...str];
console.log(arr);

Upar vala code aapki string ko arr naam ki nayi ek list mein badal dega, jisme har ek character alag-alag element hote hain. Spread operator ... isliye use kiya jata hai taaki string ke har ek character ko alag element ke roop mein list mein daala ja sake.

Jab aap is code ko run karenge, to console par ye output dekhne ko milega:

["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

Is tarah se aap spread operator ka upyog karke ek string ko array mein badal sakte hain.

Passing arguments in function using spread

Spread operator in JavaScript is represented by three dots (...) followed by the array or object name. It allows you to expand an iterable (an array, string, etc.) into individual elements when calling a function or constructing an array.

Let's understand it with an example:

function addNumbers(num1, num2, num3) {
  return num1 + num2 + num3;
}

const numbers = [1, 2, 3];

console.log(addNumbers(...numbers));

In this example, we have defined a function called "addNumbers" which takes three arguments "num1", "num2", and "num3". Then, we have created an array called "numbers" containing three elements [1, 2, 3].

We can pass these three elements as arguments to the addNumbers function using spread operator: "...numbers". This will expand the array into individual elements and pass them as separate arguments to the function.

So, when we call the addNumbers function with "...numbers", it will be equivalent to calling the function like this:

addNumbers(1, 2, 3);

and it will return the sum of all three numbers, which is 6.

Hope that helps!

Shallow copy

Shallow copy in JavaScript means creating a new object or array that shares the same references to the original object's properties. This means any changes made to the original object will also reflect in the copied object.

For example, consider the following code:

// Creating an original object
let originalObj = { name: "John", age: 30 };
console.log(originalObj); // Output: { name: "John", age: 30 }

// Creating a shallow copy of the original object
let copiedObj = Object.assign({}, originalObj);
console.log(copiedObj); // Output: { name: "John", age: 30 }

// Modifying the original object
originalObj.age = 31;
console.log(originalObj); // Output: { name: "John", age: 31 }
console.log(copiedObj); // Output: { name: "John", age: 30 }

In this example, we create an originalObj object with two properties (name and age). We then create a shallow copy of the originalObj using Object.assign() method, which creates a new object and copies the properties of the original object into it.

When we modify the age property of the originalObj, we can see that only the originalObj is changed, but the copiedObj remains unchanged because the copied object only contains a reference to the original object's properties.

Shallow copy ka matlab hai ki ek new object ya array ko banaya jata hai jo original object ke properties ka same reference share karta hai. Ye matlab hai ki agar original object mein koi bhi changes kiye jayein to wo copied object mein bhi reflect honge.

Deep copy

Deep copy in JavaScript refers to creating a new object or array with a completely separate memory reference from the original one. This means that any changes made to the copied object will not affect the original object, and vice versa.

For example, suppose we have an object called originalObj:

let originalObj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "music"]
};

Now if we make a shallow copy of this object using the spread operator:

let shallowCopyObj = { ...originalObj };

Any changes made to shallowCopyObj will also be reflected in originalObj because it only creates a new reference to the same memory location.

However, if we want to create a deep copy of originalObj, we can use JSON.parse() and JSON.stringify() methods as follows:

let deepCopyObj = JSON.parse(JSON.stringify(originalObj));

This creates a completely separate memory reference for the copied deepCopyObj, which means that any changes made to it will not affect originalObj.

Suppose humare paas ek object hai originalObj jis mein kuchh key-value pairs aur ek array hai. Ab agar hum originalObj ko copy karna chahte hain toh hum shallowCopyObj ko spread operator ka use karke create kar sakte hain. Lekin agar hum yeh ensure karna chahte hain ki copied object originalObj se bilkul alag memory space mein store ho, toh hum deepCopyObj ko JSON.parse() aur JSON.stringify() methods ka use karke create kar sakte hain. Isse, copied object mein koi bhi changes original object mein reflect nahi honge aur vice versa.