JavaScript İsimlendirme Kuralları

İsimlendirme kuralları yazılım dünyasında bir çok yazılımcının korkulu rüyası olmuştur. Bir değişken tanımlarken beş dakika düşündüğümüz bile oluyor, belki de daha fazla. Bu düşünmenin sonunda eğer ortaya let VisibilityTrue = true gibi bir sonuç çıkıyorsa burada bir problem var demektir. Biraz garip gözüktü değil mi? Bu tür garipliklerin olmaması adına JavaScript topluluğunun bize söyledikleri bazı kurallar var. Gelin onlara biraz göz atalım.

İsimlendirme Kuralları: Değişkenler

JavaScript'de değişkenler büyük küçük harfe duyarlıdırlar. Aşağıda paylaştığım değişkenler kod bloğunda farklı çıktılar vermektedir.

var name = 'Mert Certel';
var Name = 'Michael Phelps';
var NAME = 'Yulaf Ezmesi';
console.log(name);
// "Mert Certel"
console.log(Name);
// "Michael Phelps"
console.log(NAME);
// "Yulaf Ezmesi"

Tanımlayacağımız değişkenler yeterince açık olmalı. Değişkeni tanımladıktan sonra herhangi bir açıklama yapmak durumunda kalmamalıyız. Aşağıda görüldüğü üzere üç farkı değişken var, ama sadece bir tanesi gerçekten bir anlam taşıyabiliyor.

// kötü
var value = 'Mert';
// kötü
var val = 'Mert';
// iyi
var firstName = 'Mert';

JavaScript'de değişkenler genelde camelCase olarak yazılır. camelCase: Değişkenin ilk kelimesine küçük harfle başlanır, devamındaki kelime ise büyük harfle başlar. Bu kullanım component, class ve sabit değişkenlerde istisnalık gösterebilir. Onlara birazdan değineceğim.

// kötü
var firstname = 'Mert';
// kötü
var first_name = 'Mert';
// kötü
var FIRSTNAME = 'Mert';
// kötü
var FIRST_NAME = 'Mert';
// iyi
var firstName = 'Mert';

İsimlendirme Kuralları: Mantıksal (boolen)

Mantıksal değişkenler; is, are, veya has gibi ön isimlerle daha anlamlı olabilir.

// kötü
var visible = true;
// iyi
var isVisible = true;
// kötü
var equal = false;
// iyi
var areEqual = false;
// kötü
var encryption = true;
// iyi
var hasEncryption = true;

İsimlendirme Kuralları: Fonksiyonlar

Fonksiyonlar da değişkenler gibi camelCase kullanarak yazılır. Bir fonksiyonu isimlendirirken o fonksiyonun aksiyonunu da ön tarafında belirtmelisiniz. Önüne gelen ek, fonksiyonunuzu anlamlı kılan herhangi bir şey olabilir. Örneğin: get, fetch, push, apply, calculate, compute, post.

// kötü
function product(productId) {
return `${productId} ${productName}`;
}
// iyi
function getProduct(productId) {
return `${productId} ${productName}`;
}

İsimlendirme Kuralları: Sınıf(Class)

Sınıflar, değişkenlere nazaran PascalCase yazım tarzı ile yazılır. Fonksiyonlara çok benzer oldukları için ayrı bir yazım tarzı ile yazılması önerilmiştir.

class FrontentDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
let me = new FrontentDeveloper ('Mert', 'Certel');

Instance alındığı yerde görüldüğü gibi yine PascalCase kuralı ile yeni bir instance aldık.

İsimlendirme Kuralları: Component

Componentler vanilla JavaScript kullanırken pek karşımıza çıkmasa da frontend frameworklerinde oldukça karşımıza çıkmakta (React, Vue, Svelte). Bu componentleri tanımlarken sınıflarda olduğu gibi Pascal Case kullanmamız gerekiyor.

// kötü
function userProfile(user) {
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
}
// iyi
function UserProfile(user) {
return (
<div>
<span>First Name: {user.firstName}</span>
<span>Last Name: {user.lastName}</span>
</div>
);
}

İsimlendirme Kuralları: Method

Method kısmına geçmeden önce sık yapılan method ve fonksyion karışıklığına ufak da olsa değinmek istiyorum. Fonksiyon : Herhangi bir değer dönebilir. Class'ın bir parçası değildir. Method : Fonksiyona çok benzer ama Class'ın bir parçasıdır. Genelde object-oriented programlamada kullanılır. Methodlar, classlar içinde yaşadıkları için PascalCase'den farklı olarak camelCase yazım biçimi tercih edilmelidir. Kendisini ifade edibilmesi için de aksiyonunu belli edecek önisimler kullanılmalı.

class FrontentDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return `${this.firstName} ${this.lastName}`;
}
}
var me = new FrontentDeveloper('Mert', 'Certel');
console.log(me.getName());
// "Mert Certel"

İsimlendirme Kuralları: Private Class

Bazı değişken ya da methodlarımızı class içersinde izole etmek isteyebiliriz. Bu değişken ya da methodların yazımında _ kullanılır.

class Person {
constructor(name) {
var _name = name
this.setName = function(name) { _name = name; }
this.getName = function() { return _name; }
}
}

İsimlendirme Kuralları: Sabitler

Sabit değişkenler için büyük harf kuralı uygulanır. Bu sabit tanımlanırken const keyword'u ile tanımlanır. const ile atanan bir değer hiç bir şekilde değiştirilemez. Eğer başka bir değer atamaya yada veri tipini değiştirmeye kalkarsanız size aşağıdaki gibi bir uyarı vercektir.

const CONSTANT = "sabit"
constant = "sabit değil"
// Uncaught TypeError: Assignment to constant variable.

İsimlendirme Kuralları: Global Değişkenler

Global değişkenler tüm projede erişilebilir olan değişkenlerdir. Proje dizin yapısında en üstte bulunmalıdırlar. Eğer değiştirilebilir bir global değişken atıyor isek camelCase, eğer değiştirilmesini istemediğimiz bir değişken atıyor isek UPPERCASE kuralına uyarak isimlendirmeliyiz.

const DOMAIN_NAME = "https://localhost:9001"
let state = "now"

İsimlendirme Kuralları: Objeler

Obje propertylerinde isimlendirme yaparken camelCase olmasına dikkat edilmesi objeleri daha okunaklı hale getiriyor.

// kötü
var person = {
'first-name': 'Mert',
'last-name': 'Certel',
};
var firstName = person['first-name'];
// iyi
var person = {
firstName: 'Mert',
lastName: 'Certel',
};
var firstName = person.firstName;

Genel olarak JavaScript'de yazım kuralları bu şekilde. Bu kurallara uyulduğunda yazdığınız kodun okunabilirliğinin arttığını görebilirsiniz. Bir sonraki yazımda görüşmek üzere.

You can say hello to me below or you can hire me.