Javascript: Eski Köye Yeni Adet

By Tahir Kardak On Mar 12, 2019

Merhaba bu yazımda; sade ve okunaklı kod yazımı için faydalı olduğunu düşündüğüm tekniklerden bahsedeceğim. Her bir örnekte kodun önce uzun halini, sonra kısa halini yazacağım. Elinizin altında her an bulunması gereken, hap niteliğinde örnekler olduğunu düşünüyorum. Kısaca bu yazı birazda “Kendime Notlar” şeklinde düşünülebilir. Yazıda daha çok örneklere odaklanacağım. O yüzden her bir örnek için verdiğim online deneme linklerini tıklayıp, uygulamanız fayda var diye düşünüyorum. Hazırsanız başlıyorum.

The Ternary (Conditional) ile if/else yazımı: 3–4 satırlık if else bloğu tek satırda yazılabilir. Denemek için burayı tıklayınız.



const yas = 18;
let yasalUyari;

// Uzun yol

if (yas<18) {
  yasalUyari = "18 yaşından küçük";
} else {
  yasalUyari = "18 yaşından büyük";
}
console.log(yasalUyari);

// Kısa yol
yasalUyari = yas<18 ? "18 yaşından küçük" :  "18 yaşından büyük";
console.log(yasalUyari);

const yas = 18;

let yasalUyari;

// Uzun yol

if (yas<18) {

yasalUyari = "18 yaşından küçük";

} else {

yasalUyari = "18 yaşından büyük";

}

console.log(yasalUyari);

// Kısa yol

yasalUyari = yas<18 ? "18 yaşından küçük" : "18 yaşından büyük";

console.log(yasalUyari);

2. Değişken atama: Değişken ataması yaparken ve atanan değişkenin; null, undefined ,veya ‘’ olması durumlarının kontrol edilmesi gerekebilir. Bu işlem için uzun if/else kontrolleri yapmak yerine “short-circuit evaluation” ile işlem yapılabilir. Denemek için tıklayınız.



let degisken1;
let degisken2;

//uzun yol
if ( degisken1 !== undefined ||degisken1 !== null || degisken1 !== '') { 
     degisken2 = degisken1;
} else {
   degisken2= "varsayılan değer atandı";
 }


// kısa yol
// degisken1'e değer ataması yapılmazsa
degisken2 = degisken1|| "varsayılan değer atandı";
console.log(degisken2);

// degisken2'e değer ataması yapılmazsa
degisken1 = "Değer ataması yapıldı";
degisken2 = degisken1 || "varsayılan değer atandı";
console.log(degisken2);

let degisken1;

let degisken2;

//uzun yol

if ( degisken1 !== undefined ||degisken1 !== null || degisken1 !== '') {

degisken2 = degisken1;

} else {

degisken2= "varsayılan değer atandı";

}

// kısa yol

// degisken1'e değer ataması yapılmazsa

degisken2 = degisken1|| "varsayılan değer atandı";

console.log(degisken2);

// degisken2'e değer ataması yapılmazsa

degisken1 = "Değer ataması yapıldı";

degisken2 = degisken1 || "varsayılan değer atandı";

console.log(degisken2);

3. Değişkenleri kısa yoldan tanımlama: Tek satırda değişkenler tanımlanabilir. Denemek için tıklayınız.



// uzun yol
let x;
let y;
let z = 3;
console.log(x,y,z)

// kısa yol.
let a, b, c=3;
console.log(a,b,c)

// uzun yol

let x;

let y;

let z = 3;

console.log(x,y,z)

// kısa yol.

let a, b, c=3;

console.log(a,b,c)

4. Temsili ondalık sayı kullanma; Sayıları uzun uzun tanımlamak yerine temsili ondalık sayı kullanılabilir. Denemek için tıklayınız.



// uzun yol
for (let i = 0; i < 10000; i++) {
  console.log(i)
}

// kısa yol
for (let i = 0; i < 1e4; i++) {
  console.log(i);
}

/*
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
1e6 === 1000000;
1e7 === 10000000;
1e8 === 100000000;
1e9 === 1000000000;
*/

// uzun yol

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

console.log(i)

}

// kısa yol

for (let i = 0; i < 1e4; i++) {

console.log(i);

}

1e0 === 1;

1e1 === 10;

1e2 === 100;

1e3 === 1000;

1e4 === 10000;

1e5 === 100000;

1e6 === 1000000;

1e7 === 10000000;

1e8 === 100000000;

1e9 === 1000000000;

5. Kısa yoldan object property tanımlama: Denemek için tıklayınız.



const x =1, y=2;

// uzun yol
const nesne1 = { x:x, y:y };
console.log(nesne1);

//kısa yol
const nesne2 = {x, y};
console.log(nesne2)

const x =1, y=2;

// uzun yol

const nesne1 = { x:x, y:y };

console.log(nesne1);

//kısa yol

const nesne2 = {x, y};

console.log(nesne2)

6. Varsayılan parametre tanımlama: ES6 ile parametreye varsayılan değer atama işlemi fonksiyon tanımlanırken yapılabilir. Denemek için tıklayınız.



// uzun yol
function carpmaIslemi(x, y, z) {
  if (y=== undefined)
    y = 2;
  if (z === undefined)
    z = 3;
  return x * y * z;
}
console.log(carpmaIslemi(1)); // sadece x değişkenine değer atıyoruz. y ve z null

// kısa yol

const yeniCarpmaIslemi= (x,y=2,z=3) => (x*y*z);
console.log(yeniCarpmaIslemi(1));

// uzun yol

function carpmaIslemi(x, y, z) {

if (y=== undefined)

y = 2;

if (z === undefined)

z = 3;

return x * y * z;

}

console.log(carpmaIslemi(1)); // sadece x değişkenine değer atıyoruz. y ve z null

// kısa yol

const yeniCarpmaIslemi= (x,y=2,z=3) => (x*y*z);

console.log(yeniCarpmaIslemi(1));

7. Değişken birleştirme(template literals): Değişkenleri birleştirmek için “+” kullanmaktan yorulmuş iseniz; ES6’da bu işlem backtick, ve ${} ile daha kolay bir şekilde yapılabilir. Denemek için tıklayınız.



const adi ="Ahmet";
const soyadi ="Kayabaşı"

// uzun yol
let cumle = "Kullanıcı Adı: " + adi +" Kullanıcı Soyadı:" + soyadi;
console.log(cumle);

// kısa yol
cumle = `Kullanıcı Adı: ${adi} Soyadı: ${soyadi}`;
console.log(cumle);

const adi ="Ahmet";

const soyadi ="Kayabaşı"

// uzun yol

let cumle = "Kullanıcı Adı: " + adi +" Kullanıcı Soyadı:" + soyadi;

console.log(cumle);

// kısa yol

cumle = `Kullanıcı Adı: ${adi} Soyadı: ${soyadi}`;

console.log(cumle);

8. Nesneleri parçalama (Destructuring): Bana göre en önemli madde. Mevcutta olan nesne yada dizileri küçük parçalara ayırmak istenildiğinde; ES6 ile gelen Destructuring ile nesne ya da diziden istediğimiz parçaları çekip kullanılabilir. Altı farklı örneğin bulunduğu kod parçalarını denemek için tıklayınız.



const kisi1 = {adi: "Ahmet" , soyadi: "Yerdeduran", cinsiyet: "Erkek"};
const kisi2 = {ad: "Ahmet" , soyad: "Yerdeduran", cinsiyet: "Erkek"};

// eski usul
const adi = kisi1.adi;
const soyadi = kisi1.soyadi;
const yas1 = 35;
console.log(adi,soyadi,yas1); // cinsiyet değikenine dokunmadık.
console.log( kisi1);

 
// kısa yol
const {ad, soyad, yas2 =35} = kisi2;  // cinsiyet değikenine dokunmadık.
console.log(ad,soyad, yas2);


// Destructuring için farklı kullanımlar

// ornek 1:
const  personel = {
    Adi: "Ahmet",
    Soyadi: "Yerdeduran",
    DogumYeri: {
        Il: "Ankara",
        Ilce: "Mamak"
    }
};

const { DogumYeri: { Il, Ilce } } = personel;
console.log(Il, Ilce);

// ornek 2:
const kisiler = ["Ali", "Veli", "Maria"];
let [k1, k2, k3] = kisiler;
console.log(k1, k2, k3);

// ornek 3:
let kisiler2 = ["Fatima", "Ayşe", "Hacer", "Zühre"];
let [k21, k22, ...rest] =kisiler2;  // spread operatör ile parçalama
console.log(k21,k22);

console.log("Kalan kisiler" + rest)


// ornek 5: fonskiyon olarak kullanım
 
let sayfaBilgisi = {
  baslik: "Medium",
  icerik: ["Javascript", "Angular"]
};
 
function sayfaBilgisiYaz({baslik = "Tanımsız" , icerik = []}) {
  console.log(baslik,icerik)
}

sayfaBilgisiYaz(sayfaBilgisi);

const kisi1 = {adi: "Ahmet" , soyadi: "Yerdeduran", cinsiyet: "Erkek"};

const kisi2 = {ad: "Ahmet" , soyad: "Yerdeduran", cinsiyet: "Erkek"};

// eski usul

const adi = kisi1.adi;

const soyadi = kisi1.soyadi;

const yas1 = 35;

console.log(adi,soyadi,yas1); // cinsiyet değikenine dokunmadık.

console.log( kisi1);

// kısa yol

const {ad, soyad, yas2 =35} = kisi2; // cinsiyet değikenine dokunmadık.

console.log(ad,soyad, yas2);

// Destructuring için farklı kullanımlar

// ornek 1:

const personel = {

Adi: "Ahmet",

Soyadi: "Yerdeduran",

DogumYeri: {

Il: "Ankara",

Ilce: "Mamak"

}

};

const { DogumYeri: { Il, Ilce } } = personel;

console.log(Il, Ilce);

// ornek 2:

const kisiler = ["Ali", "Veli", "Maria"];

let [k1, k2, k3] = kisiler;

console.log(k1, k2, k3);

// ornek 3:

let kisiler2 = ["Fatima", "Ayşe", "Hacer", "Zühre"];

let [k21, k22, ...rest] =kisiler2; // spread operatör ile parçalama

console.log(k21,k22);

console.log("Kalan kisiler" + rest)

// ornek 5: fonskiyon olarak kullanım

let sayfaBilgisi = {

baslik: "Medium",

icerik: ["Javascript", "Angular"]

};

function sayfaBilgisiYaz({baslik = "Tanımsız" , icerik = []}) {

console.log(baslik,icerik)

}

sayfaBilgisiYaz(sayfaBilgisi);

9. Varlık / Yokluk kontrolü: Bir değişkenin mevcut olup olmadığının için uzun if cümleciği kullanmak gerekebilir. Bu yöntem aşağıdaki şekilde kolayca yapılabilir. Denemek için tıklayınız.



let tanimliDegisken = "Deger atanmış";

let tanimsizDegisken;
 
 // uzun yol
if( typeof tanimliDegisken !== "undefined" && tanimliDegisken !==  "" && tanimliDegisken !== null
&& tanimliDegisken !== 0 && tanimliDegisken !== false  ) {
  console.log("uzun yol:"+ tanimliDegisken);  // varlık kontrolü
}

if( typeof tanimsizDegisken === "undefined" || tanimsizDegisken === "" || tanimsizDegisken === null
|| tanimsizDegisken === 0 || tanimsizDegisken === false  ) {
  console.log("Uzun yol. Değiken Tanımlanmamış "+ tanimsizDegisken);  // yokluk kontrolü
}


// kısa yol
if( tanimliDegisken ) {
  console.log("kısa yol. " +tanimliDegisken);  // varlık kontrolü
}


if( !tanimsizDegisken ) {
  console.log("kısa yol. Değiken Tanımlanmamış " +tanimsizDegisken);  // yokluk kontrolü
}

let tanimliDegisken = "Deger atanmış";

let tanimsizDegisken;

// uzun yol

if( typeof tanimliDegisken !== "undefined" && tanimliDegisken !== "" && tanimliDegisken !== null

&& tanimliDegisken !== 0 && tanimliDegisken !== false ) {

console.log("uzun yol:"+ tanimliDegisken); // varlık kontrolü

}

if( typeof tanimsizDegisken === "undefined" || tanimsizDegisken === "" || tanimsizDegisken === null

|| tanimsizDegisken === 0 || tanimsizDegisken === false ) {

console.log("Uzun yol. Değiken Tanımlanmamış "+ tanimsizDegisken); // yokluk kontrolü

}

// kısa yol

if( tanimliDegisken ) {

console.log("kısa yol. " +tanimliDegisken); // varlık kontrolü

}

if( !tanimsizDegisken ) {

console.log("kısa yol. Değiken Tanımlanmamış " +tanimsizDegisken); // yokluk kontrolü

}

10. Dizi birleştirme ve kopyalama: Denemek için tıklayınız. Örneklerde gösterirlen kopyalama işlemleri basit nesnelerde ve dizilerde işe yarıyor. İç içe olan nesnelerde bu kopyalama yöntemi çalışmıyor. İlerde bu konuyla ilgili yazı yazacağım.



// uzun yol
// dizi birleştirme
const tek = [1, 3, 5];
const cift = [2 ,4 , 6];
const sonuc = cift.concat(tek);
console.log(sonuc);

// dizi kopyalama;
const dizi1 = [1, 2, 3, 4];
const dizi2 = dizi1.slice();
dizi2[0] = 9999;  // yeni dizinin ilk elemanını dğeiştiriyoruz. eski dizide herhangi bir dğeişiklik olmayacak

console.log("dizi1: "+dizi1);
console.log("dizi2: "+dizi2)


// kısa yol

const tek2= [11, 13, 15];
const sonuc2 = [12 ,14 , 16,...tek2]; 
console.log(sonuc2);


const dizi3 = [11, 12, 13, 14];
const dizi4 =  [...dizi3]
dizi4[0] = 8888; // yeni dizinin ilk elemanını dğeiştiriyoruz. eski dizide herhangi bir dğeişiklik olmayacak

console.log("dizi3: "+dizi3);
console.log("dizi4: "+dizi4)

// uzun yol

// dizi birleştirme

const tek = [1, 3, 5];

const cift = [2 ,4 , 6];

const sonuc = cift.concat(tek);

console.log(sonuc);

// dizi kopyalama;

const dizi1 = [1, 2, 3, 4];

const dizi2 = dizi1.slice();

dizi2[0] = 9999; // yeni dizinin ilk elemanını dğeiştiriyoruz. eski dizide herhangi bir dğeişiklik olmayacak

console.log("dizi1: "+dizi1);

console.log("dizi2: "+dizi2)

// kısa yol

const tek2= [11, 13, 15];

const sonuc2 = [12 ,14 , 16,...tek2];

console.log(sonuc2);

const dizi3 = [11, 12, 13, 14];

const dizi4 = [...dizi3]

dizi4[0] = 8888; // yeni dizinin ilk elemanını dğeiştiriyoruz. eski dizide herhangi bir dğeişiklik olmayacak

console.log("dizi3: "+dizi3);

console.log("dizi4: "+dizi4)

11. Zorunlu Parametre Kontrolü: Tanımlanan fonksiyonda kullanıcının fonksiyonun parametresini girmesini zorlamak istenebilir. Denemek için tıklayınız.



// kısa yol ile yazılan fonksiyonu denemek için  uzun yol ile yazılan kısmı commnet yapınız.

// uzun yol
function adiYaz(adi) {
  if(adi === undefined) {
    throw new Error('Adı parametresi girilmeli!');
  }
  console.log ("Kullanici Adı:" +adi)
}
adiYaz("Ahmet"); 
adiYaz();

// kisa yol
zorunlu = () => {
  throw new Error('Adı parametresi girilmeli!');
}
adiYaz2 = (adi2 = zorunlu()) => {
   console.log ("Kullanici Adı:" +adi2);
}
adiYaz2("Ahmet");
adiYaz2();

// kısa yol ile yazılan fonksiyonu denemek için uzun yol ile yazılan kısmı commnet yapınız.

// uzun yol

function adiYaz(adi) {

if(adi === undefined) {

throw new Error('Adı parametresi girilmeli!');

}

console.log ("Kullanici Adı:" +adi)

}

adiYaz("Ahmet");

adiYaz();

// kisa yol

zorunlu = () => {

throw new Error('Adı parametresi girilmeli!');

}

adiYaz2 = (adi2 = zorunlu()) => {

console.log ("Kullanici Adı:" +adi2);

}

adiYaz2("Ahmet");

adiYaz2();

12. Tip Dönüşümleri: Denemek için tıklayınız.



////// herhangi bir değişkeni boolean tipine değiştirme
var a =1;
var b = !a; // true
var c = !!a; // false
console.log(a,b,c);

/////// herhangi bir değişkeni number tipine değiştirme

// uzun yol
const sayi1 = parseInt("5");
console.log(typeof sayi1, sayi1);  

// kısa yol
const sayi2 = +"6";
console.log(typeof sayi2,sayi2); 

const sayi3 = -"7";  
console.log(typeof sayi3,sayi3); 

const sayi4 = +true;  
console.log(typeof sayi4,sayi4); 


const sayi5 = -true;  
console.log(typeof sayi5,sayi5); 

/////// herhangi bir değişkeni string tipine değiştirme

// uzun yol
var sayi = 10,  deger = String(sayi);
console.log(typeof deger, deger); 

// kısa yol
var sayi = 12,  deger = ""+sayi;
console.log(typeof deger, deger); 

/*
('' + 0);         // sonuc: 0 (string)
('' + true);      // sonuc: true (string)
('' + false);     // sonuc: false (string)
('' + NaN);       // sonuc: NaN (string)
('' + undefined); // sonuc: undefined (string)
('' + null);      // sonuc: null (string)
*/

////// herhangi bir değişkeni boolean tipine değiştirme

var a =1;

var b = !a; // true

var c = !!a; // false

console.log(a,b,c);

/////// herhangi bir değişkeni number tipine değiştirme

// uzun yol

const sayi1 = parseInt("5");

console.log(typeof sayi1, sayi1);

// kısa yol

const sayi2 = +"6";

console.log(typeof sayi2,sayi2);

const sayi3 = -"7";

console.log(typeof sayi3,sayi3);

const sayi4 = +true;

console.log(typeof sayi4,sayi4);

const sayi5 = -true;

console.log(typeof sayi5,sayi5);

/////// herhangi bir değişkeni string tipine değiştirme

// uzun yol

var sayi = 10, deger = String(sayi);

console.log(typeof deger, deger);

// kısa yol

var sayi = 12, deger = ""+sayi;

console.log(typeof deger, deger);

('' + 0); // sonuc: 0 (string)

('' + true); // sonuc: true (string)

('' + false); // sonuc: false (string)

('' + NaN); // sonuc: NaN (string)

('' + undefined); // sonuc: undefined (string)

('' + null); // sonuc: null (string)

Sizin de eski köye yeni adetleriniz varsa, yorum olarak paylaşırsanız sevinirim.

Kaynaklar:

JavaScript Shorthand Coding Techniques – Designcise.com

ES6 In Depth: Destructuring – Mozilla Hacks – the Web developer blog

JavaScript