Yeni Başlayanlar için En İyi 10 JavaScript Kestirmeler

JavaScript kısayolları kodlama işlemini hızlandırmakla kalmaz, aynı zamanda komut dosyalarını daha kısa sürede yapar, bu nedenle daha hızlı sayfa yüklemelerine neden olur. Kestirme kodlar, uzun versiyonları kadar geçerlidir; Bunlar aslında aynı şeyi ancak daha kompakt bir biçimde savunuyorlar. Bunlar, en basit kod optimizasyon tekniklerinden biridir.

Birkaç JavaScript kısaltması var, ancak resmi bir başvuru kılavuzu yok. Bazıları gerçekten basit, diğerleri ise deneyimli geliştiriciler için bile oldukça korkutucu. Bu yazıda, yeni başlayanlar için, kod optimizasyonuyla başlayıp daha özlü kod yazmak için 10 javascript kısaltması bulabilirsiniz.

1. Ondalık sayılar

Eğer düzenli olarak büyük ondalıklarla çalışırsanız, bu kısaltma müthiş olabilir, artık sıfırları yazmanız gerekmez, sadece bunları e gösterimi ile değiştirin. Örneğin, 1e8, 1 basamağın ardından sekiz sıfır eklenmesi anlamına gelir, 100000000’e eşittir.

E harfinden sonraki sayı, e önündeki hanelerin ardından gelen sıfırların sayısını belirtir. Aynı şekilde, 16e4, 160000, vb. Için kısaltmadır.

/* Shorthand */
var myVar = 1e8;
 
/* Longhand */
var myVar = 100000000;

2. Artış, azalma

Artış kısaltması iki + işaretinden oluşur, bu bir değişkenin değerinin bir arttırılacağı anlamına gelir. Benzer şekilde, azalma kısaltması iki işaretten oluşur ve bu değişkenin bir tarafından azaltılacağı anlamına gelir.

Bu iki kısaltma yalnızca sayısal veri türlerinde kullanılabilir. Döngülerde vazgeçilmez bir role sahiptirler, en sık kullanılanları for döngüsüdür.

/* Shorthand */
i++;
j--;
 
/* Longhand */
i=i+1;
j=j-1;

3. Ekle, çıkar, çarp, böl

Dört temel matematiksel işlemin her biri için bir kısadır: ekleme, oyalama, çarpma ve bölme. Artış ve azalma operatörlerine benzer şekilde çalışırlar, burada, bir değişkenin değerini herhangi bir sayıda (sadece bir değil) değiştirebilirsiniz.

Aşağıdaki örnekte, i değişkeni 5 artırılır, j 3 azaltılır, k 10 çarpılır ve l 2 olarak bölünür.

/* Shorthand */
i+=5;
j-=3;
k*=10;
l/=2;
 
/* Longhand */
i=i+5;
j=j-3;
k=k*10;
l=l/2;

4. Karakter pozisyonunu belirleyin

CharAt () yöntemi en sık kullanılan dize yöntemlerinden biridir, karakteri belirtilen bir konuma döndürür (örneğin, bir dizedeki 5. karakter). Bunun yerine kullanabileceğiniz basit bir kısadır: Dize sonrasında köşeli parantez içine alınmış karakter pozisyonunu eklersiniz.

CharAt () yönteminin sıfır temelli olduğuna dikkat edin. Bu nedenle, myString [4] dizedeki 5. karakteri döndürür (örnekte “y”).

var myString = "Happy birthday";
 
/* Shorthand */
myString[4];
 
/* Longhand */
myString.charAt(4);

5. Değişkenleri toplu olarak bildirin

Aynı anda birden fazla değişken oluşturmak istiyorsanız bunları tek tek yazmanız gerekmez. Var (veya let) anahtar kelimesini yalnızca bir kez kullanmak yeterlidir, daha sonra oluşturmak istediğiniz değişkenleri virgül ile ayırarak listeleyebilirsiniz.

Bu kısaltmayla, hem tanımlanmamış değişkenleri hem de değişkenleri bir değerle bildirebilirsiniz.

/* Shorthand */
var i, j=5, k="Good morning", l, m=false;
 
/* Longhand */
var i;
var j=5;
var k="Good morning";
var l;
var m=false;

6. İlişkisel bir dizi bildirin

Bir diziyi JavaScript’te bildirmek, var myArray = [“elma”, “armut”, “turuncu”] sözdizimini kullanarak nispeten basit bir görevdir. Bununla birlikte, ilişkisel bir dizi bildirmek biraz daha karmaşıktır, çünkü burada, değerleri tanımlamak zorunda değilsiniz, aynı zamanda tuşları da (normal dizilerde tuşlar 0, 1, 2, 3, vb.) Tanımlamak zorundasınızdır.

İlişkilendirilmiş dizi, anahtar / değer çifti topluluğudur. Uzun zamandır, diziyi bildirmek ve ardından her bir öğeyi teker teker eklemektir. Bununla birlikte, aşağıdaki kısaltmayla, ilişkisel diziye tüm öğelerini aynı anda beyan edebilirsiniz.

Aşağıdaki örnekte, myArray ilişkisel dizim, ünlü insanların (anahtarların) doğum yerlerini (değerleri) tayin eder.

/* Shorthand */
var myArray  = {
  "Grace Kelly": "Philadelphia",
  "Clint Eastwood": "San Francisco",
  "Humphrey Bogart": "New York City",
  "Sophia Loren": "Rome",
  "Ingrid Bergman": "Stockholm"
}
 
/* Longhand */
var myArray = new Array();
myArray["Grace Kelly"] = "Philadelphia";
myArray["Clint Eastwood"] = "San Francisco";
myArray["Humphrey Bogart"] = "New York City";
myArray["Sophia Loren"] = "Rome";
myArray["Ingrid Bergman"] = "Stockholm";

7. Nesneyi bildirin

Nesne bildirimi için kısaltılmış ilişki dizileri benzer şekilde çalışır. Bununla birlikte, burada anahtar-değer çiftleri değil, parantez {} arasında yer almanız gereken özellik-değer çiftleri yoktur.

Kısaltmanın sözdizimindeki tek fark, nesne özelliklerinin tırnak işaretleri içine alınmaması (aşağıdaki örnekte name, placeOfBirth, age, wasJamesBond) değildir.

/* Shorthand */
var myObj = { name: "Sean Connery", placeOfBirth: "Edinburgh",
age: 86, wasJamesBond: true };
 
/* Longhand */
var myObj = new Object();
myObj.name = "Sean Connery";
myObj.placeOfBirth = "Edinburgh";
myObj.age = 86;
myObj.wasJamesBond = true;

8. Koşullu operatörü kullanın

Koşullu (üçlü) operatör, if-else deyiminin kısayolu olarak sıklıkla kullanılır. Üç bölümden oluşur:

• Koşul
• Durum doğruysa ne olur (if)
• Durum yanlışsa (else)

4-5 satırlık kod parçası haline getiren if – else blogu aşağıda gösterilen kısayolla 1 satıra indirilmiştir.

var age = 17;
 
/* Shorthand */
var message = age >= 18 ? "Allowed" : "Denied";
 
/* Longhand */
if( age >= 18) {
  var message = "Allowed";
} else {
  var message = "Denied";
}

Test etmek isterseniz kodu web konsoluna kopyalayın (çoğu tarayıcıda F12) ve yaş değişkeninin değerini birkaç kez değiştirin.

9. Varlığı kontrol etme

Bir değişkenin mevcut olup olmadığını kontrol etmeniz gereken sıklıkla olur. “if presence” kısaltılması çok daha az kodla bunu yapmanıza yardımcı olur.

var myVar = 99;
 
/* Shorthand */
if( myVar ) {
  console.log("The myVar variable is defined AND it's not empty
  AND not null AND not false.");
}
 
/* Longhand */
if( typeof myVar !== "undefined" && myVar !==  "" && myVar !== null
&& myVar !== 0 && myVar !== false  ) {
  console.log("The myVar variable is defined AND it's not empty
  AND not null AND not false.");

Aşağıdaki kod parçasını web konsoluna ekleyerek ve “myVar” değerini birkaç kez değiştirerek nasıl çalıştığını test edebilirsiniz.

10. Yokluğunu kontrol etme

“if presence” ifadesi, değişkenin yokluğunu önce bir ünlem işareti koyarak kontrol etmek için kullanılabilir. Ünlem işareti, JavaScript’te (ve çoğu programlama dilinde) mantıksız değil operatördür.

Bu nedenle, if (!myVar) gösterimi ile myVar değişkeninin tanımsız, boş, null veya yanlış olup olmadığını kontrol edebilirsiniz.

var myVar;
 
/* Shorthand */
if( !myVar ) {
  console.warn("The myVar variable is undefined (OR) empty (OR)
  null (OR) false.");
}
 
/* Longhand */
if( typeof myVar === "undefined" || myVar === "" || myVar === null
|| myVar === 0 || myVar === false  ) {
  console.warn("The myVar variable is undefined (OR) empty (OR)
  null (OR) false.");
}

Bu makalede JavaScript ‘te hem yazdığınız kodu kısaltacak hem de daha hızlı kod yazabilmenizi sağlayacak 10 kestirme koddan bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.