Viewing: tr.javascript.info

Kodunuz olabildiince okunakl ve temiz olmaldr.

Aslnda bu programlama sanatdr karmak bir grevi aln ve bunu olabildiince doru ve okunakl bir ekle getirin.

Buna yardmc olan bir ey de iyi kodlama stilidir.

Yazm

Kodlar iin yazlm bir kopya kad (detaylar aada):

[]

imdi bu kurallar ve nedenleri hakknda konuabiliriz.

Buradaki hibir ey kanun deildir. Hepsi sizin zevkinize kalmtr ve deiebilir. Buradaki kodlama kurallar dogmalara dayanmaz.

Ssl Parantez

ou JavaScript projesinde ssl parantezler yeni satrda deil de kod ile ayn satrda yazlrlar. Buna msrl stili denir. Ayrca ssl parantezin banda aadaki gibi boluk braklr.

          if (kosul) {
  // unu yap
  // ...bunu yap
  // ...sonra bunu yap
}
        

Tek satrl if cmlelerinde ssl parantez kullanmal m ? Kullanlacaksa nasl yazlmal?

Burada not dlerek if rnekleri verilmi. Siz de bu kodlarn okunabilirliini yarglayabilirsiniz.

[]

Ssl parantez ama ve kapama ayn satrda yaplm: Burada ssl paranteze gerek yok.
Ayr bir satra ssl parantez olmadan yazlm. Bu ekilde yazmayn. Bu ileride baz anlayamadnz hatalara neden olabilir. rnein if gvdesine bir satr daha yazarsanz bu satrlardan sonraki yazdnz almaz.
Ssl parantez olmadan tek satrda ii bitirebilirseniz kabul edilebilir. Ama ksa olmas artyla.
Bunlarn ierisindeki en iyisi.

zetle:

ok ksa kodlar iin, u ekilde kullanm kabul edilebilir: if(koul) return null.
Eer ayr satrlara yazmanz gerekiyorsa kesin ssl parantez kullann.

Satr uzunluu

En uzun satr boyunun bir snr olmal. Kimse yatayda kodu takip etmek istemez. Eer o kadar uzun ise yeni bir satra gemeniz nerilir.

Satr uzunluu limitine takm seviyesinde karar verilir. Genelde 80-120 karakter arasndadr.

Satr ba boluklar

ki trl satr ba standard vardr.

Yatay boluklar:2(4) boluk.

Yatay boluklar genelde 2 veya 4 veya Tab sembolnden oluur. Bunlardan hangisinin seilmesi gerektii bir eit savatr. Bugnlerde boluk tuu ile boluk brakmak daha fazla kullanlan yntemdir.

Boluk tuu ile satra balamann Tab a gre stnl daha esnek ayarlanabilir olmasndan dolaydr.

rnein argmanlar u ekilde hizalanabilir:
```
goster(parametreler,
     hizaland, // soldan 5 boluk
     ilki,
     sonra,
     digeri
  ) {
  // ...
}
```
Dikey boluk: mantksal bloklar ayrmak iin satr aras brakmak

En basit bir fonksiyonda bile mantksal bloklar ayrma ihtiyacnz olabilir. Aadaki rnekte, deikenlerin tanmlanmas ve sonucun dikey olarak ayrlmasna dikkat edin:
```
function st(x, n) {
  let sonuc = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    sonuc *= x;
  }
  //              <--
  return sonuc;
}
```
Eer okunurlulua etki edecekse yeni bir satr aras vermekten ekinmeyin. Kanya gre 9 satrdan fazla kod varsa arada kesin bir satr aras olmaldr.

Noktal virgl

Her cmlenin sonuna noktal virgl konulmaldr. Tercihli olsa bile tercih her zaman noktal virgl tarafnda olmaldr.

Baz dillerde noktal virgl tamamen tercihe baldr. O dilde nadiren kullanlr. Fakat JavaScript iin baz durumlarda yeni satr noktal virgl olarak alglanmayabilir. Bu da programlama hatasna neden olur.

Eer sonularn ve nasl kullanlacana inancnz tamsa bu durumda noktal virgl kullanmayabilirsiniz. Fakat balangta kesinlikle kullanmalsnz.

ielik seviyesi

ok fazla i ie kod yazmamalsnz.

Baz durumlarda dng iinde continue kullanmak iyi bir fikir olabilir.

Aadaki kullanm yerine:

          for (let i = 0; i < 10; i++) {
  if (kosul) {
    ... // <- bir tane daha koul ( i ie )
  }
}
        

Bu ekilde yazlabilir:

          for (let i = 0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- ayrca bir tane daha i ie kod yok.
}
        

Ayn ekilde bunun benzeri if/else ve return iin yaplabilir.

rnein aadaki iki yap birbiri ile ayn.

Birincisi:

          function ust(x, n) {
  if (n < 0) {
    alert("Negatif saylar desteklenmemektedir");
  } else {
    let sonuc = 1;

    for (let i = 0; i < n; i++) {
      sonuc *= x;
    }

    return sonuc;
  }
}
        

ve ikincisi:

          function ust(x, n) {
  if (n < 0) {
    alert("Negatif saylar desteklenmemektedir");
    return;
  }

  let sonuc = 1;

  for (let i = 0; i < n; i++) {
    sonuc *= x;
  }

  return sonuc;
}
        

fakat ikincisi daha okunakldr, nk n<0 koulu ilk nce kontrol edildi ve buna gre aksiyon alnd sonrasnda ana kod akna devam edildi, ayrca bir else yazmaya gerek kalmad.

Kodun altnda fonksiyonlar

Eer birka tane helper(yardmc) fonksiyon yazyorsanz bunlar yerletirmenin farkl yolu var.

Kullanan kodun stnde fonksiyonlar tanmlamak:

          // function declarations
function elementOlustur() {
  ...
}

function isleyiciTanimla(elem) {
  ...
}

function etrafindanDolan() {
  ...
}

// fonksiyonlar kullanan kodlar
let elem = elementOlustur();
isleyiciTanimla(elem);
etrafindaDolan();
        

nce kodu yazp sonra fonksiyonu yazmak:

          // fonksiyonlar kullanan kodlar
let elem = elementOlustur();
isleyiciTanimla(elem);
etrafindaDolan();

// --- yardmc fonksiyonlar ---

function elementOlustur() {
  ...
}

function isleyiciTanimla(elem) {
  ...
}

function etrafindanDolan() {
  ...
}
        

Kark: Fonksiyonu kullanld yerde tanmlama.

ou zaman ikinci yntem tercih edilmektedir. nk kodu okumaya baladnzda, ncelik bu kodun ne yapt olur. Eer nce kod yazlrsa bu baz bilgiler verir. Sonrasnda belki de fonksiyonlar okumamza hi gerek kalmayabilir. zellikle isimlendirme iyi ise buna gerek yoktur.

Stil Klavuzu

Stil klavuzlar genel olarak nasl yazlmal sorusunun cevabn verir: Ka satr braklmaldr, nerede yeni satra geilmelidir vs. ok kk kk eyler.

Genel olarak tm takm yeleri bu kurallara uyduunda kod tek bir elden km gibi grnr. Kimin yazd nemini yitirir.

Tabi takmn kendine ait bir stil klavuzu da olabilir. Fakat ou daha nce denendiinden dolay yenisini oluturmaya gerek yoktur. rnein:

Eer kodlamaya yeni baladysanz, imdilik yukarda bahsettiimiz kopya kadndan faydalanabilirsiniz. Daha sonra stil klavuzlarna bakarak istediinizi rnek alabilir ve bir tanesini seebilirsiniz.

Otomatik Dzenleyiciler

Kod stilinizi otomatik olarak denetleyen aralar bulunmaktadr. Bunlara dzenleyici linter denebilir.

Bunlarn en nemli zellii stili kontrol etmesinin yannda yazmdaki hatalar, fonksiyon isimlerindeki problemleri bulur.

Bundan dolay bir tanesini kullanmanz nerilir. Sadece kelime hatalarn dzeltmeniz iin bile olsa kullanmanz iyidir.

En ok bilinen aralar:

JSLint ilk dzenleyicilerden
JSHint JSLintten daha fazla zellie sahip.
ESLint en yenilerinden.

Hepsi de iinizi grr. Yazar ESLint kullanmaktadr.

ou otomatik dzenleyici editr ile entegre alr. Sadece plugini aktif edin, kod stilini ayarlayn yeterli.

rnein ESLint iin u admlar yapmalsnz:

Node.JSi bilgisayarnza ykleyin.
Komut satrndan npm install -g eslint ile ESLinti ykleyin. ( npm NodeJs paket yneticisidir)
JavaScript projenizin bulunduu klasre .eslintrc adnda bir dosya oluturun

rnek bir .eslintrc dosyas:

          {
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
  },
  "indent": 2
}
        

Buradaki "extends" normalde eslint:recommended i kullanacamz fakat bunun baz zelliklerini deitireceimizi belirtmektedir.

Bunun ardndan editrnzde ESLint eklentisini aktif edin. ou editrde bu eklenti bulunmaktadr.

Bunun yannda bu stilleri internetten indirip kullanmakta mmkndr. Bunun iin http://eslint.org/docs/user-guide/getting-started adresine bakabilirsiniz.

Bunun yannda otomatik dzenleyici kullanmann yan etkileri de vardr. Kod dzenleyiciler eer tanmlanmam bir deiken kullanlmsa, bunu anlar ve vurgular. Fakat ou defa bunun nedeni yanl yazmdr. Tabi bunu fark ederseniz dzeltmesi de hemen yaplabilir.

Bundan dolay eer stil ile ilgilenmiyorsanz bile kullanmanz iddetle tavsiye edilir.

Ayrca baz IDEler bu otomatik dzenleyicileri kendileri dorudan entegre ederler. Bunlarda iyidir fakat dzenlemesi biraz daha karmak olabilir. Bundan dolay ESLint gibi aralar kullanmanz nerilir.

zet

Bu blmdeki tm yazm kurallar ve stil klavuzlarnn amac okunabilirlii artrmaktr. Bundan dolay tamam tartlabilir.

Nasl daha iyi yazarz? sorusu hakknda dndmzde, kriter Nasl daha iyi okunur kod yazabilir, nasl yazarken hatalardan kaabiliriz? sorularn aklmzda tutmamz gereklidir. Buna gre stil seip hangisinin daha iyi olduuna karar verebiliriz.

Stil klavuzlarn okuyun ve son gelimeler hakknda daha iyi bilgi sahibi olun, buna gre en iyiyi seebilirsiniz.

Grevler

Kt Stil

Aadaki kodun stilinde ne yanllar vardr?

          function ust(x,n)
{
  let sonuc=1;
  for(let i=0;i<=n;i++) {sonuc*=x;}
  return sonuc;
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`${n} ss alnamad, kullandnz say 0'dan kk olamaz. Ltfen doal saylar kullannz.`);
}
else
{
  alert(ust(x,n))
}
        

Dzeltin!

Notunuz aadaki gibi olabilir:

          function ust(x,n)  // <- argmanlar arasnda boluk bulunmamakta.
{  // <-ssl parantez yeni satrda
  let sonuc=1;   // <-  = in iki yannda da boluk bulunmamakta
  for(let i=0;i<n;i++) {sonuc*=x;}   // <- boluk yok
  // ssl parantezin ii yeni bir satrda olmal
  return sonuc;
}

let x=prompt("x?",''), n=prompt("n?",'') // <-- teknik olarka mmkn,
// fakat iki satr yapmak daha iyi, ayrca boluk ve ; kullanlmam.
if (n<0)  // <- (n < 0) olmal, arada boluk kullanlmam
{   // <- ssl parantez yeni satrda
  // Aadaki uzun metin iki satrda yazlsa daha iyi olabilir
  alert(`${n} ss alnamad, kullandnz say 0'dan kk olamaz. Ltfen doal saylar kullannz.`);
}
else // <- tek satrda  "} else {" eklinde kullanlabilir.
{
  alert(ust(x,n))  //  ; ve boluk kullanlmamtr.
}
        

dzeltilmi ekli:

          function ust(x, n) {
  let sonuc = 1;

  for (let i = 0; i < n; i++) {
    sonuc *= x;
  }

  return sonuc;
}

let x = prompt("x?", "");
let n = prompt("n?", "");

if (n < 0) {
  alert(`${n} ss alnamad, kullandnz say 0'dan kk olamaz.
     Ltfen doal saylar kullannz.`);
} else {
  alert( ust(x, n) );
}
        

Yorumlar

yorum yapmadan nce ltfen okuyun...

Eer gelitirme ile alakal bir neriniz var ise yorum yerine github konusu gnderiniz.
Eer makalede bir yeri anlamadysanz ltfen belirtiniz.
Koda birka satr eklemek iin <code> kullannz, birka satr eklemek iin ise <pre> kullann. Eer 10 satrdan fazla kod ekleyecekseniz plnkr kullanabilirsiniz)

Kodlama Stili