`Kodluyoruz Earlybird Front-End Talent Bootcamp`

`GÜN 1 - 2020.12.19`

Tanışma ve derslerin başlangıçı

Bu bölümde;

NodeJS nedir?
Versiyon kontrol sistemi Nedir?
Git Nedir
GIT != GITHUB
JS Temelleri

konularından bahsedeceğiz.

NodeJS Nedir?

NodeJS, server-side, runtime environment uygulamalar geliştirebileceğimiz, Javascript ile kod geliştirilmesine imkan sağlayan “Google Chrome’un v8 Javascript Engine” üzerinde çalışan bir platformdur. 2009 yılında Ryan Dahl üzerinde çalışması ile hayat bulmuştur.

github.com/nodejs/node

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

V8 Google tarafından geliştirilen, Chrome web browserlarının da üzerinde çalıştığı C, C++ ve javascript dilleri ile kodlanan bir enginedir. Tek amacı Javascript kodunu makine koduna çevirmektir.

Tek bir thread ile bloklanmadan çalışabilme imkanı sunması, onun getirdiği en büyük avantajlardan bir tanesidir. Çünkü thread sayısı arttıkça thread'lerin kontrolü de bir o kadar zorlaşır.

Asenkron Mimari: JavaScript’in olay güdümlü (event-driven), asenkron yapısı ise bunu oldukça kolaylaştırıyor. Veri tabanı, başka bir web servise erişim vb. konularda, buralardan cevap gelene kadar beklemek yerine yeni istekleri hazırlayabilirsiniz.

Görselin kaynağı Adrian Mejia

Npm package manager sayesinde, node ve npm yükledikten sonra verimli, stabil web servisi geliştirme ortamını bizlere sunmaktadır. Ne yapmak isterseniz isteyin, istediğiniz şey büyük ihtimalle modül olarak bulunmaktadır. Npm üzerinden yapacağınız arama ile istediğiniz paketi bulabilir ve kolaylıkla kullanmaya başlayabilirsiniz.[0]

NodeJS için yakın tarihi geçmişi.

NodeJS hakkında daha çok detaya ulaşmak için;

nodejs.dev/learn
developer.ibm.com/node-js

Babel Nedir?

Babel, tarayıcıların anlayamadığı yeni gelen js özelliklerini eskisine çevirerek -tabi bize belli etmeden- tarayıcının bu kodları anlamasını sağlayan dönüştüren dönüştürücü. Babel gibi bir başkası daha mevcut o da sucres.

Versiyon Kontrol Sistemi Nedir?

Versiyon kontol sistemleri herhangi bir proje üzerine çalışırken size yaptığınız değişiklikler ve yenilikler arasında boğulmadan temiz bir şekilde çalışabilme imkanı sunar.

Versiyon kontol sistemleri ile çalışmayı öğrendikten sonra bir proje üzerinde zamanda geri gidebilir, projenizin falanca zamanki halini o günkü hali ile inceleyebilir ya da projenizin o anki halini bozmadan üzerine yeni denemeler yapabilir ve bu denemeniz istediğiniz gibi olursa ana projenize bu özelliği ekleyebilirsiniz.

Bu söylediklerimi, en başta gördüğümüz insan beyninin direk oluşturduğu versiyon kontrol sistemi ile yapmaya kalkmak bir yerde mantıklı olsa da bu yöntemle devam etmek bir yerden sonra sizi sinir krizlerine sokabilir hatta ve hatta projenizi geliştireceğim derken çalışır halinden de olmanıza sebep olabilir.[1]

Git Nedir?

Git özgür ve dağıtık bir version kontrol sistemidir. GIT, linux’ü geliştiren ekibin o zamanlar kullandıkları BitKeeper adlı proje yönetim aracının ücretsiz lisans anlaşmasının bitmesi ile Linus Toravalds ve ekibinin BitKeeper’ı kullanırken yaşadıkları sıkıntıları da göz ederek tasarladıkları 2005 yılında ortaya çıkan bir versiyon kontrol sistemidir.

Git ismi, Linus Torvalds tarfından Git’in ilk versiyonunun yayımlanması ile verilmiştir. Aslında Git kelimesi İngiliz ingilizcesinde “aptal” anlamına gelen argo bir kelime. [2]

dictionary of cambridge git meaning

Ayrıca Linus Torvalds “GIT” isminin açılımını şu şekilde ifade ediyor;

Düzgün çalışıp iş gördüğünde ve sizi mutlu ettiğinde Global Information Tracker (Küresel bilgi takip sistemi)
İstediğiniz gibi çalışmazsa ve sizi çıldırtırsa da “Goddamn Idiotic Truckload of shit”

Git nasıl Kullanılır?

Bu konuyu geçtiğimiz sene topluluk için yaptığım bir sunumda kaynak olsun diye yazıya geçirmiştim. Sizi direkt oraya yönlendiriyorum... hasantezcan.dev/versiyon-kontrol-sistemi-git

GIT != GITHUB

Ayrıca github nasıl kullanılır kısmında ise github'ın hazırlamış olduğu bu dokümana göz atabilirsiniz.

JS Temelleri

Bu başlık altında en yaygın ve temel JS kavramlarını kısa kısa üzerinden geçerek bilgi edineceğiz.

Hello world

Aldığım ilk algoritma dersinde "hello world!" için yazılımcının Bismillah'ı demişti Mustafa Tosun hocam. Buradan ona selamlar olsun. Hadi başlayalım.

console.log('Hello Node!');

Truthy and Falsy

Truthy and Falsy: When All is Not Equal in JavaScript

The Boolean value is named after English mathematician George Boole, who pioneered the field of mathematical logic. - [MDN]

/* JavaScript if statement */
if (boolean conditional) {
   // code to execute if the conditional is true
}

Bu ifadeler conditions (koşullarda if'lerde) doğru ya da yanlış olarak kabul edilen değerler.

Bu değerler herzaman falsy (yanlış) olarak döner:

if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")

Yukardakiler dışında her şey truthy (doğru) olarak döner.
Doğru olarak dönenler:

if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

What is the diff between arguments and parameters

Argüman ve parametre arasındaki fark?

Fonksiyonu tanımlarken içine istediklerimiz parametreleri oluyor.
Fonksiyonu kullanırken (çağırdığımızda) içine verdiğimiz değerler ise argümanları oluyor.

//function declaration
function LessArgument(param1, param2, param3, param4){
     console.log(param1, param2 ,param3 , param4);
}

//function call
LessArgument("arg1" , "arg2" ,"arg3");

// result 
arg1 arg2 arg3 undefined

Bir fonksiyon için gereken parameteleri yanlızca bir defa tanımlarız. Fakat o fonksiyonu kullanırken içine her seferinde farklı argümanlar göndeririz.

`Rest` Parameters

Fonksiyona gereken parametreleri bu şekilde değişkenlik gösterecek şekilde tanımlayabiliriz.

let arr = [1, 2, 3];
let arrTwo = [...arr , 4, 5, 6]; //arrTwo = [1, 2, 3, 4, 5, 6]

//function declaration
function FindLength(...params){
      console.log(arguments)
      return (params.length);
}

//function call
FindLength(...arr); //3
FindLength(...arrTwo); //6
FindLength(arr); //1

Gönderilen argümanları log ettiğimiz için görebilirsin. Her fonksiyon tanımı için farklı değerler göndermişiz.

Var, let, const

Es6 ile birlikte değişkenlerimize hayat veren iki yeni tanımlayıcı ile tanıştık. let ve const

"Ne gerek vardı kardeşim bunlara" derseniz; en amiyane tabirle bazı scope karışıklıkları ve tekrar tanımlanabilme ya da tanımlanmama gibi durumlara çare olması amacı ile eklendi diyebiliriz.

Variable Declaration vs Initialization

Yeniden Tanımlama ve Güncellenebilirlik

`var`

ES6 öncesi kullanılan tek tanımlama ifadesidir.

Arkadaşlar bu arada geçtiğimiz haziranda -2020 Haziran- ES11 duyuruldu. Bunu kısa bir bilgi olarak geçmek istedim.

Var ile tanımladığımız değişkenleri tekrar tanımlayabiliriz.

var name = 'hasan';
console.log(name);

var name = 'alper';
console.log(name); 

// ekran çıktısı: 
hasan
alper

Şimdi de let ve const için bu bu değişken tanımlama durumlarına gözatalım.

`let`

let ile değişken tanımlarken değişkene birden fazla defa değer atayabiliyoruz fakat birden fazla defa tanımlayamıyoruz.

let surname = "Tezcan";
console.log(surname);

let surname = "Çün";
console.log(surname);

//ERROR - Uncaught SyntaxError: Identifier 'surname' has already been declared

ama yeniden tanımlama yapmadan değer değişikliği yapabiliriz.

let surname = "Tezcan";
console.log(surname);

surname = "Çün";
console.log(surname);

// ekran çıktısı: 
Tezcan
Çün

`const`

constant

Const kavramı değişmez değişkenler olarak tanımlanabilir. Bu değişkenler tekrardan atanamazlar ve veri tipi değiştirilemez.

Dipnot olarak, const tipinde değişkenler hala enumerable özelliğini taşımaktadır. Enumerable kavramı içeriğinin değiştirilebileceğini bize gösterir.

const renk = "kırmızı"
renk = "mavi"

// "Uncaught TypeError: Assignment to constant variable."

Böyle bir kullanımda JS bize değişmez değişken hatası verecektir.

Fakat bir obje yapısının veya dizi yapısının içeriğini güncelleyebilirsiniz, yeni bir içerik ekleyebilirsiniz, çıkartabilirsiniz.

const pokemons = ['bulbasaur', 'charmander', 'squirtle'];
pokemons.push('pikachu');

console.log(pokemons);

// [ 'bulbasaur', 'charmander', 'squirtle', 'pikachu' ]

gördüğünüzü gibi pikachu'yu const ile tanımlanmış pokemons dizisine ekleyebildik.

const pokemons = ['bulbasaur', 'charmander', 'squirtle'];
pokemons = ['tavuk'];

console.log(pokemons);

// TypeError: Assignment to constant variable.

Tekrar tanımlamaya kalktığımızda biraz önce de olduğu gibi JS bize değişmez değişken hatası verecektir.

Scope

Kapsam Alanı

`var`

Global Scope: var ile fonksiyon dışında tanımlanan değişkenler global scope olarak isimlendirilir.

Global scope'lara bu dosya içindeki her yerden erişilebilir.

var test='Merhaba Dünya!'; //global scope

var fonksiyon = () => {
    console.log(test); 
}

fonksiyon();

// Çıktı: Merhaba Dünya

Local Scope: Var ile bir değişkeni fonksiyon içerisinde tanımladığımız zaman da bunu local scope deriz.

Local scope'da tanımlı değişkenler fonksiyon dışından erişilemezler.

That from outer to inner works! but the other direction does not work!

Fonskiyon içinde tanımlanmış değişkenleri fonksiyon dışında çağıramayız. Fakat global scope'ları local scope'ların içinden çağırabiliriz.

var fonksiyon=() => {
    var test='Merhaba Dünya!'; //local scope
}

fonksiyon();

console.log(test)

// Çıktı: Uncaught ReferenceError: aos is not defined

Block scope oluşturmak için let ve const tanımlayıcılarını kullanmamız gerekiyor. Aksi taktirde kendi block scope'larını yaratamayız.

let ve const için block scope geçerlidir. Süslü parantezler içinde tanımlandıklarında kendi block'ları içinde değerlendirilirler.

`let`

Farklı block'lar içinde yeniden tanımalanabilirken aynı block'lar içinde tekrar tanımlanamazlar.

if(true) {
  let test="SCOPE A";
  console.log(test);
}

if(true) {
  let test="SCOPE B";
  console.log(test);
}

/*
    SCOPE A
    SCOPE B

    Farklı block'lar içerisinde tekrar tanımlanmışlar. 
    DECLARATION
*/

Aynı blok içerisinde tekrar tanımlanamaz, yalnızca güncellenebilir;

if(true) {
  let test="SCOPE A";
  test="reAssigment";
  console.log(test);
}
/*
    reAssigment
    aynı block scope içinde let tanımladığımız test değişkenine tekrar değer atadık.
*/

`const`

block scope içersinde bir kez tanımlanır hakkını doldurur.

if (true) {
  // var myAge = 22 // global scope
  let myAge = 22 // block scope

  console.log(myAge)
}

{ // this is a block
  const myName = 'Hasan' // block scope
  console.log(myName)
}

// console.log(myAge)
// console.log(myName)

/*
    22
    Hasan
*/

Çıktısını verir ama sondaki log'ları yorum satırından kaldırırsak bize bu hatayı döner
"ReferenceError: myAge is not defined"
Bunun sebebi scopların dışardan içeriye erişilebilirken içeriden dışarıya erişilemez olmasıdır.

`let ve const` global scope'muş gibi de davranabilir. Nasıl mı?

Yeni açtığınız bir js dosyasını düşünün. Bu sayfanın başında ve sonunda birer süslü parantez vardır. Sayfanın let ve const için bir block scope'u dur. Sayfanın en üstünde olduğundan bunu global scope gibi de kabul edebiliriz.

const myName = 'Hasan' // block scope, similar to global scope

if(true){
    var myAge=22 // global scope
}

{ // this is a block
    const myName = 'Abbas' //block scope
    console.log(myName)
}

console.log(myAge)
console.log(myName)
}

/*
    Abbas
    22
    Hasan
*/

Block scope'lar ile çalışmak bizi kısıtladığından dolayı bu bizi daha temiz kod yazma yönünde yönlendirecektir.

Scope Kavramı

Scope şeması

Template Literals

Template Literal ES6 ile birlikte duyurulan string üretmek için yeni bir yöntemdir. Bununla birlikte, programlarımızdaki dinamik dizeler üzerinde daha fazla kontrol sahibi olmamıza olanak sağlar.

backtick'lerin arasına bu şekilde yapılarla değişken çağırabiliyoruz.${expression}

let price = 19.99;
let tax = 1.13;

let total = `The total prices is ${price * tax}`;

eskiden olsa, bunu şu şekilde yazardık:

let price = 19.99;
let tax = 1.13;

let total = "The total prices is " + price * tax;

daha fazla bilgi için

Fonksiyonlar

JavaScript'teki neredeyse her şey fonksiyonlarda gerçekleşir. Şimdi hızlı bir şekilde fonksiyonları nasıl tanımladığımıza bakalım.

Function Declaration

ES6 öncesi fonksiyonları bu şekilde tanımlardık. Şimdilerde bu tanımlamaya normal fonksiyon tanımlaması diyoruz.

function dosomething(foo) {
  // do something
}

Function Expression

Fonksiyonlar değişkenler ile tanımlanabilirler. Bu tür fonksiyonlara "function expression" deriz.

const dosomething = function(foo) {
  // do something
}

Arrow Function

Arrow function, fonksiyon yazarken daha kısa bir söz dizimi kullanmamızı sağlar. Bize sadece gösterim olarak fayda sağlar, bunun yanında performans olarak herhangi bir artısı yoktur. devamı için

const dosomething = foo => {
  //do something
}

arrow function'da parametreler

const dosomething = () => {
  //do something
}

const dosomethingElse = foo => {
  //do something
}

const dosomethingElseAgain = (foo, bar) => {
  //do something
}

ES6 ile birlikte fonksiyonlara bu şekilde varsayılan parametre verebilirsiniz.

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

...
...
...
henüz tamamlanmadı...
...
...
...

Spread Operator

Spread türkçe karşılık olarak; yaymak, yayılmış demek. Bu operatörde tam anlamıyla bunu yapıyor aslında.

Spread operatörü ile iterable nesneleri tek tek öğelerine bölebiliyoruz. İterable nesneden kastım ise; Array, Map, Set, DOM, NodeList vb.

Array Kopyalama örneği

let fruits = ['elma', 'armut'];
let fruits_copy = [...fruits];

console.log(fruits_copy); // Çıktı -> ["elma", "armut"]

fruits.push('çilek');

console.log(fruits_copy); // Çıktı -> ["elma", "armut"]

Obje Kopyalama

Yukarıdaki işlemin aynısını objeler içinde yapabiliriz. Örneğin;

const user = {
    name: "Hasan",
    surname: "Tezcan"
}

const userCopy = {...user}

console.log(userCopy)
user.age = 22;
console.log(userCopy)

Dizileri Birleştirmek

İki veya daha fazla diziyi birleştirmek, dizinin başına ya da sonuna yeni değer ekleyerek bir dizi oluşturmak için de bu operatör kullanılır. Örneğin;

const maleNames = ["Alper", "Hasan"]
const femaleNames = ["Çiğdem", "Rümeysa"]

const names = [...maleNames, ...femaleNames]

console.log(names) // Çıktı -> ["Alper", "Hasan", "Çiğdem", "Rümeysa"]
console.log(['başında', ...names, 'sonunda'])

Object Destructuring

const user = {
    id: 42,
    is_verified: true
};

const {id, is_verified} = user;

console.log(id); // 42
console.log(is_verified); // true

...
...
...
henüz tamamlanmadı...
...
...
...

Callbacks

JavaScript varsayılan olarak synchronous çalışan tek çekirdekli bir dildir. Bu da yeni bir thread oluşturup paralelde işlem yapamayacağı anlamına gelir. Peki Asynchronous kod nedir ve nasıl çalışır?

Asynchronous işlem yapmak çok dakik olmak, gerek tek başınıza bir yığın işin üstesinden her birine doğru zamanı ayırıp parça parça halletmek demek.

Callback'ler bir değeri bir fonksiyondan başka bir fonksiyona geçirmek için kullanılan basit fonksiyonlardır ve sadece event gerçekleştiğinde çalışırlar.

Bunu yapabiliriz çünkü JavaScript, değişkenlere atanabilen ve diğer işlevlere aktarılabilen birinci sınıf işlevlere sahiptir (higher-order functions denir)

function uyan(callback) {
	console.log('Uyan');

	setTimeout(() => {
		callback();
	}, 2000);
}

function yuzunuYika() {
	console.log('Yüzünü yıka');
}

uyan(yuzunuYika);

CallStack setTimteout, setInterval gibi fonksiyonların içinde sonrasında sırası ile çalışması için atıldığı queue.

Callback'lerdeki sorun;

Callback'ler basit durumlar için harikadır.

Ancak her callback, koda bir iç içelik düzeyi ekler ve çok sayıda callback oluşmaya başladığında, kod çok hızlı bir şekilde karmaşıklaşmaya başlar:

window.addEventListener('load', () => {
  document.getElementById('button').addEventListener('click', () => {
    setTimeout(() => {
      items.forEach(item => {
        //your code here
      })
    }, 2000)
  })
})

Burada sadece 4 seviyeli bir iç içelik söz konusu, şimdiden cok karışık görünmüyor mu?

Biraz daha karmaşıklaştıktan sonra işin gideceği yer burası..

Callback Hell (cehennemi)

Peki bu cendereden nasıl kurtulabiliriz?

Callback'e alternatifler

ES6 ile birlikte JS bize callback'lere ihtiyaç duyulmadan asynchronous çalışan özellikler tanıttı.

Bunlar;

Promises (ES2015)
Async/Await (ES2017)

Fetch

Bir fetch denemesi yapalım. Axios'u kullanacağız. Bunu seçmemizin özel bir nedeni yok aşinalık gibi isimlendirebiliriz.

Fetch ile axios'un en bilinen belirgin farkları fetch'in JSON'u parse etmesi gerekmesi, axios ise bunu otomatik şekilde halletmektedir.

// fetch
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

fetch'de json parse etmemiz gerekiyor..

//axios
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Örnek bir axios kullanımı..

const axios = require("axios");
    axios
        .get("https://jsonplaceholder.typicode.com/users")
        .then((response) => response.data)
        .then((users) => [...users, { name: "Kenan" }])
        .then((data) => console.log(data))
        .catch((e) => console.log(e))
        .finally(() => console.log("Finally"));

İlk günden bi kare

..
..
..

Kaynaklar :

https://nodejs.dev/learn
https://webmaster.kitchen/node-js-nedir-ve-avantajlari-nelerdir/
https://hasantezcan.dev/blog/versiyon-kontrol-sistemi-git.html
https://cagatay.me/ecmascript6-nedir-nas%C4%B1l-kullan%C4%B1l%C4%B1r-neden-kullanmal%C4%B1y%C4%B1z-3-a1d092b7d261
https://ui.dev/var-let-const/
https://ahmetonursolmaz.com.tr/javascript-var-let-ve-const-farki/
https://css-tricks.com/template-literals/
https://flaviocopes.com/javascript-functions/
https://prototurk.com/makaleler/javascript-es6-spread-operatoru#array-kopyalama
https://flaviocopes.com/javascript-object-destructuring/
https://flaviocopes.com/javascript-callbacks/#callbacks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

day1.md

day1.md

`Kodluyoruz Earlybird Front-End Talent Bootcamp`

`GÜN 1 - 2020.12.19`

NodeJS Nedir?

Babel Nedir?

Versiyon Kontrol Sistemi Nedir?

Git Nedir?

Git nasıl Kullanılır?

JS Temelleri

Hello world

Truthy and Falsy

What is the diff between arguments and parameters

`Rest` Parameters

Var, let, const

Variable Declaration vs Initialization

`var`

`let`

`const`

Scope

`var`

`let`

`const`

`let ve const` global scope'muş gibi de davranabilir. Nasıl mı?

Template Literals

Fonksiyonlar

Function Declaration

Function Expression

Arrow Function

Spread Operator

Object Destructuring

Callbacks

Callback'lerdeki sorun;

Callback'e alternatifler

Fetch

Kaynaklar :

Files

day1.md

Latest commit

History

day1.md

File metadata and controls

Kodluyoruz Earlybird Front-End Talent Bootcamp

GÜN 1 - 2020.12.19

NodeJS Nedir?

Babel Nedir?

Versiyon Kontrol Sistemi Nedir?

Git Nedir?

Git nasıl Kullanılır?

JS Temelleri

Hello world

Truthy and Falsy

What is the diff between arguments and parameters

Rest Parameters

Var, let, const

Variable Declaration vs Initialization

var

let

const

Scope

var

let

const

let ve const global scope'muş gibi de davranabilir. Nasıl mı?

Template Literals

Fonksiyonlar

Function Declaration

Function Expression

Arrow Function

Spread Operator

Object Destructuring

Callbacks

Callback'lerdeki sorun;

Callback'e alternatifler

Fetch

Kaynaklar :

`Kodluyoruz Earlybird Front-End Talent Bootcamp`

`GÜN 1 - 2020.12.19`

`Rest` Parameters

`var`

`let`

`const`

`var`

`let`

`const`

`let ve const` global scope'muş gibi de davranabilir. Nasıl mı?