JavaScript'te diziler ve nesneler kullanımı, web geliştirme alanında önemli bir yere sahiptir Bu makalede, JavaScript dilindeki diziler ve nesnelerin nasıl kullanıldığı hakkında bilgiler verilmiştir Bu konuda bilgi sahibi olmak isteyenler için bu yazıyı kaçırmamalısınız!
JavaScript öğrenmek isteyenler için diziler ve nesneler oldukça önemli konulardır. Bu makale, JavaScript'te dizilerin ve nesnelerin nasıl kullanılacağına dair temel bilgileri içermektedir.
Öncelikle, dizilerin tanımlanması ve kullanımı ele alınacak. Diziler, aynı türden değerlerin bir arada tutulduğu listedir. Dizi tanımlamak için '[]' parantezleri kullanılır. Listenin elemanları virgülle ayrılır ve sayısal değerler veya karakterler kullanılabilir. Diziye eleman eklemek için 'push()' fonksiyonu, eleman silmek için ise 'pop()' fonksiyonu kullanılabilir. Dizi içinde gezinmek için 'for' veya 'forEach()' fonksiyonları kullanılabilir.
Nesnelerin kullanımı ise, JavaScript'te oldukça yaygındır. Nesneler, bir veya birden çok özelliği olan veri yapılarıdır. Nesne oluşturmak için öncelikle bir constructor oluşturulmalıdır. Bu constructor, nesne oluşturmaya olanak sağlayan bir fonksiyondur. Yaratılan nesnenin özellikleri ise, '.' operatörü ile belirtilir. Nesne içinde fonksiyon tanımlamak için ise, fonksiyonun anahtar kelimesinden sonra parantez açılıp kapatıldıktan sonra süslü parantez içine kodlar yazılabilir.
Bu makalede, nesne ve dizi kullanımına örnekler de verilecektir. Dizilerle çalışmak için basitten karmaşığa örnekler sunulacak ve nesne kullanımı özellikle web geliştirme alanında kullanımın gerekliliğine dair örneklerle anlatılacaktır.
Dizilerin Tanımlanması
JavaScript programlama dilinde, diziler çok sık kullanılan veri tipidir ve birçok durumda oldukça kullanışlıdır. Diziler genellikle belirli bir veri tipindeki elemanların bir araya getirilmesiyle oluşturulur. Dizilerin tanımlanabilmesi için köşeli parantez kullanılır ve elemanlar virgülle ayrılır. Örneğin:
let isimler = ["Ali", "Veli", "Ayşe", "Fatma"];let sayilar = [1, 2, 3, 4, 5];Dizilerde eleman ekleme ve silme işlemleri, push(), pop(), shift(), unshift() gibi fonksiyonlar kullanılarak gerçekleştirilir. push() fonksiyonu, dizinin sonuna belirtilen elemanı ekler. pop() fonksiyonu, dizinin son elemanını siler. shift() fonksiyonu, dizinin ilk elemanını siler ve diziyi günceller. unshift() fonksiyonu ise, dizinin başına eleman ekler ve diziyi günceller. Örneğin:
let sayilar = [1, 2, 3, 4, 5];sayilar.push(6); // [1, 2, 3, 4, 5, 6]sayilar.pop(); // [1, 2, 3, 4, 5]sayilar.shift(); // [2, 3, 4, 5]sayilar.unshift(0); // [0, 2, 3, 4, 5]Dizilerdeki elemanlara erişmek için for döngüsü veya forEach() fonksiyonu kullanılabilir. for döngüsüyle dizideki her eleman tek tek gezilebilirken, forEach() fonksiyonu, dizinin her bir elemanına uygulanan bir fonksiyon ile çalışır. Örneğin:
let sayilar = [1, 2, 3, 4, 5];for(let i=0; iBu örneklerle birlikte JavaScript'teki diziler hakkında kısaca bilgi verdik. Dizilerin tanımlanması, eleman ekleme/silme işlemleri ve dizi içinde gezinme fonksiyonları gibi konular önemli olmakla birlikte, dizilerin daha farklı kullanım örnekleri de vardır. Ancak bu temel konuların iyi anlaşılması, daha karmaşık işlemlerin yapılabilmesine olanak tanır.
Nesnelerin Kullanımı
Nesneler, JavaScript içinde tanımlanabilen objelerdir. Temel anlamda nesne, belirli bir veri türüne sahip olabilecek bir veri kümesi olarak tanımlanabilir. Nesnelerin kullanım amacı, işlevsel olarak birbirine bağlı verileri bir arada tutarak daha kolay yönetilmesini sağlamaktır.
Bir nesne oluşturmak için, öncelikle nesnenin prototipini belirlememiz gerekiyor. Prototip, nesne için temel bir yapı çizgisidir. Nesne oluştururken, bu yapı çizgisine göre değişiklik yaparak nesnemizi özelleştirebiliriz. Nesne oluşturma işlemi sırasında, nesneye özellikler atayabiliriz. Bu özellikler, nesnenin içinde bulunan verilerdir ve anahtar-değer çiftleri şeklinde tanımlanırlar.
Nesne özelliklerine değer atama işlemi için, anahtar kelime "this" kullanılarak yapılabiliyor. "This", nesneyi işaret eden bir referansdır ve nesne içinde tanımlanan fonksiyonlarda kullanılan yerel bir değişkendir. Nesne içinde fonksiyon tanımlama ise, nesnenin yapısına uygun şekilde çalışacak özelleştirilmiş işlevler tanımlamak amacıyla kullanılır.
Örnek olarak, bir müşteri nesnesi oluşturalım. Bu nesnenin özellikleri arasında adı, soyadı ve adresi yer alıyor. Nesnenin yapısını belirlemek için bir prototip oluşturur ve anahtar-değer çiftleriyle özelliklerimizi nesnemize ekleriz. Örneğimizde, müşteri nesnemizi "Customer" adında bir prototip olarak yaratıyoruz:
| Prototip | Özellik | Değer |
|---|---|---|
| Customer | Ad | John |
| Customer | Soyad | Doe |
| Customer | Adres | 123 Main St |
Özelliklere değer atama işlemi ise aşağıdaki gibi yapılabilir:
Customer.Ad = "John";Customer.Soyad = "Doe";Customer.Adres = "123 Main St";
Nesne içinde özelleştirilmiş fonksiyonları kullanarak, bir özelliğin değerini değiştirebilir veya nesne içinde farklı işlemler yapabiliriz. Örnek olarak, müşteri nesnemize yeni bir özellik ekleyip, daha sonra bu özelliğin değerini bir fonksiyonla değiştirebiliriz:
Customer.Telefon = "555-1234";Customer.telefonDegistir = function(yeniTelefon) { this.Telefon = yeniTelefon;};Yukarıdaki kod, "telefonDegistir" adında bir fonksiyon oluşturarak müşterimizin telefon numarasını değiştiriyor. Fonksiyonun ilk parametresi, değiştirilecek yeni telefon numarasını temsil ediyor. Nesne içindeki "this" anahtar kelimesi, fonksiyonun çalıştığı nesneyi işaret ediyor. Bu sayede, fonksiyon içinde "this.Telefon" ifadesi, müşteri nesnemizin "Telefon" özelliğini işaret eder.
Nesneler, JavaScript'te oldukça önemli bir veri yapısıdır ve özellikle web geliştirme için büyük bir avantaj sağlarlar. Yeterli bilgi ve deneyim kazanarak nesneleri etkin bir şekilde kullanmak, yazdığımız kodların daha kolay anlaşılmasını ve daha az hata yapmamızı sağlar.
Nesne Yaratma
Nesne yaratma işlemi, JavaScript'te oldukça önemli bir konudur. Bu işlem sayesinde, belirli özellikleri ve fonksiyonları olan bir nesne oluşturabilirsiniz. Nesne yaratırken en yaygın kullanılan yöntem, prototip yöntemidir. Prototip yöntemi, bir nesne yaratırken öncelikle bir prototip nesnesi oluşturarak başlar. Bu prototip nesnesi, yeni nesnenin özelliklerini ve fonksiyonlarını kalıtım yoluyla alacaktır. Böylece, bir nesne örneği oluşturulduğunda, prototip nesnesinden özellikleri miras alarak işlem yapabilirsiniz.
Bunun yanı sıra, JavaScript'te nesne model oluşturma yöntemleri de bulunmaktadır. Bu yöntemler sayesinde, nesneleri daha belirgin bir şekilde tanımlayabilirsiniz. Nesne model oluşturma işlemi, nesnenin özelliklerinin ve fonksiyonlarının direkt olarak belirlendiği bir yöntemdir. Bu sayede, prototip yöntemine göre daha özelleştirilmiş nesneler oluşturabilirsiniz.
| Yöntem | Açıklama |
|---|---|
| Object.create() | Belirli bir prototip nesnesinden yeni bir nesne oluşturur. |
| Constructor Functions | Belirli özellikleri ve fonksiyonları içeren bir nesne modeli oluşturur ve bu modeli kullanarak yeni nesneler oluşturur. |
| Class Definitions | ECMAScript 6 ile gelen bir özellik olan sınıf tanımları, bir nesne modeli oluşturmak için kullanılabilir. |
Nesne yaratma işleminde, prototip yöntemi ve nesne model oluşturma yöntemleri önemli bir yere sahiptir. Bu yöntemler sayesinde, nesnelerin özellikleri ve fonksiyonları daha rahat bir şekilde belirlenebilir. Ayrıca, hangi yöntemin kullanılacağı projeye göre değişebilir. Bu nedenle, nesne yaratma işleminde yöntem seçimi oldukça önemlidir.
Özellik Belirleme
Nesnelerin belirli özelliklerine erişebilmeniz için özellik belirlemenin yöntemleri oldukça önemlidir. Özellikler, nesnelerin nitelikleri olarak düşünülebilir ve nesnelerin özellikleri tanımlandıkça daha fonksiyonel hale gelirler.
Bir özelliğin belirtilmesi için, aşağıdaki örnekte olduğu gibi nesne adı, nokta işareti ve özellik adı arasına nokta koymak gerekmektedir.
nesneAdi.ozellikAdi
Bu şekilde yapılan belirleme işlemi nesnenin özelliğini çağırmak için kullanılır. Özelliğin tanımlanması ise bir varyant belirtilerek yapılır. Örneğin, aşağıdaki örnek kod bloğunda bir nesnenin adı belirlenmiş ve bu nesnenin bir özelliği olan yaş da tanımlanmıştır:
var kisi = { adi:"Ahmet", soyadi:"Yılmaz", yas:25};Bu kodda kisi adında bir nesne oluşturulmuş ve nesnenin adı, soyadı ve yaş özellikleri belirlenmiştir. Yaş özelliğinin tanımlamasında "var" kelimesi ile tanımlama yapılırken, özelliğin adı ve değeri arasına ":" işareti koyulmuştur.
Oluşturulan bir nesne için özellik belirlemenin başka bir yöntemi ise nesne modelidir. Bu yöntemde, bir nesne şablon olarak oluşturulup bu şablondan yeni nesneler oluşturulur. Nesne modeli, özellikleri ve bu özelliklere atanan değerleri yine varyant olarak belirtir. Aşağıdaki örnekte bir araba modeli oluşturulmuş ve bu modeli şablon olarak kullanarak iki farklı araç oluşturulmuştur:
var arabaModeli = { marka:"BMW", yil:2020, motor:{ silindirSayisi:6, beygirGucu:300 }};var araba1 = Object.create(arabaModeli);araba1.renk = "Mavi";var araba2 = Object.create(arabaModeli);araba2.renk = "Kırmızı";Bu kodda, bir araba modeli oluşturulmuş ve bu modele özellikler belirtilmiştir. Yeni bir araba oluşturmak için "Object.create" yöntemi kullanılır ve yeni arabanın renk özelliği de belirlenir. Bu şekilde, araç özelliklerine göre birçok araç oluşturulabilir.
Bu örneklerde görüldüğü gibi, özelliğin tanımlandığı yerde değer de atanabilmektedir. Özelliklere atanacak olan değerler belirtilirken değiştirilebilir olmalıdır.
Özellik belirleme konusu, JavaScript'teki nesne kullanımının temel konularından biridir ve kendi işlevselliğinizi yaratmak için anahtar bir adımdır.
Fonksiyon Tanımlama
JavaScript'te, bir nesne içinde fonksiyon tanımlamak oldukça kolaydır. Fonksiyonlar, bir veya daha fazla parametre alabilirler ve birden fazla işlem yapabilirler. Nesne içindeki fonksiyonlar, genellikle bir nesnenin belirli bir özelliğiyle ilgili işlemleri gerçekleştirmek için kullanılırlar.
Fonksiyon tanımlamak için, nesne adının yanına nokta koyulur ve ardından yeni bir fonksiyon ismi yazılır. Fonksiyon tanımlandıktan sonra, özelliklerle aynı şekilde çağrılırlar ve çalıştırırlar.
Örneğin, bir gösterim nesnesi yarattığınızda ve bu nesne içinde bir fonksiyon 'çalıştır' oluşturduğunuzda, bu fonksiyonu aşağıdaki gibi kullanabilirsiniz:
gösterimNesnesi.çalıştır();
Fonksiyonların kullanım alanları, programın ihtiyacına göre değişebilir. Bir internet sitesi için, bir formu doğrulamak için bir fonksiyon kullanabilirsiniz. Ayrıca, bir nesne içindeki fonksiyonlar, belirli bir özellik veya metot içinde kullanımı kolaylaştırır.
Örneğin, bir yaratıcı fonksiyonu tanımlarken, bu fonksiyonun bir prototip yöntemi kullanılarak bir nesne modeli oluşturulması gerekir. Bu yöntem, nesne üzerindeki herhangi bir değişikliğin tüm nesnelere uygulanması için kullanışlıdır.
function Yaratıcı() { this.değer1 = "ilk değer", this.değer2 = "ikinci değer", this.metot = function(){ alert("Bu bir metottur."); }}Yukarıdaki örnekte, Yaratıcı fonksiyonu, bir nesne yaratmak için kullanılır. Bu fonksiyon, 'değer1' ve 'değer2' özelliklerinin yanı sıra 'metot' adlı bir fonksiyon içerir. Bu özellikleri ve fonksiyonları kullanarak, bir nesne oluşturulabilir ve daha sonra başka nitelikler veya fonksiyonlar eklenebilir.
Fonksiyonların kullanım alanları ve özellikleri oldukça çeşitlidir. Bir internet sitesi için form doğrulamayı kolaylaştırmak, bazı işlemleri bir nesne içinde tutmak, kodun okunabilirliğini ve modülerliğini artırmak için fonksiyonları kullanabilirsiniz.
Nesne İçinde Gezinme
Nesnelerin içindeki özelliklere ulaşmak ve onları değiştirmek için farklı yöntemler vardır. Bunlar genellikle dot (.) ve köşeli parantezler [] ile yapılır. Dot operatörü, nesnenin özelliğine doğrudan erişim sağlamak için kullanılır.
Örneğin; bir nesne özelliğine ulaşmak istediğimizde şu şekilde yapabiliriz:
var arabalar = { marka: 'Mercedes', model: 'AMG GT', yil: 2021};console.log(arabalar.marka); // Mercedesconsole.log(arabalar.yil); // 2021Köşeli parantezler ise nesnenin özelliğine değişken adı üzerinden erişmek için kullanılır. Bu özellikle, nesnenin özelliğine erişim için değişken kullanmanız gerektiğinde kullanışlıdır.
Örneğin; elimizde değişkenlerden biri "ozellik" olsun ve bu değişken ile nesnenin bir özelliğine ulaşmak istediğimizde şu şekilde yapabiliriz:
var insan = { ad: 'Can', soyad: 'Yılmaz', yas: 27};var ozellik = 'soyad';console.log(insan[ozellik]); // YılmazAyrıca, 'for...in' döngüsü de nesne içinde gezinme işlemi için kullanılabilir. Bu döngü ile nesnenin her özelliği taranır ve işlem yapılabilir.
Örneğin, aşağıdaki örnekte, nesnenin tüm özellikleri döngü ile taranarak konsola yazdırılır:
var ogrenci = { ad: 'Mehmet', soyad: 'Çalışkan', ogrenim_turu: 'Lisans', yas: 21};for (var ozellik in ogrenci) { console.log(ozellik + ': ' + ogrenci[ozellik]);}Bu örnekte çıktı:
ad: Mehmetsoyad: Çalışkanogrenim_turu: Lisansyas: 21
Gördüğünüz gibi, nesne içinde gezinme farklı yöntemlerle yapılabilir ve hangi yöntemin kullanılacağı ihtiyacınıza ve gereksinimlerinize bağlı olarak değişebilir.
Dizi ve Nesne Kullanımına Örnekler
JavaScript'te diziler ve nesneler oldukça önemli veri yapılarıdır. Bunların kullanımı, birçok alanda hayatımızı kolaylaştırmaktadır. Bu sebeple, örneklerle dizi ve nesne kullanımı hakkında daha detaylı bilgi sahibi olmak oldukça faydalıdır.
Dizi kullanımı örneklerine bakarak başlayalım. Örneğin; bir restoranın menüsünde kaç çeşit yemek olduğunu kontrol etmek için bir dizi kullanabiliriz. Bu dizi içinde yemeklerin adı ve fiyatı bilgisi tutulabilir. Menüye yeni bir yemek eklemek isteyebiliriz. O zaman diziye aşağıdaki kod parçasıyla yeni bir eleman ekleyebiliriz:
menu.push({name: "Köfte", price: 20});Burada, "name" ve "price" özellikleri olan bir nesne yaratıyoruz ve bu nesneyi "push()" fonksiyonuyla dizinin sonuna ekliyoruz.
Nesne kullanımı örneklerinde ise web geliştirme alanında daha sık karşılaşırız. Örneğin, bir web sayfasında kullanıcıların email adresi ve şifrelerinin tutulduğu bir nesne tanımlayabiliriz. Bu nesneye aşağıdaki kod parçasıyla bir kaç özellik ve değer atama işlemi yapabiliriz:
let kullanici = { ad: "Ali", email: "ali@mail.com", sifre: "1234"};Ayrıca, bu nesne içinde fonksiyon da tanımlayabiliriz. Örneğin, kullanıcı şifresini güncellemek için aşağıdaki gibi bir fonksiyon yazabiliriz:
kullanici.sifreGuncelle = function(yeniSifre) { this.sifre = yeniSifre;};Burada, "sifreGuncelle()" fonksiyonu kullanıcı nesnesine eklenir ve "this" ile nesneye ait özelliklere erişerek yeni bir şifre ataması yapar.
Yukarıdaki örneklerin yanı sıra, birçok farklı dizi ve nesne kullanım örneği bulunmaktadır. Bu örneklerin araştırılması ve uygulaması, JavaScript geliştiricileri için oldukça faydalı olacaktır.
Dizilerle Çalışmak
JavaScript'te diziler oldukça yaygın kullanılan veri yapılarından biridir ve birçok alanda pratik bir çözüm sunar. Diziler, benzer türdeki verileri saklamak için kullanılabilir ve elemanların indeksleri sayesinde kolayca erişilebilir.
Dizi kullanımına yönelik basit örneklerden başlayarak, daha karmaşık işlemlerin nasıl yapılabileceği hakkında örnekler vermek mümkündür. Örneğin, boş bir dizi oluşturmak için aşağıdaki kod parçası kullanılabilir:
var dizi = []; |
Bu şekilde "dizi" isimli boş bir dizi oluşturmuş olduk. Dizi içerisine eleman eklemek için ise "push()" fonksiyonu kullanılabilir. Örneğin:
dizi.push("elma");dizi.push("armut"); |
Bu şekilde "dizi" isimli dizinin içine önce "elma", sonra da "armut" elemanları eklenmiş oldu. Dizideki eleman sayısını öğrenmek için ise "length" özelliği kullanılabilir:
console.log(dizi.length); |
Bu kod parçası, konsolda "2" değerini gösterecektir. Dizilerin içindeki elemanlara indeks numaraları ile erişilebilir. Örneğin:
console.log(dizi[0]); // "elma" değerini gösterirconsole.log(dizi[1]); // "armut" değerini gösterir |
Bu şekilde dizinin ilk elemanına "0" indeksi ile, ikinci elemanına ise "1" indeksi ile erişilmiş olur. Dizideki elemanları silmek için "pop()" fonksiyonu kullanılabilir:
dizi.pop(); // son eleman ("armut") silinirconsole.log(dizi); // ["elma"] |
Bu şekilde "dizi" isimli diziden son elemanı ("armut") silmiş olduk. Dizinin tamamını ya da belirli bir kısmını da kopyalamak veya kesmek için ise "slice()" fonksiyonu kullanılabilir:
var yeniDizi = dizi.slice(); // "dizi" dizisi kopyalanarak "yeniDizi" isimli yeni bir dizi oluşturulurvar belirliDizi = dizi.slice(0,1); // "dizi" dizisinin sadece ilk elemanı alınarak "belirliDizi" isimli yeni bir dizi oluşturulur |
JavaScript'te diziler, programlama dillerinde olduğu gibi oldukça önemli bir yer tutar. Dizi kullanımını öğrenerek, farklı amaçlar için kullanabilmek mümkündür.
Nesne Kullanımı Örnekleri
Web geliştirme alanında nesne kullanımı oldukça önemlidir. Özellikle büyük ve karmaşık projelerde, nesneler sayesinde kodlar daha anlaşılır ve düzenli hale getirilebilir. Bu nedenle, nesne kullanımı örnekleri de oldukça değerlidir.
Bir örnek olarak, bir web sayfasında kullanıcıların girdiği bilgilerin doğru olup olmadığını kontrol etmek istediğinizi düşünelim. Bunun için bir nesne oluşturabilir ve bu nesne üzerinden doğrulama işlemlerini gerçekleştirebilirsiniz. Bu sayede, kodların daha düzenli olmasını sağlayabilir ve doğrulama işlemlerindeki hataları daha kolay bir şekilde tespit edebilirsiniz.
- Bir diğer örnek olarak, bir e-ticaret sitesinde kullanıcının sepetindeki ürünleri takip etmek istediğinizi düşünelim. Bu durumda, her ürün için bir nesne oluşturabilir ve bu nesneler üzerinden sepet işlemlerini gerçekleştirebilirsiniz. Bu sayede, kullanıcının sepetindeki ürünleri daha kolay bir şekilde yönetebilirsiniz.
- Web geliştirme alanında bir diğer kullanım alanı ise, AJAX işlemleri sırasında nesnelerin kullanımıdır. Bir AJAX işlemi sırasında, sunucudan gelen verileri nesne olarak işleyebilir ve bu nesneler üzerinden gerekli işlemleri gerçekleştirebilirsiniz. Bu sayede, veri işleme işlemleri daha hızlı ve düzenli bir şekilde gerçekleştirilebilir.
Özetle, nesne kullanımı örnekleri, web geliştirme alanında oldukça yaygın ve önemli bir konudur. Nesneler sayesinde kodlar düzenli hale getirilebilir, işlemler daha hızlı gerçekleştirilebilir ve hatanın tespiti kolaylaşır. Bu nedenle, web geliştirme alanında nesne kullanımına dair pratik örneklerin bilinmesi oldukça faydalıdır.