Bu makalede, JavaScript kodlarını daha az satırda veya daha güvenli bir şekilde nasıl yazabileceğimizi inceleyeceğiz. Bu sayede, takım çalışması içinde bulunuyorsak, kodun okunabilirliğini ve geliştirilebilirliğini artırmanın yollarını öğrenebiliriz. Makalenin devamındaki en iyi uygulamaların dikkate alınması önemlidir.

İçerik göster

Javascript Best Practices

Bu makalede, JavaScript kodlarıyla ilgili dolu dolu best practices’leri paylaşacağım. Konuya hızlı bir giriş yaparak makaleye hemen başlayalım, ancak detayları da ihmal etmeyecek şekilde inceleyeceğiz.

Array

Bir diziyi yeniden boyutlandırma

Bu örnekte 6 değerin yer aldığı bir array’in boyutunu 2’ye düşürüyoruz.

let array = ["Js", "Py", "C++", "Java", "Csharp", "Dart"]
array.length = 2
console.log(array) //["Js", "Py"]

let array = ["Js", "Py", "C++", "Java", "Csharp", "Dart"]

array.length = 2

console.log(array) //["Js", "Py"]

İç içe array’lerin tek array’e dönüştürülmesi

// iç içe array tanımları
array = [100, [200, [300, 400, 500], 600], [700, 800,[900,[1000]]]]
console.log(array.flat(Infinity)) // [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]

// iç içe array tanımları

array = [100, [200, [300, 400, 500], 600], [700, 800,[900,[1000]]]]

console.log(array.flat(Infinity)) // [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]

Belirleyeceğiniz boyutta array oluşturma

const array = Array(9).fill(null)

1	const array = Array(9).fill(null)

Dizilerin birleştirilmesi

let arr1 = [20, 30];
 
// Uzun yöntem
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]
 
// Kısa yöntem
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]

let arr1 = [20, 30];

// Uzun yöntem

let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

// Kısa yöntem

let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]

For loop

JS’de farklı farklı döngü yöntemleri bulunmakta, bir dizide döngü yapmak için genellikle for döngüsünü kullanırız. Diziler arasında yineleme yapmak için for… of döngüsünü de kullanabiliriz. Her değerin dizinine erişmek için ise for… in döngüsünü kullanabiliriz.

let arr = [10, 20, 30, 40];
 
// Uzun yöntem
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
 
// Kısa yöntem
// for of döngüsü
for (const val of arr) {
  console.log(val);
}
 
// for in döngüsü
for (const index in arr) {
  console.log(arr[index]);
}

let arr = [10, 20, 30, 40];

// Uzun yöntem

for (let i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

// Kısa yöntem

// for of döngüsü

for (const val of arr) {

console.log(val);

}

// for in döngüsü

for (const index in arr) {

console.log(arr[index]);

}

Ayrıca “For… in” döngüsünü kullanarak, nesne özellikleri üzerinde döngü kurabiliriz.

let obj = {x: 20, y: 50};

for (const key in obj) {
  console.log(obj[key]);
}

let obj = {x: 20, y: 50};

for (const key in obj) {

console.log(obj[key]);

}

String

Bir dizeyi birkaç kez tekrarlama

Bir dizeyi belirli bir süre boyunca tekrarlamak için genellikle bir for döngüsü kullanılır. Ancak, bu işlemi daha kısa bir şekilde yapmak için repeat() yöntemini kullanabiliriz.

// Uzun yöntem
let str = '';
for(let i = 0; i < 5; i ++) {
  str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello
 
// Kısa yöntem
'Hello '.repeat(5);

// Uzun yöntem

let str = '';

for(let i = 0; i < 5; i ++) {

str += 'Hello ';

}

console.log(str); // Hello Hello Hello Hello Hello

// Kısa yöntem

'Hello '.repeat(5);

Dizeden karakter alma

let str = 'muratoner.net';
 
// Uzun yöntem
str.charAt(2); // r
 
// Kısa yöntem
str[2]; // r

let str = 'muratoner.net';

// Uzun yöntem

str.charAt(2); // r

// Kısa yöntem

str[2]; // r

Çok Satırlı Dizeler (Multi-line String)

Çok satırlı dizeleri oluşturmak için genellikle + operatörünü ve yeni satıra geçiş \n operatörünü kullanırız. Ancak, backticks (`) kullanarak bu işlemi daha kolay bir şekilde gerçekleştirebiliriz.

// Uzun yöntem
console.log('JavaScript, sıkça kısaltılmış olarak JS, \n' + 'ECMAScript spesifikasyonuna uygun bir \n' + 'programlama dilidir. JavaScript yüksek seviyeli,\n' + 'genellikle anında derlenen ve çok paradigmaya sahip.');

// Kısa yöntem
console.log(`JavaScript, sıkça kısaltılmış olarak JS, ECMAScript spesifikasyonuna uygun bir programlama dilidir. JavaScript yüksek seviyeli, genellikle anında derlenen ve çok paradigmaya sahip.`);

// Uzun yöntem

console.log('JavaScript, sıkça kısaltılmış olarak JS, \n' + 'ECMAScript spesifikasyonuna uygun bir \n' + 'programlama dilidir. JavaScript yüksek seviyeli,\n' + 'genellikle anında derlenen ve çok paradigmaya sahip.');

// Kısa yöntem

console.log(`JavaScript, sıkça kısaltılmış olarak JS, ECMAScript spesifikasyonuna uygun bir programlama dilidir. JavaScript yüksek seviyeli, genellikle anında derlenen ve çok paradigmaya sahip.`);

Yukarıda uzun ve kısa yöntemleri karşılaştırdık. Backticks kullanarak çok satırlı dizeleri daha okunabilir bir şekilde oluşturabiliriz.

Template Literals

String değerlerini değişkenlerle birleştirmek için genellikle + operatörünü kullanırız. Ancak ES6 Şablon Dizgileri (Template Literals) ile bunu daha basit bir şekilde yapabiliriz.

// Uzun yöntem
console.log('Aranan numaradan ' + number + ' saat ' + time + ' itibariyle bir çağrı kaçırdınız.');

// Kısa yöntem
console.log(`Aranan numaradan ${number} saat ${time} itibariyle bir çağrı kaçırdınız.`);

// Uzun yöntem

console.log('Aranan numaradan ' + number + ' saat ' + time + ' itibariyle bir çağrı kaçırdınız.');

// Kısa yöntem

console.log(`Aranan numaradan ${number} saat ${time} itibariyle bir çağrı kaçırdınız.`);

Matematik

String değerleri sayılara dönüştürme

Bir string değeri sayıya dönüştürmek için parseInt ve parseFloat gibi yöntemler vardır. Bunu, dize değerinin önüne (+) koyarak da yapabiliriz.

// Uzun yöntem
let total = parseInt('453');
let average = parseFloat('42.6');
 
// Kısa yöntem
let total = +'453';
let average = +'42.6';

// Uzun yöntem

let total = parseInt('453');

let average = parseFloat('42.6');

// Kısa yöntem

let total = +'453';

let average = +'42.6';

Üs alma

Bir sayının üssünü bulmak için Math.pow () yöntemini kullanabiliriz. Bir başka yöntem de çift yıldız operatörünü (**) kullanmak.

// Uzun yöntem
const power = Math.pow(4, 3); // 64
 
// Kısa yöntem
const power = 4**3; // 64

// Uzun yöntem

const power = Math.pow(4, 3); // 64

// Kısa yöntem

const power = 4**3; // 64

Sayıları aşağıya yuvarlama

Sayıları aşağıya yuvarlamak için Math.floor yöntemini kullanırız. (~~) operatörü ile de aynı işlem yapılabiliyor.

// Uzun yöntem
const floor = Math.floor(6.8); // 6

// Kısa yöntem
const floor = ~~6.8; // 6

// Uzun yöntem

const floor = Math.floor(6.8); // 6

// Kısa yöntem

const floor = ~~6.8; // 6

Not: Math.floor() yöntemi sayı ne olursa olsun aşağı yuvarlar.

Dizideki maksimum ve minimum sayıları bulmak

Dizilerdeki maksimum ve minimum değerleri bulmak için genelde döngü yapabilir ya da Array.reduce () yöntemini kullanabiliriz.

// Kısa yöntem
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

// Kısa yöntem

const arr = [2, 8, 15, 4];

Math.max(...arr); // 15

Math.min(...arr); // 2

Object

Dinamik nesne

ES6 ile birlikte, daha önce tanımladığımız değişkeni köşeli parantezler içerisine alarak nesne içerisinde dinamik olacak şekilde kullanabiliyoruz.

const dynamic = "email";

const user = {
  name : 'Murat',
  lastname : 'Öner',
  [dynamic] : 'muratoner@example.com',
};
 
console.log(user);
 
// {
//   name: "Murat",
//   lastname: "Öner",
//   email: "muratoner@example.com"
// }

const dynamic = "email";

const user = {

name : 'Murat',

lastname : 'Öner',

[dynamic] : 'muratoner@example.com',

};

console.log(user);

// {

// name: "Murat",

// lastname: "Öner",

// email: "muratoner@example.com"

// }

Obje oluşturma

Objeye sadece değişken adı vererek kısayolla obje oluşturulması sağlanabiliyor.

const email = "muratoner@example.com";
const name = "Murat";
const lastname = "Öner";

const user = {
  name,
  lastname,
  email
};
 
console.log(user);
 
// {
//   name: "Murat",
//   lastname: "Öner",
//   email: "muratoner@example.com"
// }

const email = "muratoner@example.com";

const name = "Murat";

const lastname = "Öner";

const user = {

name,

lastname,

};

console.log(user);

// {

// name: "Murat",

// lastname: "Öner",

// email: "muratoner@example.com"

// }

Çoklu koşul kontrolü (Multiple condition checking)

Çoklu değer eşleştirme için tüm değerleri diziye koyabilir ve indexOf () yöntemini kullanabiliriz.

// Uzun yöntem
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
}
 
// Kısa yöntem 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
}
 
// Kısa yöntem 2
if ([1, 'one', 2, 'two'].includes(value)) { 
}

// Uzun yöntem

if (value === 1 || value === 'one' || value === 2 || value === 'two') {

}

// Kısa yöntem 1

if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {

}

// Kısa yöntem 2

if ([1, 'one', 2, 'two'].includes(value)) {

}

Değişken Bildirimi (Declaring variables)

// Uzun yöntem
let x;
let y = 20;

// Kısa yöntem
let x, y = 20;

// Kısa yöntem
let a, b, c;

// Uzun yöntem

let x;

let y = 20;

// Kısa yöntem

let x, y = 20;

// Kısa yöntem

let a, b, c;

Birden çok değişkene değer atama

Destructuring özelliği ile bir satırda birden çok değişkene değer atayabiliriz.

// Uzun yöntem
a = 5;
b = 8;
c = 12;

// Kısa yöntem
let [a, b, c] = [5, 8, 12];

// Uzun yöntem

a = 5;

b = 8;

c = 12;

// Kısa yöntem

let [a, b, c] = [5, 8, 12];

İki değişkeni değiştirme (Swap two variables)

İki değişkenin değerlerini destructing yardımı ile kolayca değiştirebiliriz.

let x = 'Hello', y = 55;
 
// Uzun yöntem
const temp = x;
x = y;
y = temp;
 
// Kısa yöntem
[x, y] = [y, x];
 
// Çıktı:
// x: 55
// y: Hello

let x = 'Hello', y = 55;

// Uzun yöntem

const temp = x;

x = y;

y = temp;

// Kısa yöntem

[x, y] = [y, x];

// Çıktı:

// x: 55

// y: Hello

Ternary operatör kullanarak değişken değerini ayarlama

❌
a > b ? foo = 'apple' : foo = 'ball';
✔️
foo = a > b ? 'apple' : 'ball';

❌

a > b ? foo = 'apple' : foo = 'ball';

✔️

foo = a > b ? 'apple' : 'ball';

Belirli bir nesne özelliğine koşullu olarak aynı değeri atama
JavaScript
❌
c > d ? a.foo = 'apple' : a.bar = 'apple'; 
✔️
a = { [c > d ? 'foo' : 'bar']: 'apple' };
1
2
3
4
❌
c > d ? a.foo = 'apple' : a.bar = 'apple'; 
✔️
a = { [c > d ? 'foo' : 'bar']: 'apple' };
Birden çok değişkeni dışa aktarma
JavaScript
❌ 
export const foo;
export const bar;
export const kip; 

✔️ 
export const foo, bar, kip;
1
2
3
4
5
6
7
❌ 
export const foo;
export const bar;
export const kip; 
 
✔️ 
export const foo, bar, kip;
Nesne özelliklerinden değişkenlerin bildirilmesi ve atanması
JavaScript
❌ 
const a = foo.x, b = foo.y; 

✔️ 
const { ['x']: a, ['y']: b } = foo;
1
2
3
4
5
❌ 
const a = foo.x, b = foo.y; 
 
✔️ 
const { ['x']: a, ['y']: b } = foo;
Dizi indekslerinden değişkenlerin bildirilmesi ve atanması
JavaScript
❌ 
let a = foo[0], b = foo[1]; 

✔️ 
let [a, b] = foo;
1
2
3
4
5
❌ 
let a = foo[0], b = foo[1]; 
 
✔️ 
let [a, b] = foo;
DOM’dan birden fazla öğe alma
❌ 
const a = document.getElementById('a'), 
      b = document.getElementById('b'), 
      c = document.getElementById('c'); 
      d = document.getElementById('d'); 

✔️ 
const elements = {}; 
['a', 'b', 'c', 'd'].forEach(item => elements = { ...elements, [item]: document.getElementById(item) }); 

const { a, b, c, d } = elements; /* Bu işlem için element ID'leriniz geçerli bir JavaScript değişken adı olmalı ve bu elementleri sakladığınız değişkenlerin adları, o elementin ID'siyle eşleşmelidir. Bu, isimlendirme tutarlılığı ve erişilebilirlik açısından iyidir. */
1
2
3
4
5
6
7
8
9
10
11
❌ 
const a = document.getElementById('a'), 
      b = document.getElementById('b'), 
      c = document.getElementById('c'); 
      d = document.getElementById('d'); 
 
✔️ 
const elements = {}; 
['a', 'b', 'c', 'd'].forEach(item => elements = { ...elements, [item]: document.getElementById(item) }); 
 
const { a, b, c, d } = elements; /* Bu işlem için element ID'leriniz geçerli bir JavaScript değişken adı olmalı ve bu elementleri sakladığınız değişkenlerin adları, o elementin ID'siyle eşleşmelidir. Bu, isimlendirme tutarlılığı ve erişilebilirlik açısından iyidir. */
Basit koşullar için mantıksal operatörleri kullanın
JavaScript
❌
if (foo) { 
   doSomething(); 
}
✔️ 
foo && doSomething();
1
2
3
4
5
6
❌
if (foo) { 
   doSomething(); 
}
✔️ 
foo && doSomething();
Parametreleri koşullu olarak geçirme
JavaScript
❌
if(!foo){
   foo = 'apple';
}
bar(foo, kip);
✔️
bar(foo || 'apple', kip);
1
2
3
4
5
6
7
❌
if(!foo){
   foo = 'apple';
}
bar(foo, kip);
✔️
bar(foo || 'apple', kip);

Bir sürü 0’la uğraşmak

❌
const SALARY = 150000000, TAX = 15000000;
✔️
const SALARY = 15e7, TAX = 15e6;

❌

const SALARY = 150000000, TAX = 15000000;

✔️

const SALARY = 15e7, TAX = 15e6;

Aynı değeri birden fazla değişkene eşitleme

❌
a = d;
b = d;
c = d;
✔️
a = b = c = d;

❌

a = d;

b = d;

c = d;

✔️

a = b = c = d;

Console

Eğer console.log’u birden fazla kez tanımlıyorsanız ve bu satırları sürekli kullanacaksanız, kodu daha okunaklı hale getirmek için aşağıdaki kısa sözdizimi kullanabilirsiniz.

const { ['log']: c } = console; 
c("herhangi bir log");

1 2	const { ['log']: c } = console; c("herhangi bir log");

Const

Tanımladığınız değişkenlerin sonradan tekrar yeni bir değer ile eşitlenme durumu yoksa bu durumda değişkeni tanımlarken const keyword’ü ile tanımlamanız ve sonrasında yanlışlıkla değişkeni ezmeniz durumunda sizi engelleyecek. Bu durumda size yol gösterici olacaktır.

const name = 'murat'
const surname = 'öner'

1 2	const name = 'murat' const surname = 'öner'

Bu noktada dikkat edilmesi gereken durum, JavaScript’te tarayıcı uyumluluklarına özen gösterilmesidir. Tarayıcı uyumluluğu hakkında gerekli bilgileri almak için şu adresi ziyaret edebilirsiniz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const#Browser_compatibility

🌍 Javascript Best Practices Kaynakları

https://javascript.info

📃 Javascript Best Practices İle Benzer İçerikler

5/5 - (2 votes)

Javascript Best Practices

Array

Bir diziyi yeniden boyutlandırma

İç içe array’lerin tek array’e dönüştürülmesi

Belirleyeceğiniz boyutta array oluşturma

Dizilerin birleştirilmesi

For loop

String

Bir dizeyi birkaç kez tekrarlama

Dizeden karakter alma

Çok Satırlı Dizeler (Multi-line String)

Template Literals

Matematik

String değerleri sayılara dönüştürme

Üs alma

Sayıları aşağıya yuvarlama

Dizideki maksimum ve minimum sayıları bulmak

Object

Dinamik nesne

Obje oluşturma

Çoklu koşul kontrolü (Multiple condition checking)

Değişken Bildirimi (Declaring variables)

Birden çok değişkene değer atama

İki değişkeni değiştirme (Swap two variables)

Ternary operatör kullanarak değişken değerini ayarlama

Belirli bir nesne özelliğine koşullu olarak aynı değeri atama

Birden çok değişkeni dışa aktarma

Nesne özelliklerinden değişkenlerin bildirilmesi ve atanması

Dizi indekslerinden değişkenlerin bildirilmesi ve atanması

DOM’dan birden fazla öğe alma

Basit koşullar için mantıksal operatörleri kullanın

Parametreleri koşullu olarak geçirme

Bir sürü 0’la uğraşmak

Aynı değeri birden fazla değişkene eşitleme

Console

Const

🌍 Javascript Best Practices Kaynakları

📃 Javascript Best Practices İle Benzer İçerikler

You may also like...

Javascript SetTimeout Nedir, Örnekli Nasıl Kullanılır?

Javascript ile forEach döngüsü kullanımı

Jquery İnput Kontrolü İçerisindeki Değerin Değişimini Hemen Algılamama Sorunu!

1 Response

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin