﻿
{"id":8517,"date":"2018-07-11T07:51:14","date_gmt":"2018-07-11T07:51:14","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=8517"},"modified":"2018-07-11T07:51:14","modified_gmt":"2018-07-11T07:51:14","slug":"ecmascript-6-spread-operator","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/ecmascript-6-spread-operator\/","title":{"rendered":"ECMAScript 6 &#8211; Spread Operator"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Merhaba,<\/p>\n<p>Yaz\u0131l\u0131m algoritmalar\u0131nda, yap\u0131sal olarak bazen ekstrem durumlarda kodumuzu in\u015fa etmek isteyebiliriz. Tabi bu durumlar kulland\u0131\u011f\u0131m\u0131z yaz\u0131l\u0131m dilininde destekleyece\u011fi bi\u00e7imde, syntax yap\u0131s\u0131na uygun olacak \u015fekilde s\u0131n\u0131rl\u0131 kalmak durumundad\u0131r. Peki nedir bu durumlar? diye sorarsan\u0131z e\u011fer bir fonksiyona s\u0131n\u0131rs\u0131z parametre g\u00f6ndermek yahut bir dizi i\u00e7erisindeki t\u00fcm elemanlar\u0131 tek seferde elde etmek durumlar\u0131n\u0131 \u00f6rnek olarak verebiliriz. Zaten bu \u00f6rnekler bu konumuzun esas i\u00e7eri\u011fini te\u015fkil edecek senaryolar\u0131da ifade etmektedirler. ECMAScript 6 ile gelen Spread Operator \u00f6zelli\u011fi, fonksiyonlara s\u0131n\u0131rs\u0131z parametre g\u00f6ndermemizi sa\u011flamakta ve bu \u00f6zelli\u011fin d\u0131\u015f\u0131nda bir dizi i\u00e7erisindeki t\u00fcm elemanlar\u0131 tek seferde elde etmemizi sa\u011flamaktad\u0131r.<\/p>\n<p>Spread Operator &#8220;&#8230;&#8221; \u015feklinde \u00fc\u00e7 noktadan olu\u015fan bir operat\u00f6rd\u00fcr \ud83d\ude42<\/p>\n<p>Evet&#8230; Bu g\u00fcne kadar soru i\u015faretidir, kesme i\u015faretidir, diestir, alt tiredir vs. bu tarz karakterdeki operat\u00f6rlere al\u0131\u015fm\u0131\u015flar i\u00e7in \u00e7elimsiz ve al\u0131\u015f\u0131lagelmi\u015fin d\u0131\u015f\u0131nda bir yap\u0131ya sahip olabilir. Ama olduk\u00e7a etkili ve boyundan b\u00fcy\u00fck i\u015fler ba\u015faran bir operat\u00f6rd\u00fcr.<\/p>\n<h3>Fonksiyonlara S\u0131n\u0131rs\u0131z Parametre \u00d6zelli\u011fi<\/h3>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction myFunction(...a) {\r\n    for (const s of a)\r\n        console.log(s);\r\n}\r\nmyFunction(1, 3, 5, 6, 7, 8);\r\n<\/pre>\n<p>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer &#8220;myFunction&#8221; fonksiyonunda ki &#8220;a&#8221; parametresinin ba\u015f\u0131na Spread operat\u00f6r\u00fc koyulmu\u015ftur. Dolay\u0131s\u0131yla bu \u015fekilde fonksiyon s\u0131n\u0131rs\u0131z parametre alabilecek bir \u00f6zellik kazanm\u0131\u015f olmaktad\u0131r.<\/p>\n<h3>Dizi Elemanlar\u0131n\u0131 Tek Seferde Elde Etme<\/h3>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet sayilar = &#x5B;1, 3, 5];\r\nconsole.log(...sayilar);\r\n<\/pre>\n<p>Yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi elimizdeki herhangi bir dizi i\u00e7erisindeki elemanlar\u0131 tek seferde elde etmek ya da bir ba\u015fka deyi\u015fle yazd\u0131rmak i\u00e7in Spread operat\u00f6r\u00fc kullan\u0131lmaktad\u0131r.<\/p>\n<p>\u0130\u015fte dizilerdeki bu Spread \u00f6zelli\u011fi olduk\u00e7a farkl\u0131 noktalarda bizlere pratiksel katk\u0131lar sa\u011flamaktad\u0131r.<br \/>\n\u00d6rne\u011fin;<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlet sayilar = &#x5B;1, 3, 5];\r\nlet sayilar2 = &#x5B;11, 23, ...sayilar, 453];\r\nconsole.log(...sayilar2);\r\n<\/pre>\n<p>yukar\u0131daki kullan\u0131m tarz\u0131nda ise bir dizideki elemanlar bir ba\u015fka dizi i\u00e7erisine Spread operat\u00f6r\u00fc ile istenilen indexten itibaren aktar\u0131labilmektedir.<\/p>\n<p>Bir ba\u015fka \u00f6rnek;<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction myFunction(a, b, c, d, e, f) {\r\n    console.log(a, b, c, d, e, f);\r\n}\r\nlet sayilar = &#x5B;7, 9, 11];\r\nmyFunction(1, 3, 5, ...sayilar);\r\n<\/pre>\n<p>yukar\u0131daki kullan\u0131mda ise &#8220;myFunction&#8221; fonksiyonuna g\u00f6nderilen parametrelere de\u011ferlerin bir k\u0131sm\u0131 Spread operat\u00f6r\u00fc ile &#8220;sayilar&#8221; dizisindeki de\u011ferlerden verilmektedir.<\/p>\n<p>Yaz\u0131m\u0131z\u0131 sonland\u0131rmadan \u00f6nce Spread operat\u00f6r\u00fcn\u00fcn fonksiyonlara sa\u011flad\u0131\u011f\u0131 s\u0131n\u0131rs\u0131z parametre \u00f6zelli\u011fi ile dizilerin elemanlar\u0131n\u0131 tek seferde yazd\u0131rma \u00f6zelli\u011fini birle\u015ftiren bir \u00f6rnek vermek kan\u0131mca b\u00fct\u00fcnleyici olacakt\u0131r.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nfunction myFunction(...x) {\r\n    console.log(...x);\r\n}\r\nlet array = &#x5B;1, 3, 5, 6, 7, 8, 45, 3, 324];\r\nmyFunction(...array);\r\n<\/pre>\n<p>Bu \u00f6rne\u011fimizde dikkat ederseniz e\u011fer \u00fc\u00e7 farkl\u0131 noktada Spread operat\u00f6r\u00fc kullan\u0131lm\u0131\u015ft\u0131r. Biri; fonksiyonun s\u0131n\u0131rs\u0131z parametre alabilmesi i\u00e7in, bir di\u011feri dizi \u015feklinde gelen &#8220;x&#8221; parametresindeki de\u011ferleri tek seferde yazd\u0131rabilmek i\u00e7in ve sonuncusu ise &#8220;myFunction&#8221; fonksiyonuna g\u00f6nderilecek parametrelerin &#8220;array&#8221; dizisinden tek seferde elde edilip g\u00f6nderilebilmesi i\u00e7in&#8230;<\/p>\n<p>ECMAScript 6 ile gelen Spread Operator \u00f6zelli\u011fi benim \u015fimdiye kadar en be\u011fendi\u011fim niteli\u011fi bar\u0131nd\u0131ran \u00f6zellik oldu\u011funu itiraf edebilirim.<\/p>\n<p>Faydalanman\u0131z dile\u011fiyle&#8230;<\/p>\n<p>Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere&#8230;<br \/>\n\u0130yi \u00e7al\u0131\u015fmalar dilerim&#8230;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Merhaba, Yaz\u0131l\u0131m algoritmalar\u0131nda, yap\u0131sal olarak bazen ekstrem durumlarda kodumuzu in\u015fa etmek isteyebiliriz. Tabi bu durumlar kulland\u0131\u011f\u0131m\u0131z yaz\u0131l\u0131m dilininde destekleyece\u011fi bi\u00e7imde, syntax yap\u0131s\u0131na uygun olacak \u015fekilde s\u0131n\u0131rl\u0131 kalmak durumundad\u0131r. Peki nedir bu durumlar? diye sorarsan\u0131z&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":8497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2443,2145],"tags":[2441,2440,2455,2456],"class_list":["post-8517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecmascript-6","category-node-js","tag-ecmascript","tag-ecmascript-6","tag-ecmascript-6-spread-operator","tag-spread-operator"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8517"}],"version-history":[{"count":6,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8517\/revisions"}],"predecessor-version":[{"id":8523,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8517\/revisions\/8523"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/8497"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}