[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascript-temelleri-degisken-fonksiyon-ve-dongu-ornekleri":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},25994,"JavaScript Temelleri: Değişken, Fonksiyon ve Döngü Örnekleri","Bu rehber, JavaScript'te değişken tanımlama (let/const), fonksiyon yazımı (geleneksel ve ok fonksiyonları) ve temel döngü yapıları (for, while) için açıklamalar ve çalıştırılabilir örnekler sunar.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>JavaScript, web uygulamaları ve pek çok modern geliştirme akışında kullanılan temel bir programlama dilidir. Bu rehberde değişkenler, fonksiyonlar ve döngüler gibi temel yapı taşlarını adım adım örneklerle anlatarak başlangıç seviyesindekilere pratik bir yol haritası sunuyorum. Temel kavramların tanımları ve daha detaylı referanslar için MDN Web Docs'un rehberlerine bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide\">MDN JavaScript Guide\u003C/a> ve \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Statements\">Statements and declarations\u003C/a>.\u003C/p>\n\u003Chr>\n\u003Ch2>Değişkenler: let, const ve var\u003C/h2>\n\u003Cp>Değişkenler, uygulamanızın çalışması sırasında veriyi saklamak için kullanılır. Modern JavaScript'te en sık kullanılan iki anahtar kelime \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong>'tır; eski kodlarda ise \u003Cstrong>var\u003C/strong> ile karşılaşabilirsiniz. Bu anahtar kelimeler arasındaki farklar, kapsam (scope) ve yeniden atama (reassignment) davranışlarıyla ilgilidir.\u003C/p>\n\u003Cp>\u003Cstrong>Özet:\u003C/strong>\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>let\u003C/strong>: blok kapsamlıdır; değer ataması yapılabilir.\u003C/li>\n  \u003Cli>\u003Cstrong>const\u003C/strong>: blok kapsamlıdır; yeniden atamaya izin vermez, ancak nesne veya dizi içeriği değiştirilebilir.\u003C/li>\n  \u003Cli>\u003Cstrong>var\u003C/strong>: fonksiyon kapsamlıdır ve hoisting davranışı farklılıkları olabilir; modern kodda genellikle \u003Cem>let\u003C/em>/\u003Cem>const\u003C/em> tercih edilir.\u003C/li>\n\u003C/ul>\n\u003Cp>Aşağıda basit örnekler görebilirsiniz (tarayıcı konsolunda veya Node.js ortamında çalıştırabilirsiniz):\u003C/p>\n\u003Cp>\u003Cstrong>Basit değişken kullanımı:\u003C/strong>\u003Cbr>let sayi = 10;\u003Cbr>const isim = 'Ali';\u003Cbr>var renk = 'mavi';\u003C/p>\n\u003Cp>\u003Cstrong>const ile nesne/dizi değişikliği:\u003C/strong>\u003Cbr>const liste = [1, 2];\u003Cbr>liste.push(3); // Dizi içeriği değişir ve bu geçerlidir\u003Cbr>// liste = []; // yeniden atama yapılmaya çalışılırsa hata olur\u003C/p>\n\u003Cp>Detaylı teknik açıklamalar ve kapsam davranışları için MDN'deki değişken bildirimleri sayfası yararlı olacaktır: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Statements\">Statements and declarations\u003C/a>.\u003C/p>\n\u003Chr>\n\u003Ch2>Fonksiyonlar: declaration, expression ve arrow\u003C/h2>\n\u003Cp>Fonksiyonlar belirli bir görevi yerine getiren kod bloklarıdır. JavaScript'te farklı tanımlama biçimleri vardır ve her birinin kullanım yeri değişiklik gösterebilir.\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Function declaration (bildirim):\u003C/strong> function anahtar kelimesiyle tanımlanır ve hoisting etkisi vardır.\u003C/li>\n  \u003Cli>\u003Cstrong>Function expression (ifade):\u003C/strong> bir değişkene atanan fonksiyondur; hoisting bu tanımlama için aynı şekilde çalışmaz.\u003C/li>\n  \u003Cli>\u003Cstrong>Arrow functions (ok fonksiyonları):\u003C/strong> daha kısa söz dizimi sağlar ve \u003Cem>this\u003C/em> bağlamını üst kapsamdan alır; MDN'de ok fonksiyonları hakkında teknik açıklamalar bulunmaktadır: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Functions/Arrow_functions\">Arrow function expressions\u003C/a>.\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>Örnekler:\u003C/strong>\u003C/p>\n\u003Cp>\u003Cstrong>Fonksiyon bildirimi:\u003C/strong>\u003Cbr>function topla(a, b) {\u003Cbr>  return a + b;\u003Cbr>}\u003C/p>\n\u003Cp>\u003Cstrong>Fonksiyon ifadesi:\u003C/strong>\u003Cbr>const carp = function(a, b) {\u003Cbr>  return a * b;\u003Cbr>};\u003C/p>\n\u003Cp>\u003Cstrong>Ok fonksiyonu:\u003C/strong>\u003Cbr>const kare = x => x * x;\u003Cbr>const selam = (isim = 'Dünya') => `Merhaba, ${isim}`;\u003C/p>\n\u003Cp>Ok fonksiyonlarının \u003Cem>this\u003C/em> bağlamı ve constructor olarak kullanılamaması gibi önemli davranış farklılıkları vardır; bu tür ayrıntılar için MDN açıklamalarını inceleyin: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Functions/Arrow_functions\">MDN — Arrow function expressions\u003C/a>.\u003C/p>\n\u003Chr>\n\u003Ch2>Döngüler: for ve while\u003C/h2>\n\u003Cp>Döngüler, aynı kod bloğunu birden çok kez çalıştırmak için kullanılır. En temel döngüler \u003Cstrong>for\u003C/strong> ve \u003Cstrong>while\u003C/strong> döngüleridir. Döngüler içinde koşul kontrolü, sayaç güncellemesi ve gerekirse \u003Cstrong>break\u003C/strong> veya \u003Cstrong>continue\u003C/strong> ile akış kontrolü yapılır.\u003C/p>\n\u003Cp>\u003Cstrong>for döngüsü örneği:\u003C/strong>\u003Cbr>for (let i = 0; i < 5; i++) {\u003Cbr>  console.log(i);\u003Cbr>}\u003C/p>\n\u003Cp>\u003Cstrong>while döngüsü örneği:\u003C/strong>\u003Cbr>let i = 0;\u003Cbr>while (i < 5) {\u003Cbr>  console.log(i);\u003Cbr>  i++;\u003Cbr>}\u003C/p>\n\u003Cp>Dizilerle çalışırken klasik for döngüsü dışında okunabilirlik için dizi metodları veya for...of gibi yapıların tercih edildiği durumlar vardır. Temel kullanımda for ve while, belirli bir koşul sağlandığı sürece tekrar etmek için yeterlidir.\u003C/p>\n\u003Chr>\n\u003Ch2>Pratik Örnek: Çift Sayıları Filtreleme\u003C/h2>\n\u003Cp>Aşağıda değişken, fonksiyon ve döngüyü birlikte kullanan basit bir örnek yer alıyor. Bu fonksiyon bir sayı dizisinden çift olanları döndürür.\u003C/p>\n\u003Cp>\u003Cstrong>Örnek kod:\u003C/strong>\u003Cbr>function ciftleriBul(dizi) {\u003Cbr>  const sonuc = [];\u003Cbr>  for (let i = 0; i < dizi.length; i++) {\u003Cbr>    if (dizi[i] % 2 === 0) {\u003Cbr>      sonuc.push(dizi[i]);\u003Cbr>    }\u003Cbr>  }\u003Cbr>  return sonuc;\u003Cbr>}\u003Cbr>// Kullanım:\u003Cbr>const sayilar = [1, 2, 3, 4, 5, 6];\u003Cbr>console.log(ciftleriBul(sayilar)); // Beklenen çıktı: [2, 4, 6]\u003C/p>\n\u003Cp>Bu örneği deneyerek fonksiyon mantığını, dizi erişimini ve döngü kontrolünü aynı anda görmüş olursunuz.\u003C/p>\n\u003Chr>\n\u003Ch2>Adım Adım Öğrenme Planı ve Kontrol Listesi\u003C/h2>\n\u003Col>\n  \u003Cli>Temel sözdizimini öğrenin: değişkenler (let/const), temel veri tipleri ve operatörler.\u003C/li>\n  \u003Cli>Fonksiyon yazın: parametre-alan, dönüş değeri olan küçük fonksiyonlar oluşturun.\u003C/li>\n  \u003Cli>Döngüleri deneyin: for ve while ile dizileri ve sayıları işleyin.\u003C/li>\n  \u003Cli>Kodunuzu tarayıcı konsolunda çalıştırın: küçük değişiklikler yapıp sonucu gözlemleyin.\u003C/li>\n  \u003Cli>Pratik yapın: günlük küçük görevler için fonksiyonlar yazın (ör. filtreleme, dönüştürme).\u003C/li>\n  \u003Cli>Referanslara dönün: kavram netleşmediğinde MDN rehberlerini kontrol edin.\u003C/li>\n\u003C/ol>\n\u003Cp>Hızlı kontrol listesi:\u003C/p>\n\u003Cul>\n  \u003Cli>Varsayılan olarak \u003Cstrong>const\u003C/strong> kullanın; değiştirecekseniz \u003Cstrong>let\u003C/strong> tercih edin.\u003C/li>\n  \u003Cli>Küçük ve tek sorumluluk sahibi fonksiyonlar yazın.\u003C/li>\n  \u003Cli>Döngülerde sonsuz döngüye dikkat edin; koşulun değiştiğinden emin olun.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Ch2>Nasıl Deneyebilirim?\u003C/h2>\n\u003Cp>Basitçe bir tarayıcıda geliştirici aracını (console) açıp örnek kodları yapıştırarak çalıştırabilirsiniz. Alternatif olarak bir .js dosyası oluşturup Node.js ile çalıştırabilirsiniz. Daha ileri adımlar için MDN'deki rehberler kapsamlı referans sağlar: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide\">MDN JavaScript Guide\u003C/a>.\u003C/p>\n\u003Chr>\n\u003Ch2>Sonuç ve Sonraki Adımlar\u003C/h2>\n\u003Cp>Bu rehber, JavaScript'in temel yapı taşları olan değişkenler, fonksiyonlar ve döngüler hakkında pratik ve uygulanabilir örnekler sundu. Temel bilgileri öğrendikten sonra küçük projeler yaparak ve MDN gibi güvenilir dokümantasyonlardan yararlanarak bilgilerinizi kalıcı hale getirebilirsiniz. İleri konular için ES6 özellikleri, asenkron programlama ve DOM manipülasyonu gibi konulara geçebilirsiniz.\u003C/p>\n\u003Cblockquote>Kaynaklar: MDN Web Docs (JavaScript Guide ve ilgili referans sayfaları).\u003C/blockquote>","JavaScript Temelleri — Değişkenler, Fonksiyonlar ve Döngüler","Yeni başlayanlar için değişkenler, fonksiyonlar ve döngülerde temel kavramları ve adım adım örnekleri Türkçe olarak açıklayan pratik bir rehber.","JavaScript Temelleri, javascript başlangıç kodları, kolay kod örnekleri, yeni başlayanlar için yazılım rehberi, adım adım programlama öğrenme","javascript-temelleri-degisken-fonksiyon-ve-dongu-ornekleri","2026-04-09T09:09:23.000Z",{"id":16,"title":17,"slug":18},201,"JavaScript Temelleri","javascript-temelleri",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/1d0b6cae757f77d524a28a7cc82885b6.jpg","/media/blog/1d0b6cae757f77d524a28a7cc82885b6_thumb.jpg","/media/blog/1d0b6cae757f77d524a28a7cc82885b6.webp","/media/blog/1d0b6cae757f77d524a28a7cc82885b6_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,710,0,"4 dk okuma süresi","/blog/javascript-temelleri/javascript-temelleri-degisken-fonksiyon-ve-dongu-ornekleri",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/1d0b6cae757f77d524a28a7cc82885b6.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/javascript-temelleri-degisken-fonksiyon-ve-dongu-ornekleri",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/javascript-temelleri/javascript-temelleri-degisken-fonksiyon-ve-dongu-ornekleri",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/javascript-temelleri",{"@type":102,"position":30,"name":7,"item":65}]