[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascript-temel-kavramlari-degisken-fonksiyon-ve-scope-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},32185,"JavaScript temel kavramları: değişken, fonksiyon ve scope örnekleri","Bu yazıda JavaScript başlangıç kodları için değişken tanımlama (let, const), fonksiyon yapıları ve farklı scope türleri örneklerle açıklanır. Pratik ipuçları ve kısa kontrol listesi ile öğrenmenizi hızlandırır.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>JavaScript öğrenirken üç temel kavram sıkça karşımıza çıkar: değişkenler, fonksiyonlar ve scope (kapsam). Bu kavramları anlamak, hem küçük script'lerde hem de daha büyük uygulamalarda hatasız ve sürdürülebilir kod yazmak için önemlidir. Aşağıda her kavramı kısa tanımlarla, çalışan örneklerle ve pratik önerilerle ele alacağız.\u003C/p>\n\n\u003Ch2>Değişkenler: ne için ve nasıl kullanılır?\u003C/h2>\n\u003Cp>Değişkenler, programınız içinde veri saklamak için kullanılır. Modern JavaScript'te en çok kullanılan iki tanımlama anahtar kelimesi \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong>'tır. Genel kurgu olarak \u003Cstrong>const\u003C/strong> yeniden atama yapılmayacağı kesin olan değerler için, \u003Cstrong>let\u003C/strong> ise değişebilecek değerler için tercih edilir. Resmi dokümantasyonda değişken tanımlamalarıyla ilgili detayları bulabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/docs/Learn/JavaScript/First_steps/Variables\">MDN Web Docs — Variables\u003C/a>.\u003C/p>\n\n\u003Cp>Basit örnekler:\u003C/p>\n\u003Cp>\u003Cstrong>const name = 'Ayşe';\u003C/strong>\u003Cbr>\n\u003Cstrong>let count = 0;\u003C/strong>\u003Cbr>\n\u003Cstrong>count = count + 1; // count şimdi 1\u003C/strong>\u003C/p>\n\n\u003Cp>\u003Cstrong>const\u003C/strong> ile tanımlanan bir değişkenin referansı yeniden atanamaz; bununla birlikte eğer değişken bir obje ise, objenin içindeki alanlar değiştirilebilir. Bu davranış hakkında daha fazla bilgi için MDN notlarına bakabilirsiniz.\u003C/p>\n\n\u003Ch3>Ne zaman const, ne zaman let?\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Öncelikle const kullanın\u003C/strong>: Bir değerin yeniden atanmasını istemiyorsanız const tercih edin.\u003C/li>\n  \u003Cli>\u003Cstrong>Değişecek değerler için let\u003C/strong>: Döngü sayacı, kullanıcı girişi gibi değişebilecek değerlerde let kullanın.\u003C/li>\n  \u003Cli>\u003Cstrong>Global değişkenlerden kaçının\u003C/strong>: Gereksiz global değişkenler isim çakışmalarına ve yönetimi zor kodlara yol açar.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Fonksiyonlar: kod bloklarını yeniden kullanma\u003C/h2>\n\u003Cp>Fonksiyonlar, belirli bir görevi yerine getiren, tekrar kullanılabilir kod bloklarıdır. Fonksiyon tanımlamak için klasik sözdizimi \u003Cstrong>function\u003C/strong> anahtar kelimesidir; resmi referans için: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">MDN Web Docs — function\u003C/a> ve öğretici örnekler için: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Functions\">MDN — Functions (Learn)\u003C/a>.\u003C/p>\n\n\u003Cp>Temel fonksiyon örneği:\u003C/p>\n\u003Cp>\u003Cstrong>function greet(name) {\u003C/strong>\u003Cbr>\n\u003Cstrong>  return 'Merhaba, ' + name + '!';\u003C/strong>\u003Cbr>\n\u003Cstrong>}\u003C/strong>\u003Cbr>\n\u003Cstrong>console.log(greet('Mert'));\u003C/strong>\u003C/p>\n\n\u003Cp>Fonksiyonlar parametre alabilir, değer döndürebilir ve kendi scope'larını oluşturur. Fonksiyon içinde tanımlanan değişkenler genellikle sadece o fonksiyon içinde erişilebilir; bu konu bir sonraki bölümde scope ile birlikte ele alınacaktır.\u003C/p>\n\n\u003Ch3>Fonksiyon ifadeleri ve kısa notlar\u003C/h3>\n\u003Cul>\n  \u003Cli>Fonksiyonları küçük, tek sorumluluklu parçalara bölün. Her fonksiyon tek bir amaca hizmet etmelidir.\u003C/li>\n  \u003Cli>Fonksiyon tanımını hangi yöntemle yapacağınız (deklarasyon veya ifade) bazen hoisting davranışını etkiler; bu konuyu resmi dokümanda görebilirsiniz.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Scope (kapsam): değişken nereden görünür?\u003C/h2>\n\u003Cp>Scope, bir değişkenin veya fonksiyonun erişilebilir olduğu kod bölgesidir. JavaScript'te yaygın scope türleri global, fonksiyon ve blok scope'tur. Daha fazla tanım için MDN Glossary'deki scope maddesine bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Glossary/Scope\">MDN — Scope\u003C/a> ve global kapsam hakkında bilgi için: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Glossary/Global_scope\">MDN — Global scope\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnek: fonksiyon ve blok scope\u003C/h3>\n\u003Cp>\u003Cstrong>function demo() {\u003C/strong>\u003Cbr>\n\u003Cstrong>  let inside = 'içeride';\u003C/strong>\u003Cbr>\n\u003Cstrong>  console.log(inside); // 'içeride'\u003C/strong>\u003Cbr>\n\u003Cstrong>}\u003C/strong>\u003Cbr>\n\u003Cstrong>demo();\u003C/strong>\u003Cbr>\n\u003Cstrong>// console.log(inside); // burada inside görünür değil, erişilmeye çalışılırsa hata olur\u003C/strong>\u003C/p>\n\n\u003Cp>Block scope örneği (let/const):\u003C/p>\n\u003Cp>\u003Cstrong>if (true) {\u003C/strong>\u003Cbr>\n\u003Cstrong>  let blockVar = 5;\u003C/strong>\u003Cbr>\n\u003Cstrong>  const blockConst = 'x';\u003C/strong>\u003Cbr>\n\u003Cstrong>}\u003C/strong>\u003Cbr>\n\u003Cstrong>// console.log(blockVar); // blockVar görünür değil\u003C/strong>\u003C/p>\n\n\u003Cp>Var ile tanımlanan değişkenler function scope'a tabidir; yani bir blok içinde var ile tanımlanan bir değişken, o bloğun dışından da erişilebilir olabilir. Bu farklılık, kodun davranışını etkileyebilir; modern kodlarda genelde let/const tercih edilir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Bütünleştirilmiş örnek: sayaç fonksiyonu\u003C/h2>\n\u003Cp>Basit bir örnek üzerinden değişken, fonksiyon ve scope'u birleştirelim. Aşağıdaki mantık, bir sayaç değerini saklayıp her çağırdığınızda artıran bir yapı gösterir:\u003C/p>\n\u003Cp>\u003Cstrong>function makeCounter() {\u003C/strong>\u003Cbr>\n\u003Cstrong>  let count = 0; // fonksiyon scope'u içinde\u003C/strong>\u003Cbr>\n\u003Cstrong>  return function() {\u003C/strong>\u003Cbr>\n\u003Cstrong>    count = count + 1;\u003C/strong>\u003Cbr>\n\u003Cstrong>    return count;\u003C/strong>\u003Cbr>\n\u003Cstrong>  }\u003C/strong>\u003Cbr>\n\u003Cstrong>}\u003C/strong>\u003Cbr>\n\u003Cstrong>const counter = makeCounter();\u003C/strong>\u003Cbr>\n\u003Cstrong>console.log(counter()); // 1\u003C/strong>\u003Cbr>\n\u003Cstrong>console.log(counter()); // 2\u003C/strong>\u003C/p>\n\n\u003Cp>Bu örnekte iç fonksiyon, dış fonksiyonun \u003Cstrong>count\u003C/strong> değişkenine erişmeye devam eder. Bu şekilde fonksiyonlar ve scope birlikte çalışarak veriyi saklayabilir. (Temel scope tanımları için MDN kaynaklarına bakabilirsiniz.)\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Pratik ipuçları ve kontrol listesi\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Cstrong>const öncelikli\u003C/strong>: Değer değişmeyecekse önce const kullanın.\u003C/li>\n  \u003Cli>\u003Cstrong>Anlamlı isimler\u003C/strong>: Değişken ve fonksiyon adları işlevini anlatmalı (ör. \u003Cem>totalPrice\u003C/em>, \u003Cem>calculateTax\u003C/em>).\u003C/li>\n  \u003Cli>\u003Cstrong>Küçük fonksiyonlar\u003C/strong>: Bir fonksiyonun amacı net olsun; birden çok iş yapmasın.\u003C/li>\n  \u003Cli>\u003Cstrong>Global kapsamı sınırlayın\u003C/strong>: Gereksiz global değişken kullanmayın; modüller veya fonksiyonlarla kapsama sınırı koyun.\u003C/li>\n  \u003Cli>\u003Cstrong>Test edin\u003C/strong>: Tarayıcı konsolunda veya Node.js ile küçük testler yaparak değişken ve fonksiyon davranışını doğrulayın.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Hızlı referans\u003C/h2>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Kelime\u003C/th>\n      \u003Cth>Davranış\u003C/th>\n    \u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>let\u003C/td>\n      \u003Ctd>Block-scoped; yeniden atanabilir.\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>const\u003C/td>\n      \u003Ctd>Block-scoped; yeniden atama yok (objelerin içi değiştirilebilir).\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>var\u003C/td>\n      \u003Ctd>Function-scoped; hoisting davranışı vardır; modern kodda let/const tercih edilir.\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\n\u003Chr>\n\n\u003Ch2>Kaynaklar ve daha fazla okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/docs/Learn/JavaScript/First_steps/Variables\">MDN Web Docs — Storing the information you need — Variables\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">MDN Web Docs — function\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Glossary/Scope\">MDN Web Docs — Scope (glossary)\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Functions\">MDN — Functions (Learn)\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Sonuç\u003C/h2>\n\u003Cp>Değişkenler, fonksiyonlar ve scope JavaScript'in yapı taşlarıdır. Bu üç kavramı örneklerle ve pratik kurallarla öğrendikten sonra, kod yazarken daha güvenilir ve okunabilir çözümler üretebilirsiniz. Resmi referansları (MDN) takip ederek detayları ve istisnaları adım adım keşfetmeniz faydalı olacaktır.\u003C/p>","JavaScript temel kavramları: değişken, fonksiyon ve scope ör","Bu rehber, JavaScript başlangıç kodları için değişken tanımlama (let, const), fonksiyon oluşturma ve scope (kapsam) kavramlarını örneklerle ve pratik ipuçlarıy","javascript başlangıç kodları, JavaScript Temelleri, değişkenler js örnek, js scope örnekleri, başlangıç javascript kodları","javascript-temel-kavramlari-degisken-fonksiyon-ve-scope-ornekleri","2026-05-07T10:21:27.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/e9e8654d51e1a5691153b565877759b3.jpg","/media/blog/e9e8654d51e1a5691153b565877759b3_thumb.jpg","/media/blog/e9e8654d51e1a5691153b565877759b3.webp","/media/blog/e9e8654d51e1a5691153b565877759b3_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,667,0,"4 dk okuma süresi","/blog/javascript-temelleri/javascript-temel-kavramlari-degisken-fonksiyon-ve-scope-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/e9e8654d51e1a5691153b565877759b3.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/javascript-temel-kavramlari-degisken-fonksiyon-ve-scope-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-temel-kavramlari-degisken-fonksiyon-ve-scope-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}]