Javascript Basics Serisi 1.Kısım (Özet Bilgi)

Açıkcası yazma fikrini benimsediğim şu günlerde aldığım yeni bir karar sonucu öğrendiğim her yeni bilgiyi kısımlar halinde yazmaya bir nevi kişisel ajandamı online bir ortama taşımaya karar vermiş bulunmaktayım.Uzun süredir Javascript çalışmaya başlamayı kafamda tasarlıyordum fakat bir türlü zaman bulup da başlayamamıştım.Malum staj vesilesiyle Javascript epey önem kazandı.Bu araştırma öğrenme ve yazma aşamalarını harmanlayarak özet bilgilerim içerisine Javascripti de eklemeye karar verdim.

Kısaca Javascriptden bahsetmek gerekirse web dünyası adına arayüz programlamada sıklıkla kullandığımız bi script dili günümüzde arayüz geliştirme mobil uygulama geliştirme , oyun programlama , sunucu taraflı uygulama geliştirme gibi bir çok konuda kullanabildiğimiz adeta bir joker kartı diyebiliriz.Ne kadar doğrudur bilinmez fakat “Sadece Javascript öğrenerek istediğiniz her işi uçtan uca yapabilecek yeteneğe sahip olabilirsiniz.”

Ön yüz geliştirmede sıklıkla kullanıldığına biraz önce değinmiştim.Bu konulara aşina olan birçok kişinin de bildiği üzere ön yüz geliştirmede oldukça popüler olan React , Angular , Vue gibi güçlü frameworkler ve sayısız kütüphane Javascript üzerine kurulmuştur.Hal böyle olunca Web geliştirmede javascript vazgeçilmez olmuş durumdadır.

Profesyonel dünyaya bakacak olursak aslında javascript diye bir kavram yoktur . Daha çok EcmaScript , TypeScript , CoffeeScript isimlerini duyacaksınızdır.Her birinin farklı yazım metotları bulunur ve birbirlerine fazla benzemezler.Ama sonuç olarak her biri Javascript temelinden gelmektedir.

Bu seri Javascript dilinin temel özelliklerinden başlayacak ve hemen hemen tüm özelliklere değinilmeye çalışılacaktır.Daha sonra EcmaScript ve TypeScript ile başka yazılarda devam etmeyi umuyorum.

Neden Javascript?

Öğrenimi kolay.

Kurulum gerektirmez.

Web tarayıcılarında yerleşik olarak bulunur.

Her alanda kullanılabilir.

Mesela :

Node.js ile sunucu tarafında

Cordova veya React Native ile mobil uygulamalarda

Electron ile masaüstü uygulamalar,IoT,Robotik , Virtual Reality de

Evrensel bir dildir.

Web dünyasının ana dili gibidir.

NPM paketleri 30.000 den fazladır.

Javascript ile Tanışalım

“Javascript web dünyasının dilidir”

Javascript 1995 yılında ilk gerçekçi tarayıcıyı aynı adla tanıtan Netscape tarafından geliştirildi.Diğer tarayıcı geliştiricileri de yapılan bu gelişimi takip ederek web dünyasının istemci taraflı kodlama dili olarak Javascripti tanımaya başladı.Javascript ilk olarak LiveScript olarak tanınmıştı.O dönemlerde Java dili oldukça popülerdi. Javanın popülerliğinden faydalanmak isteyen geliştirici ekibi JavaScript olarak isim değişikliği uyguladı.Zamanla Java dili sunucu taraflı bir dile dönüştü Javascript ise client side da kaldı.O zaman için kullanım alanı günümüzdeki kadar geniş olmayan Javascript , Java dili tarayıcılarda başarı sağlayamayınca boş kalan koltuğa çoktan yeleşmişti.Bu isim benzerliği sebebiyle dil Javanın script hali gibi algılandı.

İlk sürümün tanıtılmasının ardından Javascript dili standartlaşma yoluna giderek kar amacı gütmeyen standartlar kuruluşu ECMA International a tanıtıldı.Bunun ardından dil EcmaScript olarak kabul görmeye başladı.EcmaScript , Microsoft tarafından JsScript , Adobe tarafından ActionScript olarak evrime uğradı.Günümüzde Flash ın kabul görmemesi ve desteklenmemesi sebebiyle ActionScript kullanılmamaktadır (Hey gidi arkasında müzikli ordan oraya animasyon kaydırmalı Flash Web siteleri heeey gidi günler beeee.) Microsoft tarafına bakacak olursak da Javascriptin OOP prensipleri ile harmanlandığı TypeScripti göreceğizdir.

Java , C,C++,C# gibi diller daha katı kurallarla OOP prensiplerine bağlıdır.Javascripte bakacak olursak çok daha esnek ve fonksiyonel bir dil olduğunu söylemek mümkün.Her ne kadar OOP desteklensede 2020 yılı adına OOP nin Javascript için kötü bir yaklaşım olduğu benimsenmiştir.Tabii bunlar dilin tartışmaya açık olan konuları diyebiliriz.

JavaScript, teknik olarak derlenmiş olmasına rağmen genellikle yorumlanmış olarak sınıflandırılır. Javascript tarayıcı veya platform üzerinde interpret edilen bir dildir. Yukarıda bir Javascript motorunun (Javascript Enginee) iç yapısı görünmektedir. JavaScript motorlarını öğrenmek, kodunuzu çalıştırdığınızda neler olduğunu öğrenmektir. Bu tür bilgi, programcıların daha iyi, daha hızlı ve daha akıllı kod yazmasına yardımcı olur. Bu konuda daha kapsamlı bir bilgi için TIK TIK!

Javascript en yaygın olarak tarayıcı ortamında çalışmaktadır. Javascript kodu HTML sayfalarına gömülür ve HTML sayfalarıyla etkileşim içindedir.Kullanıcıdan girdi çıktı alma kabiliyetine sahip değildir.Bu sebeple HTML DOM ile birlikte çalışır.Yani HTML entegrasyonu olmadan tarayıcıda çalışmaz . İlk yıllarında HTML sadece sayfada veri göstermeye odaklıydı. Bunları daha önce HTML serisinde anlatmıştım. HTML 5 sürümü ile birlikte hibrit bir yaklaşımla HTML5+Javascript ile yazılmış uygulamalar masaüstü ve mobil üzerinde de çalışabilmektedir.Hatta üstüne üstlük platform bağımsız olarak da çalışabilir.

HTML veri alır fakat işleyemez. Javascript veri işler ama veri alamaz.

HTML e Javascript Ekleme

Günümüzde her ne kadar Javascript her yerde kullanılabilir bir dil haline gelmiş olsa da web için kullanımda mutlaka HTML e entegre etmeyi bilmek gerekmektedir.

Html sayfası içerisine javascripti genel olarak <head></head> tagi içerisinde görürüz. Bu günümüze kadar gelmiş eski bir alışkanlıktır. Bunun sebebi ise HTML dilinin diğer programlama dilleri gibi interpret edilirken yukardan aşağıya doğru ilerlemesidir.Bir HTML sayfasının görünümü <body></body> taglerinin içinin okunması ile görüntülenmeye başlar.Body den önce kod <head> e uğrar. Burada scriptin çalıştırılıp hazır hale getirilmesi sayfanın görüntü olarak bir bozulmaya uğramadan kullanıcıya sunulması adına önemlidir.Fakat bu zorunlu değildir çok zorunlu olmayan durumlarda body tagleri içerisinde de script yazılabilir.

HTML’de JavaScript kodu, <script> ve </script> etiketleri arasına eklenir.

Taglar içerisinde <script> tagi ile javascript kodunu direk HTML e entegre etmek gömülü kullanım olarak adlandırılır.Fakat bu çok da sağlıklı bir kullanım olmaz. Bu sebeple Javascript kodlarını dosyalar halinde dışardan yüklemek daha yaygın bir kullanımdır.Head tagi içerisinde Javascript çağrısı:

<script src=”javascript.js”></script> ile yapılır.

Peki birden fazla .js uzantılı dosya ile çalışmamız gerekiyorsa ne yapmalıyız ?

Açıkcası böyle bir durumda her birini head içerisinde tek tek çağırmak head taginin aşırı şişmesi ve html kodunun okunaksız ve uzun olmasına neden olacaktır.Bu duruma şöyle çözüm üretilebilir.

Örneğin index.js isimli bir dosyanız olduğunu varsayalım.Ayrıca alert.js , write.js , console.js isimli 3 dosyanız daha bulunsun. index.html üzerinde sadece index.js çağırısı yapıp diğer dosyaları index.js e ekleyeceğiniz basit bir komutla çözebilirsiniz. Bunun için index.html e aşağıdaki çağrıyı ekleriz.

<script src=”index.js”></script> çağrısını yapabilirsiniz.

index.js dosyamızın içeriği ise şu şekilde olur

function loadJS(file){

var script=document.createElement(‘script’);

script.src=file;

document.getElementsByTagName(‘head’).item(0).appendChild(script);

}

loadJS(‘write.js’);

loadJS(‘console.js’);

loadJS(‘alert.js’);

Burda dikkat çekmem gereken bir husus var. loadJS fonksiyonu kendisine verilen yoldaki dosyayı yüklemez.Aslında mantık çok daha farklıdır. Head etiketi arasında sırayla <script> etiketleri açıp src fonksiyonuna gönderilen dosya yolunu yazar.Böylece head içerisinde tek tek çağrı yapmışız gibi algı yaratır. Böylece dosyalar yüklenmiş olur. Bunu dinamik olarak Javascript dosyalarının tek kaynakta birleştirilerek yüklenmesi diyebiliriz.

Modern web sitelerinde, komut dosyaları genellikle HTML’den “daha ağırdır”: indirme boyutları daha büyüktür ve işlem süresi de daha uzundur.Tarayıcı HTML yüklediğinde ve bir <script>…</script> etiketiyle karşılaştığında, DOM oluşturmaya devam edemez. Komut dosyasını hemen şimdi yürütmesi gerekir. Aynısı <script src=”…”></script> harici komut dosyaları için de geçerlidir: tarayıcı komut dosyasının indirilmesini beklemeli, indirilen komut dosyasını çalıştırmalı ve ancak o zaman sayfanın geri kalanını işleyebilir.

Asenkron (async ) ve Ertelemeli (defer) olarak yükleme dediğimiz iki kavram daha bulunmaktadır.Asenkron olarak etiketleyerek yüklemek demek , HTML sayfası tam olarak yüklenmeden bağımsız olarak javascript kodlarının yüklenmesi demektir.Uyumsuz bir yükleme durumudur. Yerine göre gerekli olabilir.Örneğin Javascript dosya boyutu büyük ve yüklenmesi zaman alıyorsa , HTML sayfası geç yüklenecek ve ağırlaşacaktır.Ancak bu dosya başlangıç anında kullanılmayacaksa asenkron yani eş zamanlı olarak yüklenmesi sağlanabilir ve bu yararlı bir kullanımdır.Defer kullanımında ise ana mantık şu şekildedir.Önce HTML sayfası tamamen yüklenir.Daha sonra ilgili Javascript dosyası yüklenmeye başlar.

Kullanımlar ise şu şekilde olacaktır : TIK TIK!

Yukarıda verilmiş şekli inceleyelim.Klasik scriptte önce HTML çözümlemesi başlatılıyor.İlgili satıra gelindiğinde Javascript indirilmeye başlanıyor ve HTML durduruluyor. Script yüklendikten sonra HTML çözümlemesi devam ettiriliyor.

Asenkron yüklemede ise HTML çözümlemesi sırasında script bir yandan arka planda indiriliyor. Scriptin sadece çalışma sırası geldiğinde HTML çözümlemesi kesintiye uğratılıyor ve yüklemenin ardından HTML çözümlemesi devam ettiriliyor.

Ertelemeli yöntemde ise HTML çözümlemesi sırasında bir noktada script indiriliyor.Tüm bu süreç içerisinde HTML çözümlemesi bölünmüyor.HTML tamamen yüklendikten sonra çalıştırılıyor.

Değişkenler ve Sabitler

Değişken tanımlarken var ve let ifadeleri kullanılabilir.

var personName ;

let personSurname ;

Güncel kullanım let olacaktır. var daha eski bir kullanımdır.Daha eski komut dosyalarında, let yerine var kullanımlarını sıklıkla görmek mümkündür.var anahtar sözcüğü let ile hemen hemen aynıdır.İkiside bir değişken bildirir fakat var daha “old-school-way” olarak tanımlanabilir.let ve var arasında ince farklar vardır,

var ile bir değişken oluşturduğumuzda ve herhangi bir değer atamadığımızda, oluşturulan değişkenin değerine default olarak undefined atanır. Buna daha sonra değineceğim.Oluşturduğumuz bu değişkeni console.log ile çağırdığımızda undefined çıktısını alırız.Değer atamadan sadece değişken oluşturma işlemine Variable Declaration denilmektedir.Bir değişkene ilk değeri atama işlemine Variable Initialization denmektedir.

Scoping Rules Kavramı:

Scope uygulamamızda ki değişkenlerin ve fonksiyonların nerelerde erişilebilir, nerelerde erişilemez olduklarını belirler.Temelde 2 tür Scope vardır. Bunlar Global Scobe ve Local Scopedur. let ve const ifadelerinin gelmesiyle local scope a ait 2 tür daha ortaya çıkmıştır. Bunlar Function Scope ve Block Scope olarak anılmaktadır.

Global Scope

Global Scope özellikli değişkenler, fonksiyon içerisinden de erişilebilir durumdadırlar.Özetçe , fonksiyonların ya da for, if veya while gibi blokların dışında tanımlanan değişkenlerin sahip olduğu Scope türüdür. Bu değişkenlere her yerden ulaşılabilir.

Local Scope

Değişken bir fonksiyon içerisinde tanımlanmışsa bunun kapsamına Local Scope adı verilir. Tanımlanan değişken de bir local değişkendir. Bu kavramın da meali şudur, global Scope’da belirtilen yapıların içerisinde tanımlanmış ve sadece tanımlandığı alan içerisinden ulaşılabilen değişkenlerin sahip olduğu scope türüdür.

Function Scope

Eğer var ile tanımlanan bir değişken, bir fonksiyon içerisinde oluşturulmuş ise, sadece o ve nested dediğimiz fonksiyon içerisinde bulunan diğer fonksiyonlar içerisinde çağırılıp kullanılabilir.Bir fonksiyonda bir değişken tanımladığınızda, değişken sadece fonksiyon içinde görünür. Fonksiyonun dışında ona erişemezsiniz.

Block Scope

Block Scope, if, switch koşulları veya for ve while döngüleri içindeki alandır. Genel olarak konuşursak, {…} gördüğünüzde, bu bir bloktur. let veya const ile tanımlanan değişkenler Function Scope yerine Block Scope içerisinde yer alır. Bu değişkenlerin yalnızca karşılık gelen blok içinde var olduğu anlamına gelir.

Local Scope, iç parantezler arasındaki alandır. Function Scope, birden fazla local scope içerebilen bir fonksiyonun açılışı ile kapanışı arasındaki alandır.var ile oluşturulan değişkenler function scope a bağlıdır.Block scope local scope içerisindeki farklı yapılar içindeki değişken tanımlamalarını kapsar ve aslında bu değişkenler sadece yapı içerisinde var olur dışarıdan erişilemezler. let ve const ile oluşturulan değişkenler bu scope a bağlıdır.

var-let-const ve Farkları

var vs let

İlk olarak, var ve let’i karşılaştıralım. var ve let arasında ki fark, var function scope özelliği taşırken, let block scope özelliği taşımaktadır. Yani let ile oluşturulan bir değişken sadece oluşturulduğu yerdeki süslü parantezler içerisinde erişilebilirdir ve dışarısında kullanılamaz.

Tekrar hatırlayacak olursak, var keyword’ü ile oluşturulan değişkenler function scope özelliklidir. Yani fonksiyon içerisinde oluşturulan değişkenler o fonksiyon içerisinde herhangi bir yerden erişilebilir. Peki var yerine let yazarsak ne olur?

ReferenceError: Bunu almamızın sebebi let keyword’ü block scope özellikli olmasıdır. let keyword’ü ile oluşturulan bir değişkeni, oluşturulduğu süslü parantezler dışarısında çağırmaya çalışırsak hata alırız.

var keyword’ü ile değişkenler tekrar tanımlanabilir ve değerleri güncellenebilir.

let ile tanımlanan bir değişkeni tekrar tanımlayamayız ancak değerini güncelleyebiliriz.

let vs const

const ile oluşturulan bir değişkene daha sonrasında tekrar değer ataması yapılamaz.

let ile oluşturduğumuz bir değişkene daha sonrasında yeni bir değer atayabiliriz ancak const ile oluşturulan değişkene yeni bir değer tekrar atanamaz. Bu durum immutable(Değişmez) olarakta tanımlanmaktadır. Bir nesne içerisinde ki bir özelliği değiştirmek veya özellik eklemek, tekrar atama yapmak değildir. Immutable durumu, oluşturulan nesnenin kendisine yeni bir değer ataması yapılamama durumuna denir.

ÖZETLE NELERİ BİLMELİYİZ? :

1-var function scope özelliği taşımaktadır. let ve const block scope özelliklidir.

2-Oluşturulan değişken önce kullanılıp daha sonra var keyword’ü ile tanımlanırsa herhangi bir hata oluşmaz(Hoisting). let ve const için bu durum geçerli değildir.

3-let ve const ile oluşturduğunuz değişkenlere değer atadığımızda, const ile oluşturduğunuz değişken’e tekrar atama yapamayız, ancak let değişkenine yeni bir değer ataması yapabilirsiniz.

4- Bir block scope içerisinde var keyword’ü ile tanımlanan bir değişkenin scope dışına sızma durumu bulunmaktadır bu da istenmeyen durumlara yol açabilir.

5-Let ve const block scope özellikli oldukları için herhangi bir şekilde scope dışında kullanılamazlar.

6- Global olarak tanımlanan bir değişkeni, fonksiyon içerisinde tekrar tanımlayıp yeni bir değer atamak, globalde bulunan değişkenin değerinin de değişmesine sebep olabilir.

7-let ve const block scope özellikte oldukları için, greeting, yer aldığı scope’a göre farklı değer gösterir.

let message;

message = ‘Hello’;

Önce tanım yapıp sonra atama yapabiliriz.

let user = ‘John’;

let age = 25;

let message = ‘Hello’;

Değişkenler tek tek tanımlanabilir. Bu okuması kolay bir kullanımdır fakat

let user = ‘John’,

age = 25,

message = ‘Hello’;

Multiple style tanımlama da doğrudur.

const myBirthday = ‘18.04.1982’;

Sabit bir değişken bildirmek için let yerine const kullanılır

const myBirthday = ‘18.04.1982’;

myBirthday = ‘01.01.2001’; // Hata!

const kullanılarak bildirilen değişkenlere “sabitler” denir. Yeniden atanamazlar. Bunu yapmaya çalışmak bir hataya neden olur

Veri ve Yapı Türleri

typeof operatörü tarafından kontrol edilen 6 primitive veri tipi bulunur :

undefined : typeof instance === “undefined”
Boolean : typeof instance === “boolean”
Number : typeof instance === “number”
String : typeof instance === “string”
BigInt : typeof instance === “bigint”
Symbol : typeof instance === “symbol”

2 temel yapısal tip bulunur :

Object : typeof instance === “object”.

Function :typeof instance === “function”.

Object : veri yapıları olarak da kullanılan herhangi bir yapılandırılmış nesne örneği için özel veri olmayan ancak yapısal tür: new Object, new Array, new Map, new Set, new WeakMap, new WeakSet, new Date and ve new keywordü kullanılarak belirtilmiş hemen hemen herşey.

Function : non-data structure , ancak typeof operatörüne de cevap verir.Her Function yapıcısı Object yapıcısından türetilmiş olsa da, bu yalnızca Functions için özel bir kısayoldur.

Structural Root Primitive Tipi

null : typeof instance === “object”.

Primitive Values

Nesneler dışındaki tüm türler değişmez değerler (primitive values) olarak adlandırılır.

boolean
Boolean mantıksal bir varlığı temsil eder ve iki değere sahip olabilir: true ve false.

null
Null türünün tam olarak bir değeri vardır: null.

undefined
Değer atanmamış bir değişken tanımsız değerine sahiptir.

Number
ECMAScript’in iki yerleşik sayısal türü vardır: Number ve BigInt

Değişken türlerini öğrenmek için typeof fonksiyon çağrısı kullanılır demiştik.

<script>
alert(typeof “Yusuf”); // “string”
alert(typeof 3.14); // “number”
alert(typeof NaN); // “number”
alert(typeof false); // “boolean”
alert(typeof [1,2,3,4]); // “object”
alert(typeof {name:’Yusuf’, kilo:78}); // “object”
alert(typeof new Date()); // “object”
alert(typeof function () {}); // “function”
alert(typeof xSayisi); // “undefined”
alert(typeof null); // “object”
</script>

Typeof Array ve Date türlerinde tepki vermeyecektir.

Tip Dönüşümleri

Number değeri String değere dönüştürme örneği

<script>
var xSayisi = 1453;
alert(xSayisi.toString());
alert((123).toString());
alert((100 + 23).toString());
</script>

String değerleri Number değerlere dönüştürülmesi örneği

<script>
alert(Number(“3.14”));
alert(Number(“ “));
alert(Number(“”));
alert(Number(“99 98”));
</script>

Date türünün String e dönüştürülmesi örneği

<script>
alert(Date().toString());
</script>

Date türünün Number değere dönüştürülmesi örneği

<script>
var tarih = new Date();
alert(Number(new Date()));
alert(Number(tarih));
</script>

ayrıca getTime da kullanılabilir

<script>
var tarih = new Date();
alert(tarih.getTime());
</script>

Otomatik tip dönüşümü örnekleri

<script>
alert(5 + null); // 5
alert(“5” + null); // “5null”
alert(“5” + 2); // 52
alert(“5” — 2); // 3
alert(“5” * “2”); // 10
</script>

Boolean Değerleri Stringe dönüştürülmesi örneği

<script>
alert(String(false));
alert(String(true));
</script>

ayrıca toString metodu da kullanılabilir

<script>
alert(false.toString());
alert(true.toString());
</script>

String değeri Boolean değere dönüştürme örneği

<script>
alert(Boolean(“abc”)); //true
alert(Boolean(“”));//false
</script>

Boolean değerlerin Number değere dönüşürülmesi örneği

<script>
alert(Number(false));
alert(Number(true));
</script>

Number değeri Boolean değere dönüştürme örneği

<script>
alert(Boolean(1)); //true
alert(Boolean(0)); //false
</script>

Number() dönüşümü yerine parseInt() ve parseFloat() dönüşümleri de yerine göre kullanılabilir.

Ondalık bir sayının ondalık kısmı çok uzunsa .toFixed() metodu kullanılarak , parametre olarak da kaç basamağın gösterileceği girilerek kullanılabilir.

var x=”55.54125";

var y=parseFloat(x).toFixed(2);

Zincirleme kullanımlarda keyfe göre mümkündür.

let z= parseInt(parseFloat(x).toFixed(2));

let t=Number(parseFloat(x).toFixed(2));

Ondalıklı kısımdan tamamen kurtulmanın bir yoluda Math.trunc() fonksiyon kullanımıdır.Kesirli kısımları silip tam sayıya çeviren Math fonksiyonudur.

let k=Math.trunc(-15.541254); //Çıktı: -15

String tanımlarında (“ ” ) çift tırnak veya (‘ ‘) tek tırnak kullanılabilir.String olarak tanımlanmış olan değer üzerinde işlem yapılamaz.(+) operatörü iki stringi yan yana birleştirilmiş olur.

Herhangi bir veri türünü Stringe çevirmek için String() veya .toString() kullanılır.

İki string ile işlem yapılmaya çalışılırsa Javascript arka planda Number() fonksiyonunu çalıştırır.

console.log(“9”* “5”); //Çıktı: 45

Eğer bu durumda number dönüşümü yapılamazsa , NaN döndürür.

NaN: Not a number demektir.

let number=Number(”a”);

console.log(number); //NaN

Diziler

Array yaratma

let fruits = [‘Apple’, ‘Banana’]

console.log(fruits.length)
// 2

Herhangi bir array elemanına erişim

let first = fruits[0]
// Apple

let last = fruits[fruits.length — 1]
// Banana

Array içerisinde dolaşma

fruits.forEach(function(item, index, array) {
console.log(item, index)
})
// Apple 0
// Banana 1

Array sonuna eleman ekleme örneği

let newLength = fruits.push(‘Orange’)
// [“Apple”, “Banana”, “Orange”]

Arrayde son elemanı silme örneği

let last = fruits.pop()
// [“Apple”, “Banana”]

Arrayin ilk elemanını silme örneği

let first = fruits.shift()
// [“Banana”]

Arrayin başına eleman ekleme örneği

let newLength = fruits.unshift(‘Strawberry’)
// [“Strawberry”, “Banana”]

Belirli bir elemanın idisini öğrenme örneği

fruits.push(‘Mango’)
// [“Strawberry”, “Banana”, “Mango”]

let pos = fruits.indexOf(‘Banana’)
// 1

Belirli bir pozisyonda eleman silme örneği

let removedItem = fruits.splice(pos, 1)

// [“Strawberry”, “Mango”]

Belirli bir pozisyondan başlayarak elemanları silme örneği

let vegetables = [‘Cabbage’, ‘Turnip’, ‘Radish’, ‘Carrot’]
console.log(vegetables)
// [“Cabbage”, “Turnip”, “Radish”, “Carrot”]

let pos = 1
let n = 2

let removedItems = vegetables.splice(pos, n)
// n kaldırılacak öğelerin sayısını tanımlar
// pos ile belirtilen dizin konumundan başlayıp dizinin sonuna doğru ilerliyor.

console.log(vegetables)
// [“Cabbage”, “Carrot”] değiştirilmiş array

console.log(removedItems)
// [“Turnip”, “Radish”]

Array kopyalama örneği

let shallowCopy = fruits.slice()
// [“Strawberry”, “Mango”]

Array elemanlarına erişme örneği

let arr = [‘this is the first element’, ‘this is the second element’, ‘this is the last element’]
console.log(arr[0]) // logs ‘this is the first element’
console.log(arr[1]) // logs ‘this is the second element’
console.log(arr[arr.length — 1]) // logs ‘this is the last element’

Karar Yapıları

if

if kullanımının herhangi bir dilden farkı yok

if(koşul){

}

if(koşul){

}else{

}

if(koşul 1){

}else-if (koşul 2){

}else{

}

Üçlü Kontrol Operatörü(Ternary)

Değişkenlere koşullu olarak operatör atamak amacıyla kullanılır.

var a = koşul ? deger1 : deger2

Basit bir örnek :

var login=true;

var userPass= login ? “Giriş Baaşarılı” : “Giriş Başarısız”;

Başka bir basit örnek:

var login = true;

var userPass = login==true ? “Giriş Başarılı” : “Giriş Başarısız” ;

Daha karmaşık gibi görünen bir örnek :

const answer=x > 0 ? “Sayı Pozitif” : x<0 ? “Sayı Negatif” : “Sayı 0 “;

Normalde if / else-if /else yapısı kullanarak uzun şekilde yapacağımız bir ifadeyi tek satırda hallettik.

Switch-Case

switch(value){

case 1;

break;
case 2;

break;

case n;

break;

default;

}

Döngü Yapıları

while

while(koşul){

}

do-while

do{

}while(koşul);

for

for(başlangıç; koşul; yineleme){

}

for…of

for (variable of iterable) {

}

for .. in

for (variable in object) {

}

for await…of

for await (variable of iterable) {

}

Fonksiyonlar

Pure Functions

Fonksiyon bir state tutmuyorsa dışarıdan aldığı değerleri işleyip geriye sonuç dönüyorsa bu tip fonksiyonlara Pure Functions deriz. Burda bir önemli hususta kendisine değer olarak geçirilen parametreleride değiştirmemesidir. Yani dışarıya oldukça izole bir şekilde hizmet vermesi gerekir. Kısaca fonksiyon değişkenlerinde bir değişiklik yapmıyor ve sadece bunları kullanarak bir sonuç üretip bu sonucu döndürüyorsa bu tip fonksiyonlar Pure Functions diyoruz.

Parametre almayan fonksiyonlar

function name(){

//Kodlar

}

Parametre alan fonksiyonlar

function name(parametre1,parametre2,…){

//Kodlar

}

Değer döndüren fonksiyonlar

function name(parametre1,parametre2,…){

//Kodlar

return deger;

}

Constructor Functions

Fonksiyon ile bir nesne oluşturuyorsak bu tip fonksiyonlara Constructor Functions diyoruz.

// constructor function
function Person () {
this.name = ‘John’,
this.age = 23
}

// create an object
const person = new Person();

Multiple Obje oluşturma

// constructor function
function Person () {
this.name = ‘John’,
this.age = 23,

this.greet = function () {
console.log(‘hello’);
}
}

// create objects
const person1 = new Person();
const person2 = new Person();

// access properties
console.log(person1.name); // John
console.log(person2.name); // John

IIFE (Immediately invoked function expression)

Eğer bir fonksiyon hemen çağrılıp oluşturulan sonuç/sonuç objesi bir değişkende saklanıyorsa bu tip fonksiyonlara IIFE (Immediately invoked function expression) deniyor. Bu tip fonksiyonların amacı genelde bu scope içerisinde oluşan değişkenlerin sadece o kapsam(scope) erişilebilir olmasını sağlıyor. Genelde JQuery, Prototype gibi kütüphanelerde değişken isimlerinin çakışmaması ve scope içerisinde işlemlerin yapılabilmesi için IIFE yöntemi kullanılmıştır. Detayı için : TIK TIK!

High Order Functions

Argümanlarında 1 yada 1 den fazla function referansını parametre olarak alan veya return değerini geriye fonksiyon olarak dönen fonksiyonlara High Order Functions denir. Çok yakından tanıdığımız Array sıkça kullandığımız aşağıdaki fonksiyonların hep bu türde fonksiyonlardır.

[].forEach (e=> …) //iterate every elements
[].find(e=>…) //return an element according to condition
[].findIndex(e=>…) //return an element index according condition
[].filter(e=>…) return items according to condition
[].sort(e=>…) sorts according to given condition
[].map(e=>…) transform existing array to other array
[].reduce(e=>…) combines elements and return an element
[].some(e=>…) check some elements
[].every(e=>…)

Synchronous Functions

Asynchronous Functions

Generator Functions

Arrow Functions

Gibi türlerde bulunmaktadır. Bu konulara başka yazılarda değinmek isterim.

Şimdilik bu kısım bu kadardır. Bir sonraki kısımda Javascript içerisinde OOP meselesi ve Obje kavramına kısaca bir bakış sunacağım. Hoşçakalın.

Şeniz fullmoonborn of the House Akbulut, first of her name.The Princess of Her Father, Diva Queen of her mother , breaker of hearth , mother of Fadıls.

Şeniz fullmoonborn of the House Akbulut, first of her name.The Princess of Her Father, Diva Queen of her mother , breaker of hearth , mother of Fadıls.