Photo by Rich Tervet on Unsplash

DOM elemanlarımızdaki data-* ön eki ile başlayan öznitelikler (attributes), özel veri öznitelikleridir. DOM elemanımızın sahip olmadığı yeni bir özel öznitelik eklemek istersek bunu bu ön ek ile yaparız.

Bunun birkaç avantajı vardır. Birincisi DOM elemanının sahip olduğu ya da sonradan sahip olacağı kendine ait bir öznitelik ile çakışmaz.

Diğeri ise JavaScript tarafında bu datalara erişmek ve değiştirmek için güzel bir API sağlanır.

HTML tarafında bir özel öznitelik tanımlamak istediğimizde bu data- ön eki ile başlar ve - , _ , . , : karakterlerini içerebilir. kebab-case şeklinde yazılmalıdır. Ayrıca büyük harf ile yazılan nitelikleri dikkate almaz ve küçük harfe dönüştürür.


Photo by Rich Tervet on Unsplash

Set benzersiz değerleri tutan bir JavaScript nesnesidir. Her veri tipinde değer tutabilir. Fakat aynı değeri birden fazla kez içeremez.

Set nesnesinin kullanımını ve avantajlarını bir örnek ile ele alalım.


Photo by Rich Tervet on Unsplash

Map anahtar ve değer ikilisini tutan ve değerlerin eklenme sırasını hatırlayan bir JavaScript nesnesidir. Normal bir nesneden farklı olarak anahtar için herhangi bir veri tipi kullanılabilir. String ile sınırlı değildir.

Anahtarların aynı olup olmadığı kontrol etmek için sameValueZero algoritmasını kullanır. Bu algoritma eşitlik kontrolüne benzer fakat +0 ile -0 aynı kabul edilir. Ayrıca NaN ve NaN bu algoritmaya göre aynı şeydir.

sameValueZero algoritmasını daha iyi anlamak için şu dokümanı inceleyebilirsiniz.

Map nesnesinin kullanımını ve avantajlarını bir örnek ile ele alalım.


Photo by Kristopher Roller on Unsplash

Kendi sloganıyla Volta: Problemsiz JavaScript Araç Yöneticisi’dir Rust ile yazılmıştır ve bir JavaScript aracını yükleme ve kurmada çok hızlı olduğunu iddia eder.

Projenin bağımlı olduğu araçların ve sürümlerinin her ekip üyesi tarafından aynı olması konusunda endişe etmemenizi sağlar ve ona güvenmenizi ister.

İlk Release’ini 21 Aralık 2020 tarihinde v1.0.0 sürümüyle almıştır.

Bu yazıda Volta ile projelerimizde node bağımlılıklarını yönetmeyi ele alacağım. Volta ile bir node sürümü yüklemek için install komutunu çalıştırmak yeterlidir.

$ volta install node@15.0.0

Eğer bu node versiyonu bilgisayarınızda yüklü değilse önce yükler ve ardından aktif node sürümünüz olarak bu versiyona geçer.

Yüklü node sürümlerini görüntülemek için list


Photo by Rich Tervet on Unsplash

NVM — (Node Version Manager), aynı anda birden fazla node sürümüne sahip olmamız ve aralarında hızlıca geçiş yapabilmemizi sağlar. Gerek geliştirme ortamımızda gerekse hazırladığımız projeleri yayına almak istediğimizde farklı node sürümlerine ihtiyaç duyarız.

NVM bir CLI aracı olarak çalışır bu sayede onu CI/CD süreçlerimize de kolayca dahil edebiliriz.

NVM ile farklı bir node sürümünü yüklemek için nvm install <version> komutunu kullanırız. Kurduğumuz sürüm yüklemeden sonra aktif sürümümüz olmaya başlar.

$ nvm install v14.15.3

Yüklü versiyonları görüntülemek için list komutunu kullanmamız yeterlidir. Aşağıdakine benzer bir liste döner ve aktif olan sürümü işaretler.

$ nvm list       v10.23.0
-> v14.15.3

Mevcut sürümler arasında…


Photo by Rich Tervet on Unsplash

Değişmez değerlere immutable denir. Programlama da bu tanım, tanımladığımız bir değerin değişemeyeceği anlamına gelir. Bunu bir örnekle açıklamak gerekirse:


Photo by Rich Tervet on Unsplash

Bu özellikleri açıklamaya başlamadan önce Memoization ne olduğundan bahsetmekte yarar var.

Hesaplanması uzun süren işlevlerimizin sonuçlarını saklayarak aynı girdiler için aynı işlev çağrıldığında: işlevin tekrar çalıştırılmadan saklanılan sonucunun dönülmesine Memoization denir.

Fakat sonuçların saklanması işlemi ucuz değildir. Bu yüzden sadece maliyetli ve aynı girdilerle aynı çıktıları üreten işlevlerde kullanılması önerilir.

Kendi başınıza kuracağınız bir yapı da memoization olabilir. Bu kullandığınız dilin bir özelliği değil programlama da bir tekniğin adıdır.

React.memo

Bileşenimizi sardığımız üst katman bir bileşendir. Bileşenimizin aldığı props ları yüzeysel olarak kontrol ederek, bir değişiklik yoksa son render edilen sonucu kullanır.


Photo by Rich Tervet on Unsplash

NPM sadece bir paket yöneticisidir. Paketleri yüklemek, kaldırmak ve güncellemek için kullanırız. NodeJS ile CLI uygulamaları oluşturmaya başladığımızda bazı sorunlar ortaya çıktı.

NPM de kullanacağımız CLI uygulamalarını global olarak bilgisayarımıza yüklememiz gerekiyordu. Bu da dizinlerde yazma izinleri ya da aynı paketin birden fazla versiyonunu kullanamama gibi bazen bazı sorunlara neden oluyordu. Ya da bir CLI uygulamasını hızlıca kullanabilmenin yanında zahmetli kalıyordu.

v5.2.0 sürümü ile birlikte NPM npx adında bir aracı duyurdu. Bu araç bir CLI uygulamasının bilgisayarımızda global olarak kurulu olsun ya da olmasın kullanılabilmesini sağlıyor.

Örneğin v5.2.0 sürümünden önce create-react-app CLI uygulamasıyla bir proje oluşturmak için önce bu paketi…

Aykut Kardaş

Front-End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store