[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-yeni-baslayanlar-icin-javascript-temelleri-degiskenler-ve-kontrol-akisi":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},35448,"Yeni Başlayanlar için JavaScript Temelleri: Değişkenler ve Kontrol Akışı","Bu rehber, yeni başlayanlara JavaScript'te değişkenlerin (var/let/const) tanımlanmasını, kapsam farklarını ve kontrol akışını (if/else, switch, for, while, do...while) örneklerle öğretmeyi amaçlar.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>JavaScript, web ve uygulama geliştirmede yaygın kullanılan bir programlama dilidir. Bu rehber, yeni başlayanların \u003Cstrong>değişkenleri\u003C/strong> nasıl tanımlayacağını ve programın yürütülme sırasını belirleyen \u003Cstrong>kontrol akışı\u003C/strong> yapılarını nasıl kullanacağını adım adım açıklar. Temel kavramları öğrenirken küçük örneklerle deneme yapmanız en etkili yoldur. Resmi ve güncel açıklamalar için MDN ve web.dev kaynaklarını inceleyebilirsiniz: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide\">MDN JavaScript Guide\u003C/a> ve \u003Ca href=\"https://web.dev/learn/javascript/control-flow?hl=tr\">web.dev - Kontrol akışı\u003C/a>.\u003C/p>\n\n\u003Ch2>Değişkenler: var, let ve const\u003C/h2>\n\u003Cp>JavaScript'te veriyi saklamak için değişkenler kullanılır. Üç ana bildirim yolu vardır: \u003Cstrong>var\u003C/strong>, \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong>. Her birinin kapsam ve yeniden atama davranışı farklıdır. Var hakkında teknik referans için bkz: \u003Ca href=\"https://learn.microsoft.com/en-us/scripting/javascript/reference/var-statement-javascript?redirectedfrom=MSDN\">var bildirimi (Microsoft Docs)\u003C/a>, daha geniş rehberlik için \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide\">MDN\u003C/a> faydalıdır.\u003C/p>\n\n\u003Ch3>var\u003C/h3>\n\u003Cp>\u003Cstrong>var\u003C/strong> ile tanımlanan değişkenler fonksiyon veya global kapsamda tanımlanır; blok (if/for gibi) kapsamında yeni bir bağlam oluşturmaz. Bu durum bazı senaryolarda beklenmeyen sonuca yol açabilir:\u003C/p>\n\u003Cblockquote>\nvar x = 1;\nif (true) {\n  var x = 2;\n  console.log(x); // 2\n}\nconsole.log(x); // 2\n\u003C/blockquote>\n\u003Cp>Örnekten görüldüğü gibi if bloğu içindeki değişiklik, dışarıdaki x değerini etkiler. Modern JavaScript'te çoğunlukla \u003Cstrong>let\u003C/strong> veya \u003Cstrong>const\u003C/strong> tercih edilir.\u003C/p>\n\n\u003Ch3>let ve const\u003C/h3>\n\u003Cp>\u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong> ES6 ile gelen, \u003Cem>blok kapsamlı\u003C/em> (block-scoped) değişkenlerdir. \u003Cstrong>let\u003C/strong> ile tanımlanan değişkenler yeniden atanabilir; \u003Cstrong>const\u003C/strong> ile tanımlanan bağlama yeniden atama yapılamaz. Ancak \u003Cstrong>const\u003C/strong> ile oluşturulmuş bir nesnenin içindeki özellikler değiştirilebilir—bağlama sabittir, nesnenin içeriği sabit değildir. Bu davranışlar MDN rehberinde detaylı olarak ele alınmıştır.\u003C/p>\n\u003Cblockquote>\nlet sayi = 10;\nsayi = 20; // geçerli\n\nconst kisi = { isim: \"Ayşe\" };\nkisi.isim = \"Mehmet\"; // nesne içi değişiklik geçerli\n// kisi = { isim: \"Ali\" }; // yeniden atama -> hata\n\u003C/blockquote>\n\n\u003Ch2>Kapsam (Scope) ve Hoisting\u003C/h2>\n\u003Cp>Kapsam (scope), bir değişkene kodun hangi noktalarından erişilebileceğini belirler. \u003Cstrong>var\u003C/strong> fonksiyon veya global kapsamında iken, \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong> blok kapsamlıdır. Bir diğer önemli kavram \u003Cem>hoisting\u003C/em> (yükseltme) olarak adlandırılır: bildirimler yürütmeden önce 'bildirilir', ancak değer atama ve erişim davranışı bildirim türüne göre farklılık gösterir.\u003C/p>\n\u003Cp>\u003Cstrong>var\u003C/strong> bildirimleri yükseltilir ve bildirilmelerine rağmen erişim undefined dönebilir; \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong> için ise bildirilmelerinden önce erişim, Temporal Dead Zone nedeniyle ReferenceError ile sonuçlanır:\u003C/p>\n\u003Cblockquote>\nconsole.log(a); // undefined\nvar a = 5;\n\nconsole.log(b); // ReferenceError\nlet b = 5;\n\u003C/blockquote>\n\u003Cp>Bu yüzden değişkeninizi kullanmadan önce mutlaka tanımlamak ve mümkünse en dar kapsamda tanımlamak en iyi uygulamalardandır.\u003C/p>\n\n\u003Ch2>Kontrol Akışı: Koşullar ve Döngüler\u003C/h2>\n\u003Cp>Kontrol akışı, programınızın hangi adımları hangi koşullarda izleyeceğini belirler. Temel yapılar \u003Cstrong>if/else\u003C/strong>, \u003Cstrong>switch\u003C/strong> ve döngülerdir. Web.dev'in kontrol akışı rehberi temel kavramları açıklar: \u003Ca href=\"https://web.dev/learn/javascript/control-flow?hl=tr\">web.dev - Kontrol akışı\u003C/a>.\u003C/p>\n\n\u003Ch3>Koşullu İfadeler (if / else / switch)\u003C/h3>\n\u003Cp>Basit bir if/else kullanımı:\u003C/p>\n\u003Cblockquote>\nconst not = 75;\nif (not >= 90) {\n  console.log(\"A\");\n} else if (not >= 70) {\n  console.log(\"B\");\n} else {\n  console.log(\"C\");\n}\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>switch\u003C/strong> yapılandırılmış durum kontrolü için okunabilir bir alternatif sağlar:\u003C/p>\n\u003Cblockquote>\nconst gun = \"Pazartesi\";\nswitch (gun) {\n  case \"Pazar\":\n    console.log(\"Hafta sonu\");\n    break;\n  case \"Pazartesi\":\n    console.log(\"Hafta başı\");\n    break;\n  default:\n    console.log(\"Ara gün\");\n}\n\u003C/blockquote>\n\n\u003Ch3>Döngüler (for / while / do...while)\u003C/h3>\n\u003Cp>Döngüler tekrarlı işlemler için kullanılır. Örnekler:\u003C/p>\n\u003Cblockquote>\nfor (let i = 0; i \u003C 5; i++) {\n  console.log(i);\n}\n\nlet j = 0;\nwhile (j \u003C 5) {\n  console.log(j);\n  j++;\n}\n\nlet k = 0;\ndo {\n  console.log(k);\n  k++;\n} while (k \u003C 5);\n\u003C/blockquote>\n\n\u003Ch3>Örnek: Döngü içinde kapsam farkı\u003C/h3>\n\u003Cp>\u003Cstrong>var\u003C/strong> ile döngü içinde oluşturulan kapatmalar (closures) beklenmeyen sonuç verebilir; \u003Cstrong>let\u003C/strong> ile bu sorun ortadan kalkar:\u003C/p>\n\u003Cblockquote>\nvar funcs = [];\nfor (var i = 0; i \u003C 3; i++) {\n  funcs.push(function() { console.log(i); });\n}\nfuncs[0](); // 3\nfuncs[1](); // 3\nfuncs[2](); // 3\n\n// let ile çözüm:\nlet funcs2 = [];\nfor (let i = 0; i \u003C 3; i++) {\n  funcs2.push(function() { console.log(i); });\n}\nfuncs2[0](); // 0\n\u003C/blockquote>\n\n\u003Ch2>Hata Yönetimi: try...catch\u003C/h2>\n\u003Cp>\u003Cstrong>try...catch\u003C/strong> blokları, çalışma zamanı hatalarını yakalamak ve programın beklenmedik şekilde durmasını engellemek için kullanılır. Hataları yakalarken, hatayı kaydetmek ve uygun geri bildirim sağlamak önemlidir.\u003C/p>\n\u003Cblockquote>\ntry {\n  JSON.parse(\"geçersiz-json\");\n} catch (e) {\n  console.error(\"Hata yakalandı:\", e);\n} finally {\n  console.log(\"Temizleme veya kapanış işleri\");\n}\n\u003C/blockquote>\n\u003Cp>Dikkat: \u003Cstrong>try...catch\u003C/strong> yalnızca eşzamanlı (synchronous) kodun içindeki hataları yakalar. Promise tabanlı asenkron işlemler için \u003Ccode>.catch()\u003C/code> veya async/await ile try/catch kombinasyonu kullanılmalıdır:\u003C/p>\n\u003Cblockquote>\n// Promise ile\nfetch('/data.json')\n  .then(r => r.json())\n  .catch(err => console.error(err));\n\n// async/await ile\nasync function load() {\n  try {\n    const r = await fetch('/data.json');\n    const data = await r.json();\n  } catch (err) {\n    console.error(err);\n  }\n}\n\u003C/blockquote>\n\n\u003Ch2>İyi Uygulamalar ve İpuçları\u003C/h2>\n\u003Cul>\n  \u003Cli>Varsayılan olarak \u003Cstrong>const\u003C/strong> ile başlayın; gerekiyorsa \u003Cstrong>let\u003C/strong> kullanın.\u003C/li>\n  \u003Cli>Global alanı mümkün olduğunca kirletmeyin; modüller ve fonksiyonlar içinde değişken tanımlayın.\u003C/li>\n  \u003Cli>Açıklayıcı değişken isimleri kullanın (ör. \u003Cem>adet\u003C/em>, \u003Cem>kullaniciAdi\u003C/em>).\u003C/li>\n  \u003Cli>Koşullar ve döngülerde karmaşıklığı azaltmak için yardımcı fonksiyonlar yazın.\u003C/li>\n  \u003Cli>Hataları anlamak için console.log ve tarayıcı debugger araçlarını kullanın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Hızlı Alıştırmalar\u003C/h2>\n\u003Col>\n  \u003Cli>Tarayıcı konsolunda farklı bildirim türlerini (var/let/const) deneyin ve kapsam etkilerini gözlemleyin.\u003C/li>\n  \u003Cli>100 üzerinden not alan bir fonksiyon yazın ve if/else ile harf notu döndüren bir yapı oluşturun.\u003C/li>\n  \u003Cli>Bir dizi içindeki sayıları toplayan bir \u003Cstrong>for\u003C/strong> döngüsü yazın; sonuçları konsolda gösterin.\u003C/li>\n\u003C/ol>\n\n\u003Ch2>Kaynaklar ve İleri Okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide\">JavaScript Guide — MDN\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://web.dev/learn/javascript/control-flow?hl=tr\">Kontrol akışı — web.dev\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://learn.microsoft.com/en-us/scripting/javascript/reference/var-statement-javascript?redirectedfrom=MSDN\">var bildirimi — Microsoft Docs\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.w3schools.com/js/js_variables.asp\">JavaScript Variables — W3Schools\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cem>Not:\u003C/em> Bu yazı temel kavramları uygulamalı örneklerle öğretmeyi amaçlar. Gelişmiş konular (çalışma zamanı optimizasyonları, derin JS iç mekanikleri, tarayıcı uyumluluğu detayları) için resmi dokümantasyon ve ek kaynaklar incelenmelidir.\u003C/p>","JavaScript Başlangıç Kodları: Değişkenler ve Kontrol Akışı —","Yeni başlayanlar için JavaScript'te var, let ve const kullanımı; kapsam (scope), if/else ve switch koşulları, for/while/do...while döngüleri ve try...catch ile ","javascript başlangıç kodları, JavaScript Temelleri, yazılım öğrenme rehberi, kolay kod örnekleri, değişkenler, kontrol akışı","yeni-baslayanlar-icin-javascript-temelleri-degiskenler-ve-kontrol-akisi","2026-05-17T09:08:35.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/f6c6bceaeba65ebfa0ec1fc285271d88.jpg","/media/blog/f6c6bceaeba65ebfa0ec1fc285271d88_thumb.jpg","/media/blog/f6c6bceaeba65ebfa0ec1fc285271d88.webp","/media/blog/f6c6bceaeba65ebfa0ec1fc285271d88_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,731,0,"4 dk okuma süresi","/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temelleri-degiskenler-ve-kontrol-akisi",[],["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/f6c6bceaeba65ebfa0ec1fc285271d88.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temelleri-degiskenler-ve-kontrol-akisi",{"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/yeni-baslayanlar-icin-javascript-temelleri-degiskenler-ve-kontrol-akisi",["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}]