Temiz Kod Yazma Kültürü

Değişkenler

Bir proje geliştirirken mutlaka o projeyi sadece siz geliştiriyormuşsunuz gibi değil de, sanki sizden sonra başkası o projeyi devralacak ve o devam ettirecek diye düşünün. Hatta bu düşünce yapısında, sadece kendi kültürümüzdeki veya yetenek seviyemizde değil de, evrensel düşünmeliyiz.

Değişkenler

Değişken isimleri belirlerken hemen aklınıza gelen isimle değil, anlamlı ve belirgin bir isim kullanın.

const dateOfControl = new Date();
const currentDate = new Date();
getUserName();
getUserSurname();
getUser();
// 60000 ne demek?
setTimeOut(anyMethod(), 60000);
const ONE_MINUTE = 60000;
setTimeOut(anyMethod(), ONE_MINUTE);
const cities = ["İstanbul", "Ankara", "İzmir"];
locations.forEach(l => {
getZipCode(1);
// 1 nedir?
});
const cities = ["İstanbul", "Ankara", "İzmir"];
locations.forEach(city => {
getZipCode(city);
});
city.cityCode();
city.code();
const getName = name => {
return name || "İsim yok.";
}
const getName = (name = “İsim yok.”) => {
return name;
}

Fonksiyonlar

Fonksiyonlarda parametre sayısı sınırlandırılmalıdır. Teoride bir fonksiyon canımızın istediği kadar parametre alabilir, ancak bu durum fonksiyonun hem anlaşılmasını, hem kullanılmasını hem de o fonksiyonun test edilebilirliğini imkansız hale getirir. En fazla 3 adet parametre alması uygundur, ideal olanı da 1 veya 2 parametredir. Eğer 3’ten fazla parametre alması gerekiyorsa, o fonksiyon parametre olarak Object almalıdır ve o Object içinden değerler ayrıştırılmalıdır. Ayrıştırma işlemini ES6’da gördüğümüz Object parçalama metodu ile rahatlıkla yapabiliriz.

const createMessage = (name, organization, city, time) => {
return "Merhaba" + name + ", " + organization + " şirketinden gelmiş olmalısınız. Saat şu an " + time + " ve şu an " + city + " şehrindeyiz.";
}
createMessage("X", "ABC", "İstanbul", "12:30");
const createMessage = user => {
return "Merhaba" + user.name + ", " + user.organization + " şirketinden gelmiş olmalısınız. Saat şu an " + user.time + " ve şu an " + user.city + " şehrindeyiz.";
}
const user = { name: "X", organization: "ABC", city: "İstanbul", time: "12:30" };
createMessage(user);
showNameAndSurnameAndAge();
showName();
showSurname();
showAge();
// Ne için gün ekleniyor?
addDay();
addDateForPlan();
const getMesage(message) => {
let currentTime = new Date().toLocaleTimeString();
return "Gelen mesaj " + message + "[" + currentTime + "]";
}
const postMesage(message) => {
let currentTime = new Date().toLocaleTimeString();
return "Giden mesaj: " + message + "[" + currentTime + "]";
}
const getCurrentTime = () => {
return new Date().toLocaleTimeString();
}
const getMesage = message => {
return "Gelen mesaj " + message + "[" + getCurrentTime() + "]";
}
const postMesage = message => {
return "Giden mesaj: " + message + "[" + getCurrentTime() + "]";
}
const buttonConfig = {
text: "Google",
link: "https://www.google.com",
enabled: true
};
const createButton = config => {
config.title = config.title || "Boş";
config.link= config.body || "#";
config.enabled = config.enabled !== undefined ? config.enabled : false;
}
createButton(buttonConfig);
const buttonConfig = {
text: "Google",
link: "https://www.google.com"
};
const createButton = config => {
config = Object.assign(
{
title: "Boş",
link: "#",
enabled: false
},
config
);
}
createButton(buttonConfig);
let message = "Bu bir deneme yazısıdır.";const countMessageWords = text => {
message = text.split(" ");
return message.length;
console.log(message);
// Yan etki oldu, mesaj değişkeni artık 4 sonucunu veriyor.
}
countMessageWords(message);
let message = "Bu bir deneme yazısıdır.";const countMessageWords = text => {
return text.split(" ");
}
const messageWordLength = countMessageWords(message).length;console.log(messageWordLength);
const addItemToList = (list, item) => {
list.push({ item, date: Date.now() });
};
const addItemToList = (list, item) => {
return [...list, { item, date: Date.now() }];
};
Array.prototype.different = function different (comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
};
const totalList = [1,2,3,4,5];
const checkList = [2,5]
console.log(totalList.different(checkList)); //[1, 3, 4]
class ExtendedArray extends Array {
different(comparisonArray) {
const hash = new Set(comparisonArray);
return this.filter(elem => !hash.has(elem));
}
}
const numbers = [1,5,6,7];let totals = 0;for (let i = 0; i < numbers.length; i++) {
totals += numbers[i];
}
console.log(totals); //19
const numbers = [1,5,6,7];const totals =  numbers.reduce(
(currentTotal, output) => currentTotal + output, 0
);
console.log(totals); //19
if (data.state === "empty" && isActive(data)) {
// ...
}
function shouldGenerateCard(data, user) {
return data.state === "empty" && isActive(user);
}
if (shouldGenerateCard(dataInstance, userInstance)) {
// ...
}
if(!user.userActive()){
//
}
if(user.userActive() === true){
//
}
const calculate = (type, numberOne, numberTwo) => {
if(type === "sum"){
return numberOne + numberTwo;
}
if(type === "diff"){
return numberOne - numberTwo;
}
}
const getDiff = (numberOne, numberTwo) => numberOne - numberTwo
const getSum = (numberOne, numberTwo) => numberOne + numberTwo
getDiff(1, 5); //-4
getSum(2, 5); //7
const combine = ( a,b ) = {
if (
(typeof a === "number" && typeof b === "number") ||
(typeof a === "string" && typeof b === "string")
) {
return a + b;
}
throw new Error("Parametre türleri aynı değil.");
}
const combine = ( a,b ) = {
return a + b;
}
// len değişkenine gereksiz, tarayıcı zaten durumu algılayacaktır.
for (let i = 0, len = user.length; i < len; i++) {
// ...
}
for (let i = 0; i < user.length; i++) {
// ...
}

Açıklamalar

Sadece işleyiş mantığı karmaşık olan şeyleri yorumlayın. Yorumlar zorunluluk değil veya bir şeyi açıklamak da değildir. İyi bir kod kendisini zaten açıklar.

// Sayılar dizide tutuluyor.
var numbers = [1,5,6,7];
// Her bir sayı tek tek toplanıp totals değişkenine aktarılıyor.
const totals = numbers.reduce(
(currentTotal, output) => currentTotal + output, 0
);
// Toplam değerler konsolda yazdırılıyor.
console.log(totals); //19
var numbers = [1,5,6,7];
// Bütün sayıların toplamı
const totals = numbers.reduce(
(currentTotal, output) => currentTotal + output, 0
);
console.log(totals);
getUserName();
//getUserNameFromData();
getUserName();
/* Kullanıcı adını çeken fonksiyon yazdık */
/* Bu fonksiyon önce data gelmiş mi diye bakar */
/* Data varsa içinden kullanıcı adını çeker */
getUserName();
getUserName();
//////////////////////   VERİYİ ÇEKEN METOT BURADA  //////////////////////
getData();
getUserName();

Biçimlendirmeler

Biçimlendirmeler, programlama dillerinde zorunlu olmayan, ancak kodun okunabilirliği açısından zorunluluğu kaçınılmaz olan kod düzen sistemidir. Mesela kodlarda yer alan girintiler, sekmeler, boşluklar, çift veya tek tırnaklar gibi… Bunun için IDE’lerde birçok yerleşik veya ekstradan yüklenen plug-in’lerle kodlar biçimlendirilebilir, bunlardan en uygun olanını kullanın. Mesela kitapta Visual Studio Code’da yerleşik olarak Format Document veya Format Selection araçları kullanılabilirken, ekstra plug-in’lerden js-beautify da kullanılabilir.

const pi = 3.14
// Daire alanı hesapla
const calculateCirclearea = r =>{
return r*r *pi}
const PI = 3.14;
// Daire alanı hesapla
const calculateCircleArea = r => {
return r * r * PI
}
const MONTH_IN_WEEK = 7;
const daysInyear = 365;
const books = ["Kitap 1", "Kitap 2"];
const Authors = ["Yazar 1", "Yazar 2"];
function getBooks() {}
function get_Authors() {}
class bookStore {}
class author {}
const MONTH_IN_WEEK = 7;
const DAYS_IN_YEAR = 365;
const BOOKS = ["Kitap 1", "Kitap 2"];
const AUTHORS = ["Yazar 1", "Yazar 2"];
function getBooks() {}
function getAuthors() {}
class BookStore {}
class Author {}
class Books {

constructor() {
}
func_1() {
//
}
func_3() {
//
}
func_2() {
//
}
define () {
this.func_1();
this.func_2();
this.func_3();
}
}
const book = new Books ();
book.define();
class Books {

constructor() {
}
define() {
this.func_1();
this.func_2();
this.func_3();
}
func_1() {
//
}
func_2() {
//
}
func_3() {
//
}
}
const book = new Books ();
book.define();

--

--

Full-stack Developer [ UI / UX | JAM Stack | ME(A,R,V)N | LAMP ], Author, Pro Gamer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Uğur GELİŞKEN

Full-stack Developer [ UI / UX | JAM Stack | ME(A,R,V)N | LAMP ], Author, Pro Gamer