JavaScript Spread and Rest Syntax

JavaScript లో spread syntax మరియు rest syntax రెండింటినీ మూడు dots, అంటే …, తో రాస్తాము. కానీ అవి ఉపయోగించే సందర్భాన్ని బట్టి వేర్వేరు పనులు చేస్తాయి.

Spread Syntax అంటే ఏమిటి?

Spread syntax ఒక array లేదా object లోని values ను విడదీసి, మరో array లేదా object లోకి copy లేదా combine చేయడానికి ఉపయోగపడుతుంది.

Array ఉదాహరణ: const combined = […first, …second];

Object ఉదాహరణ: const updatedUser = { …user, city: “Hyderabad” };

Arrays తో Spread

Spread syntax ఉపయోగించి రెండు arrays ను కలపవచ్చు. అలాగే ఒక array copy ని సృష్టించవచ్చు.

const copy = […numbers]; అని రాస్తే numbers array లోని values తో కొత్త array తయారవుతుంది. ఇది shallow copy.

Objects తో Spread

Objects ను combine చేయడానికి spread syntax ఉపయోగించవచ్చు. ఒకే property పేరు రెండుసార్లు ఉంటే, చివరగా వచ్చిన value ముందున్న value ని override చేస్తుంది.

Rest Syntax అంటే ఏమిటి?

Function కు ఎన్ని arguments వస్తాయో ముందుగా తెలియనప్పుడు, వాటిని ఒక array గా collect చేయడానికి rest syntax ఉపయోగిస్తాము.

function total(…numbers) లో …numbers మిగిలిన అన్ని arguments ను numbers అనే array లోకి collect చేస్తుంది.

Destructuring లో కూడా rest syntax ఉపయోగించవచ్చు. ఉదాహరణకు const [first, …remaining] = values; లో first మొదటి value ను తీసుకుంటుంది, remaining మిగిలిన values ను array గా ఉంచుతుంది.

Spread మరియు Rest మధ్య తేడా

Spread: ఒక array లేదా object ను విడదీసి values ను బయటకు పంపుతుంది.
Rest: అనేక values ను ఒక array లేదా object లోకి collect చేస్తుంది.

ముఖ్యమైన విషయం

Spread syntax nested objects లేదా nested arrays ను పూర్తిగా deep copy చేయదు. ఇది సాధారణంగా shallow copy మాత్రమే చేస్తుంది. Beginner examples లో ఇది గుర్తుంచుకోవడం మంచిది.

Simple Explanation

Spread అంటే values ను బయటకు విస్తరించడం. Rest అంటే వచ్చిన values ను ఒకచోట కలెక్ట్ చేయడం.

ఉదాహరణకు, […numbers] array లోని items ను కొత్త array లోకి spread చేస్తుంది. function show(…items) function కు వచ్చిన arguments అన్నింటినీ items అనే array లోకి collect చేస్తుంది.

సులభంగా గుర్తుంచుకోవడానికి: Spread = unpack, Rest = collect.

Real-Life Example

ఒక shopping cart లో ఇప్పటికే ఉన్న products array ఉందని అనుకోండి. కొత్త product ను జోడించేటప్పుడు పాత array ను మార్చకుండా […cart, newProduct] అని రాయవచ్చు. ఇది పాత products ను spread చేసి, చివరలో కొత్త product ను జోడిస్తుంది.

అలాగే ఒక restaurant order function కు customer ఎన్ని items అయినా పంపవచ్చు. function createOrder(…items) అని రాస్తే వచ్చిన అన్ని items ఒక array గా collect అవుతాయి.

Code Examples

Arrays ను Spread తో కలపడం

const fruits = ["apple", "banana"];
const vegetables = ["carrot", "potato"];

const groceries = [...fruits, ...vegetables];

console.log(groceries);

ఇక్కడ fruits మరియు vegetables arrays లోని values ను spread చేసి groceries అనే కొత్త array లో కలిపాము. Original arrays మారవు.

['apple', 'banana', 'carrot', 'potato']

Objects ను Spread తో copy మరియు update చేయడం

const user = {
  name: "Ravi",
  age: 22
};

const updatedUser = {
  ...user,
  city: "Hyderabad"
};

console.log(updatedUser);

ముందుగా user object లోని properties ను spread చేశాము. తరువాత city అనే కొత్త property జోడించాము. ఈ విధంగా original user object ను మార్చకుండా updatedUser అనే కొత్త object తయారవుతుంది.

{ name: 'Ravi', age: 22, city: 'Hyderabad' }

Function arguments ను Rest తో collect చేయడం

function addNumbers(...numbers) {
  let total = 0;

  for (const number of numbers) {
    total += number;
  }

  return total;
}

console.log(addNumbers(10, 20, 30));

addNumbers function కు వచ్చిన అన్ని arguments ను …numbers ఒక array గా collect చేస్తుంది. తరువాత loop ద్వారా ప్రతి number ను total కు జోడించాము.

Destructuring లో Rest ఉపయోగించడం

const scores = [95, 88, 76, 64];
const [highest, ...otherScores] = scores;

console.log(highest);
console.log(otherScores);

Destructuring సమయంలో highest మొదటి value ను తీసుకుంటుంది. …otherScores మిగిలిన values అన్నింటినీ ఒక కొత్త array గా collect చేస్తుంది.

95
[88, 76, 64]

Line-by-Line Explanation

const fruits = [“apple”, “banana”];

ఇక్కడ fruits అనే constant array ను సృష్టించి, అందులో రెండు fruit names ఉంచాము.

const vegetables = [“carrot”, “potato”];

ఇక్కడ vegetables అనే మరో array ను సృష్టించి, అందులో రెండు vegetable names ఉంచాము.

const groceries = […fruits, …vegetables];

…fruits మరియు …vegetables spread syntax ద్వారా రెండు arrays లోని values ను విడదీసి groceries అనే కొత్త array లోకి చేర్చాయి.

console.log(groceries);

groceries array లోని అన్ని values ను console లో ప్రదర్శిస్తుంది.

function addNumbers(…numbers) {

ఈ function కు వచ్చే arguments అన్నింటినీ …numbers అనే rest parameter ఒక array గా collect చేస్తుంది.

let total = 0;

Numbers మొత్తం కలపడానికి total అనే variable ను 0 తో ప్రారంభించాము.

for (const number of numbers) {

numbers array లోని ప్రతి value ను ఒక్కొక్కటిగా తీసుకోవడానికి for…of loop ఉపయోగించాము.

total += number;

ప్రతి number ను total కు జోడిస్తుంది. ఇది total = total + number; కు సంక్షిప్త రూపం.

}

ఇది for loop block ముగిసిందని సూచిస్తుంది.

return total;

అన్ని numbers కలిపిన తరువాత total value ను function result గా return చేస్తుంది.

}

ఇది addNumbers function definition ను ముగిస్తుంది.

console.log(addNumbers(10, 20, 30));

Function ను మూడు arguments తో call చేసి, వచ్చిన total result ను console లో చూపిస్తుంది.

Try It

Try this JavaScript code:

Example

const firstTeam = ["Ravi", "Sita"];
const secondTeam = ["Arjun", "Maya"];

const allPlayers = [];

console.log(allPlayers);

Try It Yourself »

Practice

Practice:

Spread syntax ఉపయోగించి firstTeam మరియు secondTeam arrays ను allPlayers అనే కొత్త array లో కలపండి. Original arrays ను మార్చకండి.

Hint:

కొత్త array లో …firstTeam మరియు …secondTeam ఉపయోగించండి.

Practice:

ఒక sum function తయారు చేయండి. Rest parameter ఉపయోగించి ఎన్ని numbers వచ్చినా వాటి మొత్తాన్ని return చేయాలి. ఉదాహరణకు sum(5, 10, 15) result 30 రావాలి.

Hint:

Function parameter లో …numbers ఉపయోగించి, loop ద్వారా ప్రతి number ను total కు జోడించండి.

Common Mistakes

Spread మరియు rest రెండూ ఒకే పని చేస్తాయని అనుకోవడం.

Spread values ను విడదీసి బయటకు పంపుతుంది. Rest అనేక values ను ఒక array లేదా object లోకి collect చేస్తుంది.

Object spread లో property order మరియు duplicate property behavior ను పట్టించుకోకపోవడం.

ఒకే property పేరు మళ్లీ వస్తే, చివరగా వచ్చిన value ముందున్న value ను override చేస్తుంది.

Rest parameter ను function parameters మధ్యలో ఉంచడం, ఉదాహరణకు function test(…items, last).

Rest parameter సాధారణంగా చివరి parameter గా ఉండాలి. ఉదాహరణకు function test(first, …items).

Spread copy ను deep copy అని అనుకోవడం.

Array లేదా object spread సాధారణంగా shallow copy చేస్తుంది. Nested data కోసం అదనపు జాగ్రత్త అవసరం.

Interview Questions

Spread syntax మరియు rest syntax మధ్య ప్రధాన తేడా ఏమిటి?

Answer:

Spread syntax array లేదా object లోని values ను విడదీసి బయటకు పంపుతుంది. Rest syntax అనేక values ను ఒక array లేదా object లోకి collect చేస్తుంది. రెండింటికీ … notation ఉపయోగించినా, వాటి usage context వేరు.

ఒక array ను copy చేయడానికి spread syntax ఎలా ఉపయోగిస్తారు?

Answer:

ఉదాహరణకు const copy = […original]; అని రాస్తే original array values తో కొత్త shallow copy తయారవుతుంది.

Rest parameter function లో ఎక్కడ ఉండాలి?

Answer:

Rest parameter function parameters లో చివరగా ఉండాలి. ఎందుకంటే అది మిగిలిన అన్ని arguments ను collect చేస్తుంది.

Exam Questions

ఈ code output ఏమిటి? const a = [1, 2]; const b = [3, 4]; console.log([…a, …b]);

Answer:

Output [1, 2, 3, 4]. Spread syntax రెండు arrays లోని values ను ఒక కొత్త array లో కలుపుతుంది.

ఈ code లో values మరియు remaining విలువలు ఏమిటి? const [first, …remaining] = [10, 20, 30];

Answer:

first విలువ 10. remaining విలువ [20, 30]. Rest syntax మిగిలిన values ను array గా collect చేస్తుంది.

Object spread లో ఒకే property రెండుసార్లు ఉంటే ఏ value ఉంచబడుతుంది?

Answer:

చివరగా వచ్చిన property value ఉంచబడుతుంది. తరువాత వచ్చిన value ముందున్న value ను override చేస్తుంది.

Quick Revision

Spread syntax: array లేదా object values ను expand చేయడానికి ఉపయోగిస్తారు.
Rest syntax: అనేక values ను ఒక array లేదా object లోకి collect చేయడానికి ఉపయోగిస్తారు.
Arrays combine చేయడానికి […first, …second] ఉపయోగించవచ్చు.
Objects copy లేదా update చేయడానికి { …object, property: value } ఉపయోగించవచ్చు.
Function లో rest parameter సాధారణంగా చివరి parameter గా ఉండాలి.
Spread copy సాధారణంగా shallow copy మాత్రమే.

JavaScript Spread and Rest Syntax