Javascript’te Rest ve Spread Operatörleri kullanımı ve farkları

JavaScript ES6 ile birlikte gelen üç nokta ... hem Rest hem de Spread Operatörü olarak geçiyor, aslında bu ifadenin genel adı Spread Operatör fakat kullanıldığı bazı durumlara göre Rest Parametresi olarak da adlandırılıyor.

Rest Parametresi?
Rest Parametresi, fonksiyonlara sınır sayısı olmadan parametre geçmemize olanak verir ve bizim isteğimiz harici kalan tüm öğeleri bir dizide toplar.

Örneğin, birden fazla argüman alan bir fonksiyonumuz olduğunu düşünelim ve sadece geçirilen ilk argümanla ilgilendiğimizi ancak geri kalanını sonrası için saklamak istediğinizi varsayalım:

function sum(a,b,…remaining){
console.log(a); // 1
console.log(b); // 2
console.log(remaining); // [3,4,5,6,7]
}
sum(1,2,3,4,5,6,7);

function sum ( a , b , . . . remaining ) {

console . log ( a ) ; // 1

console . log ( b ) ; // 2

console . log ( remaining ) ; // [3,4,5,6,7]

}

sum ( 1 , 2 , 3 , 4 , 5 , 6 , 7 ) ;

Yukarıdaki örnekte, üç noktayı ... Rest Parametresi olarak kullanıyoruz ve fonksiyona gönderilen parametre içerisinden a ve b olarak 1. ve 2. parametreyi aldıktan sonra kalanları bir dizide topluyoruz, iletilen diğer tüm argümanlar artık remaining adlı dizide saklanmaktadır. Bu teknik özellikle iletilecek argümanların sayısını bilmediğinizde kullanışlı olmaktadır.

Rest Parametresi kullanırken dikkat etmemiz gereken bazı durumlar:

1. Rest Parametresi, geriye kalan tüm değişkenleri toplar bu yüzden fonksiyonun son parametresi olmalı, aşağıdaki gibi bir yazım hataya neden olur.

function f(arg1, …rest, arg2) {
// error
}

function f ( arg1 , . . . rest , arg2 ) {

// error

}

2. Bir fonksiyonda sadece bir Rest Parametresi olabilir, aynı şekilde aşağıdaki gibi bir yazım hataya neden olacaktır.

function f(…rest1, …rest2) {
// error
}

function f ( . . . rest1 , . . . rest2 ) {

// error

}

Spread Operatör
Spread Operatörü; String, Array veya Object değişmezlerini genişletmemize yardımcı olur.

String ifadelerde kullanımı

Bir string ifadeyi parçalara bölüp dizi haline getirmek istersek aşağıdaki gibi kullanabiliriz:

let name = “JavaScript”;
let arrayOfStrings = […name];
console.log(arrayOfStrings);
// [“J”, “a”, “v”, “a”, “S”, “c”, “r”, “i”, “p”, “t”]

let name = “JavaScript” ;

let arrayOfStrings = [ . . . name ] ;

console . log ( arrayOfStrings ) ;

// [“J”, “a”, “v”, “a”, “S”, “c”, “r”, “i”, “p”, “t”]

Dizileri Birleştirme

Aşağıdaki kodda, spread operatörünü kullanarak group1 ve group2 değişkenlerini tek bir dizide birleştirdik.

const group1 = [1,2,3];
const group2 = [4,5,6];
const allGroups = […group1,…group2];
console.log(allGroups)
// [1, 2, 3, 4, 5, 6]

const group1 = [ 1 , 2 , 3 ] ;

const group2 = [ 4 , 5 , 6 ] ;

const allGroups = [ . . . group1 , . . . group2 ] ;

console . log ( allGroups )

// [1, 2, 3, 4, 5, 6]

Fonksiyon çağrılarında Spread Operatör kullanımı

function sum(a,b,c){
return a+b+c;
}
const nums = [1,2,3];
sum(…nums) // 6

function sum ( a , b , c ) {

return a + b + c ;

}

const nums = [ 1 , 2 , 3 ] ;

sum ( . . . nums ) // 6

Dizilerde Spread kullanımı
Bir fonksiyona tek argüman olarak aktarılan bir diziye sahip başka bir örneğe bakalım, tüm öğeleri almak ve konsola yazdırmak için Spread Operatörünü kullanacağız.

const numbers = [1, 2, 3, 4, 5];
(function(single_array){
console.log(…single_array);
})([‘James’,’Janet’, …numbers])
// James Janet 1 2 3 4 5

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

( function ( single_array ) {

console . log ( . . . single_array ) ;

} ) ( [ ‘James’ , ‘Janet’ , . . . numbers ] )

// James Janet 1 2 3 4 5

numbers dizisindeki öğeleri single_array değişkenimize kopyalamak için Spread Operatörünü kullanıyoruz. Spread kullanarak bir dizi veya nesnenin bir kopyasını bir diğeriyle birleştirebiliriz.

Rest ve Spread birlikte kullanımı

(function(firstElement, …fruits){ // Rest Operatörü son parametre olarak kullandık
const extra = [‘squash’, ‘banana’, …fruits];
console.log(“Spread => “, extra); // [“squash”, “banana”, “apple”, “orange”]
// İlk argümanımızı(firstElement) Rest ile aldığımız için kalanlar Spread ile birleştirildi
console.log(“Rest ile ilk argümanımızı aldık => “, firstElement) // pinapple
console.log(“Rest ile kalan öğeler => “, …fruits); // apple orange
})(‘pinapple’, ‘apple’, ‘orange’);

( function ( firstElement , . . . fruits ) { // Rest Operatörü son parametre olarak kullandık

const extra = [ ‘squash’ , ‘banana’ , . . . fruits ] ;

console . log ( “Spread => “ , extra ) ; // [“squash”, “banana”, “apple”, “orange”]

// İlk argümanımızı(firstElement) Rest ile aldığımız için kalanlar Spread ile birleştirildi

console . log ( “Rest ile ilk argümanımızı aldık => “ , firstElement ) // pinapple

console . log ( “Rest ile kalan öğeler => “ , . . . fruits ) ; // apple orange

} ) ( ‘pinapple’ , ‘apple’ , ‘orange’ ) ;

Aşağıda Array içerisindeki aynı olan değerleri bir kez almak için Set Nesnesi ve Spread Operatör kullanılarak yapılmış güzel bir örnek bulunmakta:

const users = [1, 3, 1, 3, 3, 1];
let uniqueNum = […new Set(users)];
console.log(uniqueNum); // 1,3

const users = [ 1 , 3 , 1 , 3 , 3 , 1 ] ;

let uniqueNum = [ . . . new Set ( users ) ] ;

console . log ( uniqueNum ) ; // 1,3

Nesnelerde Rest ve Spread Operatörlerinin kullanımı

Nesnelerde Rest ve Spread Operatörlerinin kullanımı, dizilerdekinden farklı değildir.

Rest Operatör

let { x, y, …z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }

let { x , y , . . . z } = { x : 1 , y : 2 , a : 3 , b : 4 } ;

x ; // 1

y ; // 2

z ; // { a: 3, b: 4 }

Spread Operatör

let n = { x, y, …z };
n; // { x: 1, y: 2, a: 3, b: 4 }

let n = { x , y , . . . z } ;

n ; // { x: 1, y: 2, a: 3, b: 4 }

Nesneleri Birleştirme

const obj1 = {
a: 1,
b: 2
}
const obj2 = {
c: 3,
d: 4
}
const merge = {…obj1, …obj2};
console.log(merge); // {a:1, b:2, c:3, d:4}

const obj1 = {

a : 1 ,

b : 2

}

const obj2 = {

c : 3 ,

d : 4

}

const merge = { . . . obj1 , . . . obj2 } ;

console . log ( merge ) ; // {a:1, b:2, c:3, d:4}

Nesnelerde Rest Operatör kullanımı

Bir API yanıtından bize verilen büyük bir nesnemiz olduğunu hayal edin. Nesneden yalnızca users özelliği istersek ve geri kalanını başka bir değişkene kaydetmek için destructuring kullanabiliriz.

const response = {
users: [
{
name: ‘Anthony Davis’,
occupation: ‘athlete’
},
{
name: ‘Chance the rapper’,
occupation: ‘artiste’
}
],
response_time: ’20ms’,
cached: true,
request_count: 2
}
const {users, …metadata} = response;
console.log(metadata);
// {response_time: “20ms”, cached: true, request_count: 2}

const response = {

users : [

{

name : ‘Anthony Davis’ ,

occupation : ‘athlete’

} ,

{

name : ‘Chance the rapper’ ,

occupation : ‘artiste’

}

] ,

response_time : ’20ms’ ,

cached : true ,

request_count : 2

}

const { users , . . . metadata } = response ;

console . log ( metadata ) ;

// {response_time: “20ms”, cached: true, request_count: 2}

Nesnelerde Spread Operatör kullanımı

Spread Operatörünü başka bir nesneyi diğeriyle birleştirmek için kullanabiliriz.

Önceki kod parçacığını kullanarak:

const response = {

users : [

{

name : ‘Anthony Davis’ ,

occupation : ‘athlete’

} ,

{

name : ‘Chance the rapper’ ,

occupation : ‘artiste’

}

] ,

response_time : ’20ms’ ,

cached : true ,

request_count : 2

}

const { users , . . . metadata } = response ;

// Her iki değişkeni tek bir nesnede birleştirmek için Spread Operatörü kullanımı

const merged = { users , . . . metadata } ;

console . log ( merged ) ;

// {users: Array(2), response_time: “20ms”, cached: true, request_count: 2}

Ayrımlarını daha kolay yapabilmek için bazı ipuçları;

Eğer ... fonksiyonun sonunda yer alıyorsa bu Rest parametresidir ve geriye kalanlar bir diziye alınırlar.
Eğer ... fonksiyon çağrımında veya benzeri bir olayda kullanılıyorsa buna Spread Operatörü denir ve diziyi listeye çevirir.
Rest parametresi isteğe göre argüman girilmesine yardımcı olur.
Spread Operatörü diziyi normalde argüman listesi bekleyen fonksiyona atmaya yarar.

Kaynaklar:

https://reactgo.com/rest-vs-spread-javascript/

https://theninja.blog/using-rest-and-spread-operators-in-java-script/

https://javascript.info/rest-parameters-spread