JAVASCRIPT PÜF NOKTALARI

4 min readMar 7, 2021

Çalışır haldeki her kod iyi yazılmış kod değildir ve bu kodlar yazılımcısını iyi bir yazılımcı yapmaz.

İyi bir yazılımcı öncelikle yazdığı kodun sadece kendisi için yazılmadığını bilir. Buna uygun olarak takım arkadaşlarının veya kendisinden sonra gelecek , o kodlar üzerinde çalışacak kişilerin okuyabileceği sadelikte kodlar yazar.

Maksimum okunabilirlik, iyi kod yazmak ve kötü kodu iyi koda dönüştürmek adına geliştirilmiş faydalı bulduğum bazı ipuçlarını örneklerle beraber sizlerle paylaşacağım.

Bahsedeceğim ipuçları:

Ternary Operator
Template Literal
Arrow Function
Rest Parameter
Spread Operator
Destructuring
Some Operations

1. TERNARY OPERATOR

3 adet parametre alan tek JS operatorü olan ternary operator sıklıkla if karşılaştırmalarında kullanılır. ve satır sayısı olarak da hatırı sayılır bir katkı sağlar.

Kullanım biçimi: [Condition] ? [Condition True] : [Conditon False];

Ternary operator kullanmadan:

let a = 5;
let b = 4;  if (a > b) {
     console.log('a bigger than b') ;
  }
  else {
     console.log('b bigger than a');
  }//a bigger than b

Ternary operator kullanarak:

let a = 5;
let b = 4;let control = a > b ? 'a bigger than b' : 'b bigger than a';console.log(control);//a bigger than b

Ancak ternary operatorler tek satırlık koşullarda geçerlidir.

2. TEMPLATE LITERAL

String veri tipi programlamada en çok kullanılan değişken türlerindendir. Template literal özellikle string kullanılırken oldukça fayda sağlar.

Template literal kullanmadan:

function sayHello(name, age){
   console.log("My name is " + name + " and I am " + age + " years old.");
};sayHello1('Nurşin',22) // My name is Nurşin and I am 22 years old.

Template literal kullanarak:

function sayHello(name, age){
   console.log(`My name is ${name} and I am ${age} years old.`);
}sayHello('Nurşin',22) // My name is Nurşin and I am 22 years old.

Görüldüğü gibi daha okunabilir ve kısa bir kod yazmış olduk.

Bununla beraber template literalın bir başka kullanımı daha bulunmaktadır. Çok satırlı dizeler: Tek bir dize, iki veya daha fazla satıra yayılabilir. Bu işlemi tekrardan backtick(``) karakterini kullanarak oluşturabiliriz.

const multiline = `
      Template Literal
      sayesinde
      \\t \\n kullanmadan
      daha düzenli
      kod yazabiliriz.`;console.log(multiline);//output-> Template Literal 
                                  sayesinde
                                  \t \n kullanmadan 
                                  daha düzenli
                                  kod yazabiliriz.

3. ARROW FUNCTİON

Arrow fonksiyon, kısaltılmış bir fonksiyon ifadesidir.

Fonksiyon tanımında kullanılan function anahtar kelimesinin yerine

( ) => { }

bu kısa ve daha anlaşılır ifadeyi kullanabiliriz. Eğer birden fazla ifade kullanmayacaksak süslü parantez kullanmamıza gerek kalmaz.

Hadi bu sade kullanım biçimini örneklerle daha iyi kavrayalım. Bu örneklerde hem arrow function kullanılmamış hem de kullanılmış halini gösterdim.

const normalFn = function(){
  return 'Normal Function';
}console.log(normalFn());// Normal Function
const arrowFn = () => ‘Arrow Function’;
console.log(arrowFn());// Arrow Function

Parametre kullanarak arrow function tanımlasaydık:

function square(x) {
  return x * x;
}
console.log(square(4)); // 16
const squareArrow = x => x * x;
console.log(squareArrow(4)); // 16

Fonksiyonun JavaScript’de bir obje olduğunu ve referans olarak geçtiğini düşünürsek arrow fonksiyonun scope zincirini değiştirerek yan etkiyi minumuma indirdiğini de söylemek gerekiyor.

4. REST PARAMETER

Rest parametreleri kalan tüm öğeleri bir dizide toplar. Bu, gerçekten düzgün fonksiyon tanımları yapmamızı sağlar.

ÖRNEK1:

// Parametreleri sıralı bir dizi olarak döndür.
const sortParameter = (...parametre) => parametre.sort();console.log(sortParameter(5,2,4,3,6,7,1));// [1, 2, 3, 4, 5, 6, 7]

ÖRNEK2:

const lengthOfParameter = (...parameters) => console.log(parameters.length);lengthOfParameter(); // 0
lengthOfParameter("22,56,43,21"); // 1

Kodun o aşamasında elinizde bir array yoksa bunun için ekstradan array oluşturma kodundan sizi kurtarmış olur.

NOT: Rest parameters fonskiyonun son parametresi olmalı.
Bir fonksiyonda sadece bir tane Rest parameters kullanılabilir.

5. SPREAD OPERATOR

Rest parametreleriyle, bir diziye argümanların bir listesini alabildik.

Spread operator ile bir fonksiyona tek seferde sonsuz değer göndermek veya bir dizinin elemanlarını tek seferde elde etmek veya diziyi kopyalamak gibi vs. durumlarda kullanım sağlayabiliriz.

Yani arkaplanda bu sefer elinizde array değerleri var ve siz bunları array’ in dışındaki değerler gibi dağıtmak istiyorsunuz.

const langs = ["Python", "JavaScript", "C++", "Php"];// Spread operator kullanmadan
console.log(langs[0], langs[1], langs[2], langs[3]);// Spread operator kullanarak
console.log(...langs);// Output-> Python JavaScript C++ Php
const langs2 = ["Java", "C#"];
console.log(...langs,...langs2);// Output-> Python JavaScript C++ Php Java C#

Aynı zamanda spread operatorlerin objelerdeki kullanımına göz atalım.

const person = {
   firstname: 'Nurşin',
   lastname: 'Keleş',
   age: 22
}const job = {
   department: 'Frontend Developer',
}let nursin = {...person, ...job};
console.log(nursin);// output-> {firstname: "Nurşin", lastname: "Keleş", age: 22, title: "Frontend Developer"}// Immutable bir sekilde guncellenmis bir obje yaratiyoruznursin = {
  ...person,
  ...job,
  age: 23,
};// Guncellemek isteyeceginiz property'i en alta yazmalisiniz Yani siralama onemliconsole.log(nursin);// output-> {firstname: "Nurşin", lastname: "Keleş", age: 23, title: "Frontend Developer"}

6.DESTRUCTURING

Destructuring bir obje veya bir array icinden her bir elemanın alınıp bir degişken içine kaydedilmesidir.

Destructing işlemi değer atama işlemi gibi yapılır. Kaynak nesne veya diziden alınmak istenen değerler eşitliğin sol tarafına yazılır.

ÖRNEK1:

const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];// const firstDay = days[0];
// const secondDay = days[1];
// const lastDay = days[2];const [firstDay, secondDay, lastDay] = days;console.log(firstDay, secondDay, lastDay);// Monday Tuesday Wednesday

ÖRNEK2:

const numberArray = [100, 200, 300, 400];const[number1, number2] = numberArray;console.log(number1,number2);//100 200

7. SOME OPERATIONS

💡Üst alma: Normalde üst alma işlemlerinde Math.pow(4, 2)ifadesini yazarız. Ancak ES7 ile birlikte gelen **operatörünü kullanmak daha kısa kod yazmamıza fayda sağlar.

console.log(4 ** 2); // 16

💡Tam sayıya çevirme: Ondalıklı sayıları tam sayıya çevirme işlemlerinde Math.floor() , Math.ceil() veya Math.round() kullanırız. Bunun yerine | operatörünü kullanmak işimizi kolaylaştırır. Bu işlem ondalık noktadan sonra gelen her şeyi kaldırır.