JavaScript Kopya Kağıdı

JavaScript Kopya Kağıdı

Bu yazıda javascript öğrenmeye başlayanlar için temel faydalı bilgileri bir araya getirmeye çalıştım.

Javascript’te bir method un tüm parametrelerini girerek fonksiyonu çağırmak zorunda değiliz.

Eklemediğimiz parametreler undefined değerini alır. Bundan dolayı aynı isimde farklı parametrelere sahip fonksiyonlar oluşturamıyoruz.

Parametrelerin data türünü belirlemek zorunda değiliz. (Dynamically typed)

Polymorphism

Aynı fonksiyon ismi ile farklı parametre seçeneklerinde methodlar oluşturmak ve dilin bu methodları verilen inputlara göre ayırıp doğru methodu çağırması. Javascript’te bu özellik bulunmuyor. Eğer aynı isimde iki fonksiyon varsa ikincisi ilkinin yerini alır.

 

Default parameters

foksiyona değer verilmez ise varsayılan değer atanabilir :

Function myFunc(name, weather = “raining”) {}

 

Rest Parameters

ek argumanları yakalayabilmek için kullanılır.

Function myFunc(name, weather, ...extraArgs) {
     for (let i = 0; i < extraArgs.length; i++) {
	console.log(“Extra arg : “ + extraArgs[i]);
    }
}

myFunc(“Adam”, “sunny”, “one”, “two”, “three”);

Rest parametresi isminin başına 3 nokta alır. extraArgs array tipindedir.

 

RETURN keyword

Fonksiyonların bir sonuç dönemsi için kullanılır. Fonksiyonu çağırıp sonucunu başka bir fonksiyon içinde de kullanabilirsin. Zincirleme olarak fonksiyon çağırımı yapılabilir.

Fonsiyonun ismiyle başka bir Fonksiyon içinde input olarak kullanılması

function myFunc(nameFunction) {
	Return (“Hellp” + nameFunction() + “.”);
}
function printName(nameFunction, printFunction){
	printFunction(myFunc(nameFunction));
}
printName(function() { return “Adam” }, console.log);

Arrow Fonksiyonları

Bir diğer adı fat arrow veya lambda expression olan bu isimlendirme fonkisyon tanımlamanın alternatif bir yöntemi olarak bir başka fonksiyona sadece arguman olarak sunulan fonksiyonlar için kullanılır. Return keyword’ü ve parantezler yalnızca birden fazla ifade hesaplanacak ise gerekir.

const myFunc = (nameFunction) => (“Hello “ + nameFunction() + “.”);
const printName = (nameFunction, printFunction) => 
				printFunction(myFunc(nameFunction));

printName(function() { return “Adam” }, console.log);

let : Değişken tanımlamak için kullanılır. Var gibidir.

Const : Tek seferde tanımlanan ve sabit değişmeyen değerlerde kullanılır.

Var : Değişkenin kapsamı bulunduğu fonksiyonun içidir. Bu karışıklığa sebep olabilmektedir. Bunun yerine let kullanılabilir.

 

Bir kenar notu olarak, ESLint paketi javascript kurallarını kontrol ederek değişken scope’u ile ilgili uyarılar verir. React geliştirme araçlarında ESLint kullanılıyor.

 

İç fonksiyon dışındaki (içine alan) fonksiyonun değişkenlerine erişebilir. Bu sayede içeri değişken atman gerekmez. Fakat değişken isimleri yaygın kullanılan isimlerle karıştırılmamalı (index, counter gibi)

function myFunc(name) {
	let myLocalVar = “sunny”;
	let innerFunction = function () {
		return (“hello” + name + “. Today is “ + myLocalVar + “.”);
	}
        return innerFunction();
}

Primitive Types

Javascript primitive türleri : string, number, boolean, undefined, null, Symbol

Undefined

Tanımlanmış fakat değer atanmamış

Null

Değişkenin hiçbir değeri olmadığında kullanılır.

Symbol

Sabit, değişmez (immutable) değer, unique ID yi ifade eder.

String Methodları

String ister ‘’ veya “ “ ile kullanılabilir.

 

İsim	Açıklama
length	Karakter sayısı
chatAt(index)	Belirli konumdaki stringi döner
concat(string)	Üzerinde çağırıldığı string ile input olarak verilen stringi birleştirip döner.
indexOf(term, start)	Term ifadesinin string içerisindeki ilk bulunduğu konumu döner. Eğer bulamazsa -1 olarak sonuç döner. START parametresi opsiyoneldir. Başlangıç konumunu içindir.
Replace(term, newTerm)	Bu method tüm term diye geçen stringi newTerm ile değiştirerek yeni bir string döner.
Slice(start,end)	Bu method stringi term ile ayırarak string array i döner. Örneğin virgülle ayırmak gb
toUpperCase()	Tüm karakterleri büyütür.
Trim()	Başta veya sonda boşluk yada whitespace varsa siler.

 

Template Strings

function messageFunction(weather) {
	let message = ‘It is ${weather} today’; 
        console.log(message);
}

Rakamlar hexadecimal 0xFFFF;  gibi tanımlanabiliyor.

Equality Operator vs Identity Operator

Equality operatörü == türden bağımsız değerleri karşılaştırır.

Identity operatörü === ise hem tür hem değerin eşitliğini karşılaştırmada kullanılır.

 

Javascript + operatörü string ile rakam toplamında rakamı da stringe dönüştürür.

Rakamları String’e çevirme

(5).toString()    veya toString(10)    veya  toFixed(n)   n: digit sayısı kadar rakama çevir.

toPrecision(n)    

Stringi rakama çevirme

Number(“5”) : Integer yada gerçek değer oluşturur

parseInt(str)  : Integer değeri oluşturur

parseFloat(str) : Integer veya gerçek değer oluşturur

Array’ler

let myArray = new Array();
myArray[0] = 100;      
myArray[1] = “Adam”;    
myArray[2] = true;

Array büyüklüğünü belirlemek gerekmiyor. JS otomatik yeniden arryi boyutlandırıyor. Array tek tür veri tutmuyor.

let myArray = [ 100, “Adam”, true ];
myArray[0]  = “Tuesday”

Array’in öğelerini birer birer kontrol etmek

for(let i = 0; i < myArray.length ; i++) {
	console.log(‘Index ${i} : ${myArray[i] } ’ );
}
myArray.forEach(    (value, index) => console.log(‘Index  ${index} : ${value } ’ )      );

for veya foreach kullanılarak array elemanları üzerinden gidilebilir.

 

Spread Operatörü

... ile gösterilir. Array içindeki mevcut tüm değerleri çağırmak için kullanılır.

printItems(...myArray);

arrayleri birbirine birleştirmede (concatenate) de işe yarıyor.

let myArray = [ 100, “A	dam”, true];
let myOtherArray = [ 200, “Bob”, false, ...myArray ];

Array Methodları

 

Array nesnesine ait methodlar:

İsim	Açıklama
concat(otherArrray)	İki arrayi birleştirir, birden fazla array eklenebilir.
join(seperator)	Array’in tüm elemanlarının birleşip string oluşturmasını sağlar. Ayraç karakteri ile tüm elemanlar birleştirilir ve bir string döner.
pop()	Array içindeki son elemanı siler ve sonuç olarak döner.
shift()	Array içindeki ilk elemanı siler ve sonuç olarak döner.
push(item)	Array in en sonuna input olarak verilen elemanı ekler.
unshift(item)	Array in en başına yeni bir eleman ekler.
reverse()	Tüm elemanları ters sıra ile yeni bir array döner.
slice(index, count)	Array’in bir bölümünü sonuç olarak döner.
sort()	Array in sıralanmasında kullanılır. Ek bir fonksiyon ile özel karşılaştırmada yapılabilir.
splice(index, count)	Count sayısı kadar elemanı index pozisyonundan başlayarak siler. Silinen elemanlar sonuç olarak dönülür.
every(test)	Bu method input olarak verilen test fonksiyonunu array içindeki tüm elemanlar için çalıştırır. Tümünde koşul sağlanırsa true, eğer bir tanesinden bile sonuç true değilse ise sonuç olarak false dönülür.
some(test)	Bu method test fonkisyonu için en azından bir elemanda true sonucu verirse sonuç olarak true dönülür.
filter(test)	Input olan test fonksiyonu için true sonuç dönen array elemanlarını sonuç olarak döndürür.
find(test)	Input olan test fonksiyonu için true dönen ilk array elemanını sonuç olarak döndürür.
findIndex(test)	Input olan test fonksiyonu için true dönen ilk array elemanının adresini (sırasını) sonuç olarak döndürür.
forEach(callback)	Array içindeki her öğe için callback fonksiyonunu çağırır.
includes(value)	Eğer array value değerini içeriyorsa sonuç olarak true döndürür.
map(callback)	Bu fonksiyon array içindeki tüm öğeler için callback fonksiyonunu çağırır ve her öğe için oluşan sonucu yeni bir array’de toplayarak output döndürür.
reduce(callback)	Callback fonksiyonunu akümüle (oluşan sonuç tüm öğelerde hesaplanıp biriktirilerek hesaplanan tek değer) değeri döndürür.

let products = [ 
                 { name : “Hat”, price : 24.5, stock : 10 },  
                 { name : “Kayak”, price : 289.9, stock : 1 } 
];

let totalValue = products.filter(item => item.stock > 0)
			.reduce( 
                                 (prev, item) => prev + (item.price * item.stock), 0);

JS’de Nesneler

let myDate = new Object();   // obje oluşturma
myData.name = “Erdem”;       // obje’ye özellik tanımlama
myData.weather = “sunny”;

Object Literal Format

let myData = {
	Name : “Erdem”,
	Weather : “sunny”
};

Değişkeni Property olarak kullanmak

let name = “Ismail”
let myData = {
	  name,
          weather : “sunny”
};

Fonksiyonları method gibi Kullanmak

Objelere fonksiyon ekleyebilirsin. Nesnenin içine eklenen fonksiyon method olarak isimlendirilir.

let myData = {
	Name : “Ismail”,
	Weather : “sunny”,
	printMessages:  function () {
		console.log(‘Hello ${myData.name}.’);
		console.log(‘Today is ${myData.weather}.’);
	}
};

myData.printMessages();

fonksiyonu nesne içinde şu yöntemler ile de tanımlayabilirsin:

printMessages() { }   

printMessages : () => { }

 

Nesnelerin Kullanımı

class MyData {
	constructor() {
		this.name = “Adam”;
		this.weather = “sunny”;
	}
	printMessages = () => {
		console.log(‘Hello ${this.name}.’);
	}
}

let myData = new MyData();

Constructor nesne yaratıldığında otomatik olarak çağırılır. This keyword’ü ile mevcut üzerinde bulunulan nesneye erişilmiş olur.

React geliştirilmesinde direk olarak inheritence kullanılmamakla birlikte, composition yöntemi ile kalıtım sağlanır.

 

Bir nesneden diğerine property’lerin kopyalanması

Object.assign(nesne, kopyalanacakOlanNesne)

Bu method ile input olarak girilen ilk nesne içerisine ikinci input nesnesinin property değerleri kopyalanır.

Bir diğer yöntemde spread operatörünü kullanmak:

let myData = new MyData();
let secondObject = { ...myData,weather: “cloudy” };

Nesne içinde Parametre değerlerini kullanmak

const myData = {
	name : “Erdem”,
	location : {
		city: “London”,
		country: “United Kingdom”
	},
	employment: {
		title : “Manager”,
		dept : “IT”
	}
}
// 1inci yol
function printDetails( data )
{
	console.log(‘Name : ${data.name}, City: ${data.location.city}, 
        Role: ${data.employment.title}’);
}

// 2inci yol
function printDetails( {name, location : { city } , employment : { title} })
{
	console.log(‘Name : ${name}, City: ${city}, Role: ${title}’);
}

JavaScript Modul’leri

Uygulamanın daha yönetilebilir parçalarda olması için modül’ler kullanılabilir. JS uygulamasının gereksinim duyduğu kod parçalarını içerir.

 

JavaScript’te Modül Oluşturmak ve Kullanımı

src klasörü altına aşağıdaki sum.js dosyasını ekleyelim:

export default function(values) {
	return values.reduce( total, val) => total + val, 0);
}

Yukarıdaki kod ile bir modül oluşturmuş olduk. Export keywordü modül dışında da erişilebilir olmasını sağlıyor. Bu sayede uygulamanın diğer kısımlarında kullanılabilir.

Default keyword’ü ise modül tek bir özellik (örneğin fonksiyon) içerdiğinde kullanılır.

 

JavaScript’te Modül Kullanımı

Örnek bir dosya içerisinde önce modül import edilir, daha sonrasında fonksiyon çağırılarak kullanılır.

import additionFunction from “./sum”;

let values = [ 10, 20, 30, 40, 50};

let total = additionFunction(values);

import keyword’ü ile gereksinim tanımı yapılır. İmport’tan sonra identifier yani fonksiyon adı getirilir.

En son modul’ün bulunduğu dosya adresi eklenir. Build sürecinde react tool’ları import kelimesini yakalayıpi sum.js dosyasını dahil eder ve tarayıcıya gönderir. Dosya adresinde uzantı bulunmaz.

Eğer fonksiyon ismi kullanılmadan import yapılırsa, node_modules klasörü altındaki gereksinimlerin (paketler) projede kullanılmasına imkan verir.

import React, { Component } from “react”;

React modülü içinde, node_modules klasörü altında ana react uygulama özelliklerine bu paket ile erişilir.

Modül’deki Özellikleri Çıkarıp Kullanmak

Modül özelliklerine isim ataması yapılabilir. Örneğin export edilen sum modülüne bakalım:

export function sumValues(values) {
	return values.reduce( (total, val) => total + val, 0 );
}

Fonksiyon aynı özelliği sağlıyor fakat default keyword’ünü kullanmıyor. Şimdi bu özelliği kullanalım:

import { sumValues } from “./sum”;

let values = [ 10, 20, 30, 40, 50];
let total = sumValues(values);

eklenecek olan özellik köşeli paratez ile belirtilir. Modül isimlendirilmiş ve default özellikleri aşağıdaki gibi export edebilir:

export function sumValues (values) {
	return values.reduce( (total, val) => total + val, 0);
}

export default function sumOdd(values) {
	return sumValues(values.filter( (item, index) => index % 2 === 0) );
}

Export edilen özellikleri kullanalım:

import oddOnly, { sumValues } from “./sum”;

let values = [ 10, 20, 30, 40, 50];
let total = sumValues(values);
let odds = oddOnly(values);

Modül içinde birden fazla fonkisyon veya değer içerebilir. Default kullanımı zorunlu değil. Default olmayan özellikler {} içinde virgül ile ayrılarak import edilir.

import { multiply, subtract } from “./operations”;     // operations.js dosyasından

Modül isimlerini değiştirmek

Kullanacağımız modülü farklı bir isimle kullanıp ile daha okunabilir bir kod elde edebiliriz.

import { multiply, subtract as deduct } from “./operations”;

console.log(‘Subtract: ${ deduct(1000, values) }’);

Tüm modülü dahil etmek

import * as ops from “./operations”;

JavaScript Promise

Promise arka planda çalışıp, çalıştırıldığı andan sonra ileride belirli bir zamanda tamamlanacak olan aktivitedir. Promise’ler örneğin HTTP isteği göndermede kullanılabilir. Asenkron bir biçimde, sunucudan cevap geldiğinde sonuç üretebilir.

Bir örnek ile kodun asenkron çalışmaması durumunda ne ile karşılacağımızı görelim.

import { sumValues } from “./sum”;

export function asyncAdd(values) {
	setTimeout( () => {
		let total = sumValues(values);
		console.log(‘Async Total : ${ total }’);
		return total;
	}, 500);
}

setTimeout fonkisyonu asenkron olarak bir fonksiyonu delay ( uzatma) süresi (milisaniye) sonunda çağırır. Böylece arka plandaki iş hemen çalıştırılmamış olur.

import { asyncAdd } from “./async”;

let values = [10, 20, 30, 40, 50];
let total = asyncAdd(values);
console.log(‘Main Total: ${total}’);

Kodu çalıştırdığımızda sonuç olarak aşağıdakileri elde ederiz. Kullandığımız asyncAdd fonkisyonu en son kısımda yer alan log mesajı çalıştırılmadan önce asenkron method ‘un işi tamamlanmadığından dolayı undefined sonucunu verir.

               Main Total: undefined

               Async Total: 150

JavaScript Promise Kullanımı

Asenkron bir görev olduğunda onun bitmesini bekleyip sonucu ondan sonra gösterimini sağlayacağımız durumda Promise kullanabiliriz.

Promise oluşturulurken new keyword’ünü kullanırız. Promise içinde izlenecek olan fonksiyonu kabul eder. İncelenecek olan fonksiyonda asenkron iş bitiminde görevin arguman sonucunu kabul eden ve geri çağıran callback mekanizması bulunur. Callback çağırılması sözün çözümlenmesidir (resolving promise).

then fonksiyonu içinde callback kullanıldıktan sonra çağırılacak fonksiyon tanımlanır.

import { sumValues } from “./sum”;

export function asyncAdd(values) {
	return new Promise(callback =>
	setTimeout( () => {
		let total = sumValues(values);
		console.log(‘Async Total : ${ total }’);
		return total;
		callback(total);
	}, 500);
}


import { async } from “./async”;
let values = [10, 20, 30, 40, 50];

asyncAdd(values).then(total => console.log(‘Main Total: ${total}’) );

JavaScript’te Basitleştirilmiş Asenkron

Async ve await keyword’leri ile promise kullanmadan asenkron işlemler gerçekleştirilebilir. Bu keyword’leri kullandığımızda then methodunu kullanmamız da gerekmeyecek.

import { async } from “./async”;

let values = [10, 20, 30, 40, 50];

async function doTask() {
	let total = await asyncAdd(values);
	console.log(‘Main Total: ${ total }’);
}

Bu keyword’ler sadece fonksyionlara uygulanabilir. Async keyword’ü bu fonksiyonun çalışması promise gerektirdiğini gösterir. Await keyword’ü ile çağırılan fonksiyon bir promise dönmesini ve await ile değişkene dönülen sonucun etkisiyle promise nesnesinin callback sonucu etkilenir.