[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascript-temelleri-degiskenler-turler-ve-kisa-ornekler":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},33674,"JavaScript Temelleri: Değişkenler, Türler ve Kısa Örnekler","Bu rehber, JavaScript'te değişken tanımlama (var/let/const), temel veri türleri, kapsam kuralları ve kısa örneklerle başlangıç seviyesindeki geliştiricilere pratik bir giriş sunar.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>JavaScript, modern web uygulamalarında sıkça kullanılan dinamik bir programlama dilidir. Bu makalede temel kavramlara—değişken tanımlama, veri türleri, kapsam (scope) ve kısa örnek uygulamalara—odaklanıyoruz. Amaç, kavramları net ve pratik örneklerle açıklamak; derin teknik ayrıntılara daha sonra geçecekler için sağlam bir temel sağlamak.\u003C/p>\n\n\u003Ch2>Değişkenler: var, let ve const\u003C/h2>\n\u003Cp>JavaScript'te değişken oluşturmak için üç ana anahtar kelime kullanılır: \u003Cstrong>var\u003C/strong>, \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong>. Genel kural olarak; \u003Cstrong>let\u003C/strong> blok düzeyinde (block-scoped), \u003Cstrong>const\u003C/strong> ise yeniden atama yapılmayan sabit değerler için tercih edilir. Bu ayrım ve tanımlar için Programiz'in ilgili sayfasına bakabilirsiniz: \u003Ca href=\"https://www.programiz.com/javascript/variables-constants\">https://www.programiz.com/javascript/variables-constants\u003C/a> (kaynak).\u003C/p>\n\n\u003Cp>Temel kullanım örnekleri:\u003C/p>\n\u003Cblockquote>\n// let ve const örneği\u003Cbr>\nlet isim = \"Ali\";\u003Cbr>\nconst PI = 3.1415;\u003Cbr>\nisim = \"Ayşe\"; // let ile yeniden atama mümkün\u003Cbr>\n// PI = 3.14; // const yeniden atamaya izin vermez (çalıştırıldığında hata verir)\u003Cbr>\n\u003C/blockquote>\n\n\u003Cp>Not: \u003Cstrong>const\u003C/strong> ile tanımlanan bir obje veya diziye yeni ögeler eklemek veya iç özellikleri değiştirmek mümkündür; yalnızca değişkene yeni bir referans atanamaz. Örnek:\u003C/p>\n\u003Cblockquote>\nconst user = { name: \"Ali\" };\u003Cbr>\nuser.name = \"Ayşe\"; // nesne özelliği değiştirilebilir\u003Cbr>\n// user = { name: \"Mehmet\" }; // doğrudan yeniden atama hata verir\u003Cbr>\n\u003C/blockquote>\n\n\u003Ch3>var vs let/const: kapsam ve hoisting\u003C/h3>\n\u003Cp>\u003Cstrong>var\u003C/strong> fonksiyon kapsamına (function-scoped) sahiptir ve tanımlanmadan önce erişildiğinde \u003Cem>hoisting\u003C/em> nedeniyle undefined değeri gösterir. \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong> ise blok kapsamlıdır ve tanımlanmadan önce erişilmeye çalışılırsa \"temporal dead zone\" nedeniyle ReferenceError ile karşılaşılabilir. Bu davranışların ayrıntıları ve örnekleri için JavaScript.info yararlı bir kaynaktır: \u003Ca href=\"https://tr.javascript.info/variables\">https://tr.javascript.info/variables\u003C/a> (kaynak).\u003C/p>\n\n\u003Cblockquote>\n// var ile hoisting örneği\u003Cbr>\nconsole.log(a); // undefined (değişken tanımlanmış ama atama sonrası gerçekleşti)\u003Cbr>\nvar a = 5;\u003Cbr>\n\n// let ile aynı kullanım hata verir\u003Cbr>\n// console.log(b); // ReferenceError\u003Cbr>\nlet b = 5;\u003Cbr>\n\u003C/blockquote>\n\n\u003Ch2>İsimlendirme kuralları\u003C/h2>\n\u003Cp>Değişken isimleri harfler, rakamlar, alt çizgi (_) ve dolar işareti ($) içerebilir; ancak rakamla başlayamaz ve JavaScript anahtar kelimeleriyle çakışmamalıdır. Anlamlı ve açıklayıcı isimlendirme (ör. \u003Cem>kullaniciAdi\u003C/em>, \u003Cem>toplamTutar\u003C/em>) kod okunabilirliğini artırır. Kaynak: \u003Ca href=\"https://www.tutorialsteacher.com/javascript/javascript-variable\">https://www.tutorialsteacher.com/javascript/javascript-variable\u003C/a> (kaynak).\u003C/p>\n\n\u003Ch2>Temel veri türleri\u003C/h2>\n\u003Cp>JavaScript'in temel (primitive) veri türleri genel olarak şunlardır: \u003Cstrong>number\u003C/strong>, \u003Cstrong>string\u003C/strong>, \u003Cstrong>boolean\u003C/strong>, \u003Cstrong>null\u003C/strong>, \u003Cstrong>undefined\u003C/strong>, \u003Cstrong>symbol\u003C/strong> ve \u003Cstrong>bigint\u003C/strong>. Bu sınıflandırma hakkında kısa bir özet için W3Schools'un ilgili sayfasına bakabilirsiniz: \u003Ca href=\"https://www.w3schools.com/js/js_datatypes_primitives.asp\">https://www.w3schools.com/js/js_datatypes_primitives.asp\u003C/a> (kaynak).\u003C/p>\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Tür\u003C/th>\n      \u003Cth>Açıklama\u003C/th>\n      \u003Cth>Kısa örnek\u003C/th>\n    \u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>number\u003C/td>\n      \u003Ctd>Tamsayılar ve ondalık sayılar\u003C/td>\n      \u003Ctd>let s = 42; let pi = 3.14;\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>string\u003C/td>\n      \u003Ctd>Metin verileri\u003C/td>\n      \u003Ctd>let ad = \"Ayşe\";\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>boolean\u003C/td>\n      \u003Ctd>true veya false\u003C/td>\n      \u003Ctd>let aktif = true;\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>null\u003C/td>\n      \u003Ctd>Bilinen şekilde boş bir değer\u003C/td>\n      \u003Ctd>let x = null;\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>undefined\u003C/td>\n      \u003Ctd>Henüz atanmamış değişkenler\u003C/td>\n      \u003Ctd>let y; // undefined\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>symbol\u003C/td>\n      \u003Ctd>Benzersiz, değiştirilemez değerler\u003C/td>\n      \u003Ctd>let id = Symbol(\"id\");\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>bigint\u003C/td>\n      \u003Ctd>Çok büyük tam sayılar\u003C/td>\n      \u003Ctd>let big = 9007199254740991n;\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\n\u003Cp>Bir küçük not: tarihi sebeplerle \u003Cstrong>typeof null\u003C/strong> ifadesi 'object' döndürür; bu JavaScript'teki bilinen bir ayrıntıdır ve tür kontrolü yaparken göz önünde bulundurulmalıdır.\u003C/p>\n\n\u003Ch3>typeof örnekleri\u003C/h3>\n\u003Cblockquote>\ntypeof 5; // \"number\"\u003Cbr>\ntypeof \"metin\"; // \"string\"\u003Cbr>\ntypeof true; // \"boolean\"\u003Cbr>\ntypeof null; // \"object\" (ayrıntı)\u003Cbr>\n\u003C/blockquote>\n\n\u003Ch2>Kapsam (Scope) ve yaşam döngüsü\u003C/h2>\n\u003Cp>Kapsam, bir değişkene hangi kod bloklarının erişebileceğini belirler. Özetle:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Global scope:\u003C/strong> Programın her yerinden erişilen değişkenler (genellikle pencere/ortamın global nesnesine bağlıdır).\u003C/li>\n  \u003Cli>\u003Cstrong>Function scope:\u003C/strong> Fonksiyon içinde var ile tanımlanan değişkenler yalnızca o fonksiyon içinden erişilebilir.\u003C/li>\n  \u003Cli>\u003Cstrong>Block scope:\u003C/strong> let/const ile tanımlanan değişkenler yalnızca tanımlandıkları blok ({ ... }) içinde geçerlidir.\u003C/li>\n\u003C/ul>\n\n\u003Cp>Hoisting kavramı, değişken tanımlamalarının JavaScript tarafından yürütme öncesinde 'yukarı taşındığı' izlenimini verir; ancak davranış \u003Cstrong>var\u003C/strong> ve \u003Cstrong>let/const\u003C/strong> için farklıdır. Daha fazla teknik ayrıntı ve örnekler için JavaScript.info'yu inceleyebilirsiniz: \u003Ca href=\"https://tr.javascript.info/variables\">https://tr.javascript.info/variables\u003C/a> (kaynak).\u003C/p>\n\n\u003Ch2>Kısa, uygulanabilir örnekler\u003C/h2>\n\u003Cp>Aşağıdaki kısa örnekler, yukarıdaki kavramları somutlaştırmak için hazırlanmıştır.\u003C/p>\n\n\u003Ch3>1) Değerlerin birleştirilmesi (template literals)\u003C/h3>\n\u003Cblockquote>\nconst isim = \"Merve\";\u003Cbr>\nconst yas = 28;\u003Cbr>\nconsole.log(`${isim} ${yas} yaşında.`);\u003Cbr>\n\u003C/blockquote>\n\n\u003Ch3>2) Değişken takası (geçici değişkenle)\u003C/h3>\n\u003Cblockquote>\nlet a = 1;\u003Cbr>\nlet b = 2;\u003Cbr>\nlet temp = a;\u003Cbr>a = b;\u003Cbr>b = temp;\u003Cbr>\n// a artık 2, b artık 1\u003Cbr>\n\u003C/blockquote>\n\n\u003Ch3>3) Basit koşul örneği\u003C/h3>\n\u003Cblockquote>\nlet puan = 85;\u003Cbr>\nif (puan >= 50) {\u003Cbr>  console.log('Geçti');\u003Cbr>} else {\u003Cbr>  console.log('Kaldı');\u003Cbr>}\u003Cbr>\n\u003C/blockquote>\n\n\u003Ch2>Hata ayıklama ve iyi uygulamalar (pratik kontrol listesi)\u003C/h2>\n\u003Cul>\n  \u003Cli>Varsayılan olarak \u003Cstrong>const\u003C/strong> kullanın; gerektiğinde \u003Cstrong>let\u003C/strong> tercih edin.\u003C/li>\n  \u003Cli>Kıyaslamalarda \u003Cstrong>===\u003C/strong> ve \u003Cstrong>!==\u003C/strong> kullanarak tür dönüşümlerinden kaynaklı sürprizleri azaltın.\u003C/li>\n  \u003Cli>Anlamlı değişken isimleri seçin (ör. \u003Cem>toplamTutar\u003C/em>, \u003Cem>kullaniciAdi\u003C/em>).\u003C/li>\n  \u003Cli>Tarayıcı konsolunu (DevTools) etkin kullanın: console.log(), debugger, ağ (network) sekmesi gibi araçlar hataları bulmayı kolaylaştırır.\u003C/li>\n  \u003Cli>Statik analiz için ESLint gibi araçlar kullanın; kod standartları tutarlılığı sağlar.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Kaynaklar ve ileri okuma\u003C/h2>\n\u003Cp>Bu makaledeki tanımlar ve temel bilgiler için başvurabileceğiniz bazı kaynaklar:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://www.programiz.com/javascript/variables-constants\">Programiz — JavaScript Değişkenler ve Sabitler\u003C/a> (var/let/const açıklamaları).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.w3schools.com/js/js_datatypes_primitives.asp\">W3Schools — JavaScript Primitif Veri Türleri\u003C/a> (temel türler özeti).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://tr.javascript.info/variables\">JavaScript.info — Değişkenler\u003C/a> (kapsam, hoisting ve detaylı örnekler).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.tutorialsteacher.com/javascript/javascript-variable\">TutorialsTeacher — JavaScript Değişkenler\u003C/a> (isimlendirme ve örnekler).\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Özet\u003C/h2>\n\u003Cp>Bu rehber, JavaScript'te değişken tanımlama yöntemlerini (var/let/const), temel veri türlerini ve kapsamla ilgili önemli noktaları pratik örneklerle sundu. Temel olarak; anlamlı isimlendirme, \u003Cstrong>const\u003C/strong> önceliği ve tür kontrolü iyi uygulamalardır. Daha derin konular (fonksiyonel programlama, asenkron işlemler, performans optimizasyonu) için ileri kaynaklara göz atabilirsiniz.\u003C/p>\n\n\u003Cp>\u003Cem>Not:\u003C/em> İçerikte verilen kod örnekleri eğitim amaçlıdır ve gerçek üretim ortamına alınmadan önce uygun test ve güvenlik değerlendirmelerinden geçirilmelidir.\u003C/p>","JavaScript Temelleri — Değişkenler, Türler ve Hızlı Örnekler","Bu rehber, JavaScript'te değişken tanımlama (var/let/const), temel veri türleri, kapsam kuralları ve kısa uygulamalı örneklerle başlangıç seviyesindeki geliştir","JavaScript Temelleri, javascript başlangıç kodları, yazılım öğrenme rehberi, adım adım programlama öğrenme, JS değişkenler, JS veri türleri","javascript-temelleri-degiskenler-turler-ve-kisa-ornekler","2026-05-11T11:09:05.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/14f35b792aca5fb6078a68bac94e1fb0.jpg","/media/blog/14f35b792aca5fb6078a68bac94e1fb0_thumb.jpg","/media/blog/14f35b792aca5fb6078a68bac94e1fb0.webp","/media/blog/14f35b792aca5fb6078a68bac94e1fb0_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,764,0,"4 dk okuma süresi","/blog/javascript-temelleri/javascript-temelleri-degiskenler-turler-ve-kisa-ornekler",[],["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/14f35b792aca5fb6078a68bac94e1fb0.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/javascript-temelleri-degiskenler-turler-ve-kisa-ornekler",{"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-degiskenler-turler-ve-kisa-ornekler",["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}]