# GitHub Actions ile otomatik NPM modülü paylaşma

[NPM](https://www.npmjs.com) bildiğiniz üzere [NodeJS](https://nodejs.org) kullanıcılarının yaptığı paketleri paylaştığı bir sistem. Burada sizler de kendi paketlerinizi paylaşabiliyorsunuz. Bu yazıyı okuyorsanız zaten NPM ve NodeJS hakkında bilginiz vardır ve muhtemelen çoktan bir NPM paketi paylaşmışsınızdır bile. Ancak eğer bir paketiniz yoksa ve aklınızda da bir paket yapma fikri varsa ve nasıl başlayacağınızı bilmiyorsanız [tam da burada](https://www.youtube.com/watch?v=5aRALaIPWLI) paylaşmış olduğum videodan nasıl yapacağınızı öğrenebilirsiniz.

Bildiğiniz üzere GitHub'da Actions dediğimiz bir özellik var. Burada repomuzdaki değişiklikleri takip edip bu değişiklikler sonucunda GitHub'un kendi sanal bilgisayarları üzerinden işlem yaptırabiliyoruz. Kısacası kodunuzu reponuza atıyorsunuz ve GitHub bu değişiklik sonucunda kendi sistemlerinde sizin önceden belirlediğiniz birkaç komutu çalıştırıp ona göre çıktılar oluşturuyor. Biz de bu sistemden faydalanarak NPM paketimizi otomatik olarak güncellemeyi sağlayacağız.

# Action dosyası

Biraz hızlı geçmek adına Action dosyasını direkt burada vereceğim. İsterseniz direkt bu dosyayı kullanabilirsiniz ancak merak etmeyin, birazdan bu dosyanın ne işe yaradığından ve kurulum için gerekli adımlardan bahsedeceğim.

```yaml
name: Paketi NPM'ye yükleme

on: [push]

jobs:
    build:
        name: "Paketi buildleme ve yükleme"
        runs-on: ubuntu-latest
        if: "contains(github.event.head_commit.message, '(yükle)')"
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: "16.x" # NodeJS versiyon 16 kullandım ancak kendi uygulamanıza uygun olanı da kullanabilirsiniz.
                  registry-url: "https://registry.npmjs.org"
            - run: npm install
            - run: npm run build
            - run: npm publish
              env:
                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

# Eee, bu dosya ne şimdi?

Bu dosya geliştirmiş olduğum [react-use-lanyard](https://github.com/barbarbar338/react-use-lanyard) paketinin Action dosyası. Bu dosya sayesinde kodlarımda bir değişiklik yaptığımda ve repoma pushladığımda paketim otomatik buildleniyor ve NPM'ye yükleniyor, harika değil mi? 

Şimdi birazcık bu dosyadaki kodlardan bahsedelim.

```yaml
name: Paketi NPM'ye yükleme
```

Burası Action'umuzun adı. GitHub'da Actions kısmında bu isim ile görünecek.

```yaml
on: [push]
```

Bu kod ise Action'umuzun ne zaman aktifleşeceğini ayarlıyor. Ben Actionumun her push işleminin ardından çalışmasını istiyorum.

```yaml
jobs:
    build:
        name: "Paketi buildleme ve yükleme"
        runs-on: ubuntu-latest
        if: "contains(github.event.head_commit.message, '(yükle)')"
```

Burada da Action'umuzda yapılacak işlemi tanımladık. İşlemimiz Ubuntu üzerinde birkaç kod çalıştıracağı için `runs-on: ubuntu-latest` satırını ekledik. Ayrıca her push işleminde de Action'un çalışmasını istemiyorum. Yalnızda commit mesajımda `(yükle)` yazıyorsa çalışmasını istiyorum. Örneğin `🚨 Linter ayarları düzeltildi (yükle)` gibi bir commit mesajı yazarsam Action'umun çalışmasını istiyorum. Bunun için de `if: "contains(github.event.head_commit.message, '(yükle)')"` satırını ekledik. Burada commit mesajının içeriğini inceleyip istediğimiz meti barındırıyor mu diye baktık. Eğer barındırıyorsa işlemi gerçekleştirecek.

```yaml
steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
       with:
           node-version: "16.x"
           registry-url: "https://registry.npmjs.org"
    - run: npm install
    - run: npm run build
    - run: npm publish
      env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

Burada ise işlem adımlarını belirttik. İlk olarak sana bilgisayara NodeJS 16 kurmasını istedik. Elbette uygulamanıza uygun olan NodeJS sürümünü kurabilirsiniz. Daha sonra ise paketleri indirmesini, paketi buildlemesini ve paketi NPM'ye yüklemesini söyledik. Ancak bir sıkıntı var. NPM'ye paket yükleyebilmek için bir NPM hesabınız olmalı ve bu hesaba ait bir tokeninizin olması lazım. NPM hesabını ücretsiz bir şekilde açabilirsiniz, ben size token almayı ve bu tokeni reponuza tanıtmayı göstereceğim.

# NPM publish tokeni alma

Bu token sayesinde NPM'ye paket yükleyebilir, silebilir veya paketinizi güncelleyebilirsiniz. O yüzden bu tokeni kesinlikle gizli tutmanız lazım ve kimseyle paylaşmamanız lazım. Annenizle bile! Birisi bu tokeni eline geçirirse sizin adınıza her şeyi yapabilir, o yüzden dikkatli olun. 

Şimdi bir NPM hesabınızın olduğunu ve hesabınıza giriş yaptığınızı varsayıyorum. NPM'nin sitesine giriş yapın ve ana sayfada profil kısmından `Access Tokens` kısmına basın.

![Access Tokens](https://cdn.338.rocks/v1/storage/uploads/images/305404822394372100.png)

Daha sonra aşağıdaki gibi bir sayfayla karşılaşacaksınız (Muhtemelen sizinki boş olacaktır ancak önemli değil). Buradan  `Generate New Token` seçeneği ile bir Access Token oluşturmamız lazım.

![Generate New Token](https://cdn.338.rocks/v1/storage/uploads/images/305405453700038661.png)

Şimdi ise tokeninize hatırlacağınız bir isim verin ve aşağıdan `Publish` seçeneğini seçin. Bu sayede bu tokeni paket paylaşmada kullanabileceğiz. Daha sonra da `Generate Token` butonuna basarak tokeninizi oluşturun.

![Create Token](https://cdn.338.rocks/v1/storage/uploads/images/305405751361404934.png)

Ve gördüğünüz gibi tokenimiz oluşturuldu. Bu tokeni yalnızca 1 kere görmenize izin veriliyor, o yüzden bir yere kaydetmeyi unutmayın!

![Token](https://cdn.338.rocks/v1/storage/uploads/images/305406644198703112.png)

Şimdi bu tokeni Action'umuzda kullanabiliriz.

# Action'a token tanıtma

İlk olarak repomuzun ayarlarına gelmemiz ve buradan `Secrets` kategorisi altından `Actions` sayfasına gelmemiz lazım.

![Settings](https://cdn.338.rocks/v1/storage/uploads/images/305407330416197641.png)

Daha sonra buradan `New Repository Secret` seçeneği ile bir `Secret` oluşturmamız lazım.

![Secret](https://cdn.338.rocks/v1/storage/uploads/images/305407636550057994.png)

Şimdide secret adını `NPM_TOKEN` olarak ayarlayın ve alttaki boşluğa aldığınız tokeni yapıştırdıktan sonra `Add Secret` butonuna basarak kaydedin.

![Add Secret](https://cdn.338.rocks/v1/storage/uploads/images/305408101706760203.png)

Ve her şey hazır! artık paketimiz otomatik olarak paylaşılacak.

![Done](https://cdn.338.rocks/v1/storage/uploads/images/305408561129848844.png)

# Son adımlar

Reponuzun ana dizinine `.github/workflows/main.yaml` adlı bir dosya oluşturun ve içerisine yukarıda verdiğimiz Action kodlarını yapıştırın. Artık mesaj içeriğinde `(yükle)` olan bir commit yaptığınızda paketiniz otomatik olarak NPM'ye yüklenecektir, mükemmel!

# Son sözler

Buraya kadar okuduysanız artık yeni bir şey daha biliyorsunuz demektir. Eğer yazı hoşunuza gittiyse arkadaşlarınızla da paylaşmayı unutmayın, teşekkürler! 😼👍

Technology

Development

Türkçe

GitHub Actions ile otomatik NPM modülü paylaşma

# (React) Hook Nedir, Temel Hooklar ve Kendi Hookunuzu Yapma

Hooklar React'ın 16.8.0 sürümü ile bizlere tanıtılan birkaç fonksiyondan ibarettir. Amacı ise en kaba tabirle [class component](https://www.w3schools.com/react/react_components.asp)leri ile yapılan her şeyi [fonksiyonel component](https://www.w3schools.com/react/react_components.asp)ler ile yaptırabilmeyi sağlamak. 

Hookların amacı class componentleri tamamen ortadan kaldırmak değildir ancak günümüz dünyasında class componentler zaten pek de ilgi çeken bir yapı değil. Ancak hook olmazsa da fonksiyonel componentlerde state yönetimi gibi birçok React nimeti çok sıkıntı yaşatır. Sonuç olarak elmizde artık hook API'si bulunmakta!

Hooklar genel olarak React özelliklerini fonksiyonel komponentlerde kullanmanızı sağlayan özel fonksiyonlardır. Örneğin [useState](https://tr.reactjs.org/docs/hooks-state.html) hooku, React state'ini bir fonksiyonel componente eklemenizi sağlayan bir hooktur.

## Örnek Bir Hook Kullanımı
Burada örnek olması adına bir state hooku kullanacağız. İlk olarak eskiden yapmanız gereken componenti ve ardından bu makaleden sonra nasıl yapmanız gerektiğini örneklendiren birkaç kod bloğu göreceğiz.

Klasik class component yapısıyla yapılmış bir kod alalım elimize
```jsx
import React, { Component } from "react";

class MyComponent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0;
		}
	}
}
```

Gördüğünüz gibi componentimiz hem çok uzun hem de göz korkutucu. Basit bir state için oldukça fazla satır yazmamız gerekiyor. Şimdi bir de bu state'i güncellemeye çalışalım:
```jsx
import React, { Component } from "react";

class MyComponent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0;
		}
	}

	render() {
		return (
			<div>
				<span>{this.state.count} defa tıklandı.
				<button onClick={
					() => this.setState({ count: this.state.count + 1})
				}>
					Tıkla
				</button>
			</div>
		);
	}
}
```
Gördüğünüz gibi kod karışmaya başladı bile. Artık hook örneğine geçebiliriz.
```jsx
import React, { useState } from "react";

const MyComponent = () => {
	const [count, setCount] = useState(0);
}
```
Gördüğünüz gibi hem hızımızı arttırdık hem de düzenimizi. Ayrıca artık daha rahat bir state yönetimine sahibiz. 

Şimdi bir de bu state'i güncellemeye çalışalım:
```jsx
import React, { useState } from "react";

const MyComponent = () => {
	const [count, setCount] = useState(0);
	
	return (
		<div>
			<span>{count} defa tıklandı.
			<button onClick={
				() => setCount(count + 1)
			}>
				Tıkla
			</button>
		</div>
		);
}
```
Gördüğünüz üzere kodumuzda inanılmaz bir kısalma var ve artık daha rahat okunabilir halde. 

## Hookların Temel Kuralları
Hooklar her ne kadar JavaScript fonksiyonları olsa da bu fonksiyonları şu iki temel kurala uyarak kullanmanız gerekmektedir:

- **Hookları sadece kodunuzun en üstünde kullanın.** Herhangi bir loop içinde veya başka bir fonksiyon içinde hook kullanmayın. Sadece fonksiyonle componentinizin return kısmından önce kullanın. Böylece componentimiz tekrar tekrar renderlandığında hookunuzun aktifleştiğinden emin olursunuz.
- **Sadece fonksiyonel componentlerde hook kullanın.** Başka fonksiyonlar içinde veya class componentleri içerisinde hook kullanamazsınız.

## Temel Hooklar
### 1 - useState
useState hooku klasik class componentlerindeki state özelliğini fonksiyonel componentimize eklememizi sağlayan bir hooktur.
```jsx
import React, { useState } from "react";

const MyComponent = () => {
	// useState kullanım örneği
	const [count, setCount] = useState(0);
}
```
Componentimizde bir değişiklik olduğunda tekrar renderlanmasını istiyorsak kesinlikle kullanmamız gereken bir hooktur. Basitçe hooku anlamak istersek hooku çağırırken girdiğimiz argüman state'imizin başlangıç değeri olacaktır. Yukarıdaki örnekte `count` state'inin varsayılan değeri olarak `0` ayarladık. Yani componentimiz ilk renderlandığında `count` değeri `0` olacaktır.

Hookumuzu çağırdıktan sonra bize 2 elementten oluşan bir array verecektir. 
```jsx
const [count, setCount] = useState(0);
```
Bu arrayın ilk elementi bizim state'imizi, ikincisi ise bu state'i güncellememizi sağlayacak fonksiyonu barındırır. State'imizi güncellemek istediğimizde bu fonksiyonu çağırmamız lazım.

```jsx
const [count, setCount] = useState(0);
count // >> 0
setCount(3);
count // >> 3
```

Eğer `const`, `let` veya `var` kullanarak bir değer oluşturursak bu değerleri ne kadar güncellersek güncelleyelim componentimiz yeniden renderlanmaz ve güncel veriyi göremeyiz.
```jsx
import React, { useState } from "react";

const MyComponent = () => {
	// doğru kullanım
	const [count, setCount] = useState(0);
	
	// yanlış kullanım
	let count = 0;
}
```

### 2 - useEffect
useEffect hookunun 4 temel işlevi vardır. Bu hooku genel olarak klasik class componentlerinde bulunan `componentDidMount`, `componentDidUpdate` ve  `componentWillUnMount` metotlarının yerini tutması için kullanırız. 4. işlevi ise spesifik bir state güncellenmesini takip etmektir.

#### componentDidUpdate
Componentimiz her renderlandığında bir kod çalıştırmamızı sağlayan bir metottur.
```jsx
import React, { Component } from "react";

class MyComponent extends Component {
	componentDidUpdate() {
		console.log("Componentimiz yeniden renderlandı.");
	}
}
```
Bu özelliği fonksiyonel componentler ile şu şekilde yapıyoruz:
```jsx
import React, { useEffect } from "react";

const MyComponent = () => {
	useEffect(() => {
		console.log("Componentimiz yeniden renderlandı.");
	});
}
```
useEffect hooku gördüğünüz gibi herhangi bir veri returnlamıyor. Yani sadece componentimizin renderlanması sonucu yapmamız gereken değişimleri yönettiğimiz bir hooktur.

#### componentDidMount
Componentimiz ilk kez renderlandığında **sadece 1 kez** çalışmasını istediğimiz bir metottur. Örneğin bir websocket bağlantısı yapacaksınız veya bir interval oluşturacaksınız. Bunları component her renderlandığında tekrar tekrar yaparsanız veriler birbirine karışır. Sonuç olarak sadece 1 kere yapmak istediğimiz için bu işlemleri `componentDidMount` içinde yaparız.
```jsx
import React, { Component } from "react";

class MyComponent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			interval: undefined,
		};
	}
	
	componentDidMount() {
		const i = setInterval(() => {
			console.log("Bu mesaj her 10 saniyede bir loglanacaktır.");
		}, 1000 * 10);
		this.setState({ interval: i });
		console.log("Componentimiz ilk kez renderlandı ve bu fonksiyon bir daha çağırılmayacaktır.");
	}
}
```
Bu özelliği fonksiyonel componentler ile şu şekilde yapıyoruz:
```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
	const [interval, setIntervalState] = useState();
	
	useEffect(() => {
		const i = setInterval(() => {
			console.log("Bu mesaj her 10 saniyede bir loglanacaktır.");
		}, 1000 * 10);
		setIntervalState(i);
		console.log("Componentimiz ilk kez renderlandı ve bu fonksiyon bir daha çağırılmayacaktır.");

	// ⋁⋁⋁ buraya dikkat ediniz
	}, []);
}
```
Gördüğünüz üzere useEffect hookumda boş bir array belirttim. Burayı şimdilik kafanıza takmayın, birazdan onun amacını tam anlamıyla anlatacağım.

Böylece fonksiyonel componentimizde de `componentDidMount` metodunu çağırmış olduk.

#### componentWillUnMount
Componentimiz görüş alanımızdan çıkacağında (yani renderlanmayacağında, dokümanımızdan kaldırılacağında) çağırılan bir metottur. Bu metot sayesinde son temizlikleri yapabilir ve performansı arttırabiliriz. Bu metodu daha iyi anlatabilmek için yukarıdaki `componentDidMount` örneğini biraz geliştireceğim.
```jsx
import React, { Component } from "react";

class MyComponent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			interval: undefined,
		};
	}
	
	componentWillUnMount() {
		// Son temizliğimizi yaptık ve artık performans sıkıntısı yaşamayacağız.
		clearInterval(this.state.interval);
		console.log("Component dokümandan kaldırıldı.");
	}
	
	componentDidMount() {
		const i = setInterval(() => {
			console.log("Bu mesaj her 10 saniyede bir loglanacaktır.");
		}, 1000 * 10);
		this.setState({ interval: i });
		console.log("Componentimiz ilk kez renderlandı ve bu fonksiyon bir daha çağırılmayacaktır.");
	}
}
```
Bu özelliği fonksiyonel componentler ile şu şekilde yapıyoruz:
```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
	const [interval, setIntervalState] = useState();
	
	useEffect(() => {
		const i = setInterval(() => {
			console.log("Bu mesaj her 10 saniyede bir loglanacaktır.");
		}, 1000 * 10);
		setIntervalState(i);
		console.log("Componentimiz ilk kez renderlandı ve bu fonksiyon bir daha çağırılmayacaktır.");
	
		// burası "componentWillUnMount" metodu
		return () => {
			// Son temizliğimizi yaptık ve artık performans sıkıntısı yaşamayacağız.
			clearInterval(interval);
			console.log("Component dokümandan kaldırıldı.");
		}
	}, []);
}
```
`useEffect` hooku içerisinde bir fonksiyon returnlarsak bu fonksiyon, componentimiz dokümandan kaldırılırken çağırılacaktır.

#### Spesifik state takibi
`useEffect` hookundaki favorim. Bu özellik sayesinde sadece belirttiğimiz state'te bir değişim olduğu zaman bir işlem yapabiliyoruz. 
```jsx
import React, { useState } from "react";

const MyComponent = () => {
	const [count, setCount] = useState();
	const [name, setName] = useState();
}
```
Örneğin yukarıda 2 adet state verimiz bulunmakta ancak bir sadece `name` state'i değiştiği zaman bir işlem yapmak istiyoruz. O zaman işin içine `dependency array` dediğimiz bir olay giriyor. Yukarıda `useEffect`'in `componentDidMount` karşılığını anlatırken boş bir array belirtmiştim. Burası tam da onunla ilgili.

`useEffect` hookunu çağırırken ilk parametre olarak effect fonksiyonunu belirtiyoruz, bunu geçtiğimiz birkaç örnekte anladık. Ancak `useEffect` hookuna 2 adet parametre tanımlayabiliriz. İkinci parametre ise `dependency array` olarak geçiyor. Bu parametre bir array (`[]`) olmak zorunda. Bu array içine koyduğumuz veriler hookumuzun dependency'si oluyor. Yani bu verilerde bir güncellenme olduğu zaman hookumuz tekrar çalıştırılıyor.
```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
	const [count, setCount] = useState();
	const [name, setName] = useState();

	useEffect(() => {
		console.log("Bu hook componentimiz her renderlandığında çalışacaktır.");
	});

	useEffect(() => {
		console.log("Bu hook yalnızca 1 kere (ilk renderdan sonra) çalışacaktır.");
	}, []);

	useEffect(() => {
		console.log("Bu hook yalnızca 'name' verisi güncellenince çalışacaktır.");
	}, [name]);
}
```
Yani dependency array'i boş bırakmak demek bu hooku yalnızca 1 kere (ilk renderdan sonra) çalışmak üzere ayarlamak demek oluyor.

## Kendi Hookumuzu Oluşturma
Hooklar bu yazının başında da bahsettiğim gibi birer özel JavaScript fonksiyonlarıdır. Bir fonksiyon içinde başka fonksiyonlar da çağırabilir veya aynı kodu birden çok yerde kullanıyorsak bunu fonksiyon haline getirip işimizi kolaylaştırabiliriz. Yani bu demek oluyor ki fonksiyonlar için geçerli olan her şey hooklar için de geçerlidir.  Bir hook içinde başka hooklar da çağırabilir ve aynı hooku birden çok yerde kullanabiliriz. 

Şimdi basit bir hook yapmaya çalışalım. Bu yapacağımız hookun amacı belirttiğimiz URL'ye bir request atması ve bu requestin sonucunu vermesi olsun.

İlk olarak temel bir hook yapısı oluşturalım:
```jsx
import React, { useState } from "react";

export const useFetch = (url) => {
	const [body, setBody] = useState();
	const [error, setError] = useState();

	return [body, error];
}
```
Gördüğünüz gibi hookumuzun içerisinde de `useState` hookunu kullandık. Böylece bir veri güncellemesi yaptığımızda componentimiz tekrar renderlanacaktır. Şimdi request özelliğini entegre edelim:
```jsx
import React, { useState, useEffect } from "react";

export const useFetch = (url) => {
	const [loading, setLoading] = useState(true);
	const [body, setBody] = useState();
	const [error, setError] = useState();

	const fetcher = async () => {
		setLoading(true);
		const res = await fetch(url);
		if (!res.ok) {
			setError(res.statusText);
			setLoading(false);
			return;
		}
		const body = await res.json();
		setBody(body);
		setError();
		setLoading(false);
	}

	useEffect(fetcher, []);

	return [loading, body, error, fetcher];
}
```
Ve hookumuz tamamlandı! Fetcher fonksiyonu ile bir fetch yapıyoruz ve hata varsa `setError` ile hata state'ini güncelliyoruz, yoksa `setBody` ile body state'ini güncelliyoruz. Bu hooku artık şu şekilde kullanabiliriz:
```jsx
import React, { useState } from "react";
import { useFetcher } from "./path/to/useFetcher";

const MyComponent = () => {
	const [loading, body, error] = useFetcher("https://pokeapi.co/api/v2/pokemon/ditto");

	return loading ? (
		<div>Yükleniyor...</div>
	) : error ? (
		<div>Bir hata oluştu.</div>
	) : (
		<div>Pokemonun adı: {body?.name}</div>
	)
}
```

## Son Sözler
Yazıyı buraya kadar okuduysanız artık hookların ne demek olduğunu, nasıl çalıştıklarını ve kendi hookunuzu nasıl yapabileceğinizi anlamışsınızdır demektir. Zaman ayırdığınız için teşekkürler, başka bir yazıda görüşmek üzere. 

ReactJS

(React) Hook Nedir, Temel Hooklar ve Kendi Hookunuzu Yapma

# Top 10 JavaScript Tips & Tricks

In this post, I'm going to show you 10 awesome JavaScript tips & tricks that I've learned from over 10 years of experience to make your life easier. And it will help you become a better developer. So if you're interested, keep reading.

## 1 - Stop Using "data" (Or Something Random) As A Variable Name

```js
function calculate(...numbers) {
	const data = numbers.reduce((rev, curr) => prev + curr, 0);
	return data;
}

const data = calculate(2, 3, 6, 1);
console.log(data); // 12
```

Be a little more descriptive when naming your variables. In the example above, of course, we can see at a glance that the "data" variable is the sum of numbers, but suppose this "data" nomenclature occurs in more than one place in a larger project. Everything is mixed up!

Use meaningful prefixes when naming your variables:

-   If you are creating a function that does data discovery from scratch, make sure to add the `get` prefix to the name of this function. For example `getUser()`
-   If you are using a function to update data, start the name of that function with prefixes like `set` or `update`. For example `updateUser()`
-   When naming your boolean values, add prefixes like `is`, `should`, `can` to the beginning. For example `canSpeak = true`

In short, people should understand what your named variables mean in one reading.

## 2 - Pass Arguments As An Object Rather Than One At A Time

```js
function savePerson({ id, name, favourites }) {
	// save person
}

const person = {
	id: 1,
	name: "Barış",
	favourites: [ "coffee", "pasta", "pizza" ],
}

savePerson(person);
```

Passing arguments as objects in functions is a logical move in many ways:

-   The order of the arguments is no longer important, you can make any order of arguments you want. This will both accelerate you and provide an environment for you to write better quality code.
-   The autocomplete will be easier and faster depending on the IDE you are using.
-   It prevents you from passing unnecessary arguments when using the same function in multiple places in a large project.

Below is an example of bad use of arguments.

```js
function savePerson(id, name, favourites) {
	// save person
}

const person = {
	id: 1,
	name: "Barış",
	favourites: [ "coffee", "pasta", "pizza" ],
}

savePerson(person.id, person.name, person.favourites);
```

As you can see, in this example we already have an object as a whole, but we need to pass all the elements of this object as arguments one by one.

## 3 - Use Built-in Features

```js
function hardOne(number) {
	return number.toString().replace(/\B(?=(\d{3})+(?!\d))/, ".");
}

function easyOne(number) {
	return new Intl.NumberFormat().format(number);
}

console.log(hardOne(23476283)); // 23.476.283
console.log(easyOne(23476283)); // 23.476.283
```

JavaScript offers you quite a lot of features. Using these built-in features instead of creating a new function immediately will save you time and allow you to focus on your main project faster. When looking for a solution to your problem, you can use existing functions instead of creating a new function.

## 4 - Removing Duplicates From An Array

```js
const array = [ 1, 1, 2, 3, true, true, "Barış", false, "Barış" ];
const filtered = [ ...new Set(array) ];
console.log(filtered); // [ 1, 2, 3, true, "Barış", false ]
```

This trick is pretty simple. Suppose I have a string containing numbers, strings and booleans. And I want to make sure there are no duplicate items in this array. I can create a simple Set for this and convert it to an array with the spread operator.

## 5 - Use Generators To Create Sequential IDs

```js
const factory = (function* generator() {
	let id = 0;
	while (true) {
		yield id++;
	}
})();

function nextID() {
	return factory.next().value;
}

console.log(nextID()); // 1
console.log(nextID()); // 2
console.log(nextID()); // 3
```

Generators introduced with ES6 are a very useful feature that allows us to create not similar repetitive sequences.

If you don't know what generators are, they are functions that employ lazy evaluation by making use of the yield keyword to process and return data, on-demand.

It may look like generator functions will burn CPU cycles in an infinite loop, however, generators describe a state machine, allowing transitions to forward states to occur through provided code (through subsequent yields). These transitions occur on-demand whenever the next method is called, hence the term lazy evaluation!

With this trick, you no longer have to rely on global/class-scoped variables to remember the state!

## 6 - Waiting For Multiple Promises To Resolve

```js
function myPromise(ms) {
	return new Promise((resolve) => {
		setTimeout(() => resolve(ms), ms);
	});
}

const promiseOne = myPromise(500);
const promiseTwo = myPromise(5710);
const promiseThree = myPromise(1350);

Promise
	.all([ promiseOne, promiseTwo, promiseThree ])
	.then((result) => {
		console.log("Result of promiseOne:", result[0]); // Result of promiseOne: 500
		console.log("Result of promiseTwo:", result[1]); // Result of promiseTwo: 5710
		console.log("Result of promiseThree:", result[2]); // Result of promiseThree: 1350
	});
```

If you need to wait for multiple asynchronous processes to finish before performing another action, do not wait for them one at a time. You can use the `Promise.all(promiseLike[])` method to run all asynchronous operations at the same time and continue your operation after they are all finished.

## 7 - Format JSON Output With Spaces

```js
const person = {
	id: 1,
	name: "Barış",
	favourites: [ "coffee", "pasta", "pizza" ],
}

console.log(person);
/*
	{id:1,name:"Barış",favourites:["coffee","pasta","pizza"]}
*/

console.log(JSON.stringify(person, null, 4));
/*
	{
		"id": 1,
		"name": "Barış",
		"favourites": [ "coffee", "pasta", "pizza" ]
	}
*/
```

`JSON.stringify(object, replacer, indent)`

A simple yet very effective function for exporting readable JSON by supplying the amount of spaces to use for indentation in the third parameter.

The second parameter is the replacer and it can either be a function which controls the stringify-ing process, or it can be an array, in which case it indicates the name of the properties that should be included in the stringified output.

## 8 - Use The Optional Chaining Operator

```js
const person = {
	id: 1,
	name: "Barış",
	favourites: [ "coffee", "pasta", "pizza" ],
	introduce: () => `Hello, my name is ${person.name}`,
}

console.log(person.introduce()); // Hello, my name is Barış
console.log(person.notExistingMethod()); // ERROR!!!
console.log(person.notExistingMethod?.()); // undefined
```

With optional chaining being supported in most browsers, it is now easier to parse complex objects.

Previously, developers would resort to using either short-circuits or nested if statements in which they would compare against undefined.

Now, it is even easier (and cleaner!) to accomplish the same validation with the optional chaining operator.

Even better, you can even use optional chaining with expressions using bracket notation, or, if you have a deeply nested object, you can stack optional chaining operators to check for deeper properties.

## 9 - Be Modular

```js
import { generator } from "./idGenerator.js"

const user = {
	id: generator.next(),
	name: "Barış",
	type: "premium",
}

const post = {
	id: generator.next(),
	title: "My awesome post!",
	author: user,
}
```

Do not create the functions just to serve a purpose, try to handle multiple tasks with a single function. You don't need to create a special function for everything you need to do. Just use the old one.

## 10 - Time the execution of your code

```js
console.time("myTimer");

const factory = (function* generator() {
	let id = 0;
	while (true) {
		yield id++;
	}
})();

let id = 0;

for (let i = 0; i < 1e6; i++) {
	id = factory.next().value;
}

console.timeEnd("myTimer"); // myTimer: 27.902ms
```

A priceless function for developers seeking to deliver high-performance code, the time method takes a timer name as parameter and expects to be met with a call to timeEnd in which the same timer name is supplied.

The timeEnd method prints the elapsed time in milliseconds between the two function calls and it allows programmers to quickly observe the bottlenecks of their code and refactor with ease.

This approach is much better than calculating the elapsed execution time manually, as it is built-in and widely supported across modern browsers.

## Thanks For Reading

Thank you for taking your precious time to read this post. If you want to learn more JavaScript tips & tricks, I recommend you to visit my blog often.


English

Top 10 JavaScript Tips & Tricks

XY sorunu, asıl probleminize yardım aramaktansa bu problemi çözmek için denediğiniz hatalı çözüm hakkında yardım aramaktır. Bu durum hem yardım isteyenler hem de yardım edecekler açısından oldukça zaman ve enerji kaybına yol açıyor. Biraz daha detaylandırmak gerekirse:
- John Doe X yapmak istiyor.
- John Doe X'i nasıl yapacağını bilmiyor, **ancak Y'yi yapmayı başarırsa** X için bir çözüme ulaşacağını **düşünüyor**.
- John Doe Y'yi de nasıl yapacağını **bilmiyor**.
- John Doe Y hakkında yardım ister.
- Yardım etmeye çalışan insanlar John Doe'ye Y hakkında yardım ederler ancak yine de bir çözüme ulaşamazlar.
- Çok fazla gereksiz sohbet, enerji kaybı ve zaman kaybından sonra John Doe, **Y'nin X için bir çözüm olmadığını anlar** ve **yeni bir Y bularak başa döner**.

Böylece yardım etmeye çalışan insanlar sorunun Y olduğunu ve bu soruna çözüm bulduklarını düşünür, ancak soruyu soran kişi yanıtını alamamıştır ve tekrardan başa dönerek bu sefer farklı bir "Y" üretmiştir.

Bu kısır döngüyü engellemek için soruyu soran kişinin şu adımları takip etmesi oldukça faydalıdır:

- Sorunuzu sormak için bir ön prosedüre ihtiyacınız olmadığını hatırlayın.
- Gerçekten ne konusunda yardıma ihtiyacınız olduğundan emin olun. X hakkında yardıma ihtiyacınız varsa X hakkında soru sorun. **Y'yi yapıp X'i elde edeceğinizi düşünüyorsanız bile direkt X'i sorun.**
- Denediğiniz çözüm yanında bu çözümü neden denediğinizi, çözümün (olumlu, olumsuz veya eksik) sonucunu, araştırdığınız kaynakları ve aklınıza gelebilecek her türlü detayı sorunuza ekleyin, yardımcı olacak kişiye yardımcı olun.
- Yardımcı olacak kişi daha fazla bilgi isterse onlara gerekli bilgileri sağlayın.
- Bazı kabul etmediğiniz olası çözümleri sebepleri ile neden kabul etmediğinizi belirtin.
- **Yaptığınız çıkarımlara güvenmeyin**, bu çıkarımlar doğru olsaydı şu an birilerine soru soruyor olmazdınız.

### Bu durumu örneklendirecek olursak:

Bu örneğimizde bir uygulama geliştiricisi belirtilen dosyanın uzantısını belirlemek istiyor, ancak sorusunu yanlış sorduğu için boş yere zaman kaybediyor:

> **> John Doe @ 10:00AM:** Merhaba, acaba JavaScript ile bir stringin son üç harfini nasıl ayırabilirim?
> **> Jane Parker @ 10:10AM:** Merhaba John, `<String>.slice(-3)` kodu ile bir stringin son üç harfini alabilirsin.
> **> John Doe @ 11:20AM:** Merhaba, acaba JavaScript ile bir stringi nasıl noktalarından ayırabilirim? Örneğin "merhaba.dünya" şeklinde bir stringi `["merhaba", "dünya"]` gibi.
> **> Cheryl Wilson @ 11:20AM:** Merhaba John, `<String>.split('.')` kodu işini görecektir.
> **> Jane Parker @ 11:40AM:** Hey John, acaba bir dosyanın uzantısını mı almaya çalışıyorsun?
> **> John Doe @ 11:45AM:** Evet Jane, bir dosyanın uzantısına ulaşmak istiyorum.
> **> Jane Parker @ 11:40AM:** Neden en başında söylemiyorsun? Bütün dosyaların uzantıları üç harf ile bitmiyor olabilir. `<String>.match(/\.([0-9a-z]+)(?:[\?#]|$)/)` kodu işine yarayacaktır.
> **> John Doe @ 12:00AM:** Oh, teşekkürler Jane! Günümü kurtardın.

gördüğünüz gibi yukarıdaki örnekte X (yani John Doe'nin yapmak istediği şey) dosya uzantısına erişmek ancak John Doe **2 kere Y üretiyor** (1. "stringin son 3 harfini alma", 2. "stringi noktalardan ayırma") ve **her ne kadar doğru cevap alsa da** işine yaramayacağı için boşa vakit harcamış oluyor. John Doe sorusunu "Stringin son üç harfi nasıl alınır?" gibi sormaktansa "Bir dosyanın uzantısını nasıl alınır?" şeklinde sorsaydı hem cevabına daha hızlı ulaşırdı hem de birden çok kişi ile gereksiz sohbette bulunmazdı.

Nasıl Soru Sorulur

XY Sorunu

Sık sık karşılaşmışsınızdır, "Bir şey sorabilir miyim?" argümanı ile sohbete girmek isteyen biri.

> **> John Doe @ 10:00AM:** Merhaba, bir şey sorabilir miyim?

Bu şekilde bir giriş birkaç sebepten ötürü kötü bir sohbete başlangıç biçimidir.

### 1. Sorunuzu net bir biçimde belirtmediğiniz için zaman kaybediyorsunuz:

Sohbete bu şekilde bir giriş yaparak ilk olarak size yardımcı olması için birilerini beklemeniz gerekecektir **(Lütfen 2. maddeye göz atınız)**. Bu kişi ise yardıma geldiğinde muhtemelen "Sorun nedir?" gibi bir cevap ile sizden sorununuzu yöneltmenizi isteyecektir. Tabi sizin bu mesajı veya yardımcı olmak isteyen kişinin sizin mesajınızı ne zaman göreceğini bilemeyiz. Kimse bilgisayarı başında size 7/24 yardımda bulunmak için beklemiyor. Sorunuzu yönelteceksiniz ve bir de sorununuzun çözümü için bekleyeceksiniz. Oldukça zaman kaybı değil mi? İşte aşağıda örnek bir konuşma:

> **> John Doe @ 10:00AM:** Merhaba, bir şey sorabilir miyim?
> **> Jane Parker @ 10:30AM:** Elbette, dinliyorum!
> **> John Doe @ 11:20AM:** Merhaba Jane, [yardıma ihtiyacınız olan şey] hakkında bana yardımcı olabilir misin?
> **> Jane Parker @ 12:00AM:** [cevabı verir]
> **> John Doe @ 12:10AM:** Teşekkürler Jane!

Gördüğünüz gibi soruyu yönelten kişi cevabını almak için yaklaşık 2 saat beklemiş bulunmakta. Ancak sohbet aşağıdaki gibi ilerlerse soru soran kişi daha hızlı cevap alacaktı:

> **> John Doe @ 10:00AM:** Merhaba, [yardıma ihtiyacınız olan şey] hakkında bana yardımcı olabilir misiniz?
> **> Jane Parker @ 10:30AM:** [cevabı verir]
> **> John Doe @ 11:20AM:** Teşekkürler Jane!

Gördüğünüz gibi bu sefer soru soran kişi cevabını 30 dakika içinde aldı.

### 2. Sorunuzu net bir biçimde belirtmediğiniz için size yanıt verecek bir uzman bulmakta zorlanıyorsunuz:

Sohbete bu şekilde giriş yaparak ne hakkında yardıma ihtiyacınız olduğunu belirtmiyorsunuz. Böylece gerçekten size yardımcı olabilecek birisi yalnızca mesajınıza bakıp size yanıt vermeden görmezden gelebilir. Sorunuzu net bir biçimde belirtmeyerek kısacası "Bana herhangi bir konuda yardım lazım olabilir. Ne olursa olsun sorunuma göz atacak birine ihtiyacım var." demiş oluyorsunuz. İsterseniz aşağıdaki örneğe bir bakalım:

> **> John Doe @ 10:00AM:** Merhaba, bir şey sorabilir miyim?
> **> John Doe @ 10:10AM:** Kimse yok mu?
> **> Jane Parker @ 10:40AM:** Buyurun, ne hakkında yardıma ihtiyacınız vardı?
> **> John Doe @ 11:20AM:** Merhaba Jane, [yardıma ihtiyacınız olan şey] hakkında bana yardımcı olabilir misin?
> **> Jane Parker @ 12:00AM:** Maalesef John, [yardıma ihtiyacınız olan şey] benim ilgi alanım dışında. Mutlaka yardımcı olacak biri çıkacaktır.
> **> John Doe @ 12:10AM:** Teşekkürler Jane! Eee, bir başkası yok mu?
> **> Cheryl Wilson @ 12:30AM:** [cevabı verir]
> **> John Doe @ 12:50AM:** Teşekkürler Cheryl!

-   Gördüğünüz gibi soru soran kişi cevabına ulaşmak için birden çok kişiyi rahatsız etti ve cevabını da yaklaşık 2.5 saatte aldı. Ancak konuşma şu şekilde ilerlerse cevabını daha hızlı alacaktı:

> **> John Doe @ 10:00AM:** Merhaba, [yardıma ihtiyacınız olan şey] hakkında bana yardımcı olabilir misin?
> **> Cheryl Wilson @ 10:30AM:** [cevabı verir]
> **> John Doe @ 11:20AM:** Teşekkürler Cheryl!

Ve soru soran kişi yalnızca bir kişi ile muhatap olarak cevabına 30 dakikada ulaştı.

Özet geçmek gerekirse sorunuzu sormadan önce "Merhaba", "Yardımcı olur musunuz?" gibi prosedürlere gerek yoktur. Elbette kibar olmak adına mesajınızın başına bunları ekleyebilirsiniz ancak sorununuzu ve gerekli bilgileri tek mesajda göndermeniz sizlere ve size yardımcı olacak kişilere hız ve zaman kazandıracaktır.

Soru Sormak İçin İzin Almayın, Direkt Sorunuzu Sorun

"Nasıl güzel bir soru sorarım?" diyorsanız aşağıdaki bilgiler çok işinize yarayacaktır. Bu postta basit bir şekilde nasıl güzel ve efektif soru sorabileceğinizden bahsedeceğim.

## Araştırma

Bir soru sormadan önce detaylı bir araştırma yapın. Belki sorununuz internette daha önce bir başkası tarafından yanıtlanmış olabilir. Eğer bir yanıt bulamazsanız bile sorunuza ilişkin diğer kaynakları da referans vermeyi unutmayın. Böylece sorununuzun ne olup ne **olmadığı** daha iyi anlaşılır.

## Sorunuzu net bir şekilde özetleyen bir başlık seçin

Size yardım edebilecek kişiler ilk olarak sorunuzun başlığını görür ve ilgilerini çekerse size yardımcı olmak isterler. Efektif bir başlık belirlemek için:

- Yalnızca bir cümle yazma hakkınız olduğunu düşünün. İhtiyacınız olan her şeyi tek cümlede özetlemeye çalışın.
- Yazım kuralları, dil bilgisi ve noktalama işaretlerine olabildiğince uymaya çalışın. Çünkü başlıklar, başkalarının sorununuz hakkında göreceği ilk kısımdır.
- Eğer bir başlık yazmakta sorun yaşıyorsanız bu işi en sonra bırakın. Sorununuzu tamamen açıklayın, böylece siz de sorununuzu tanımış olacaksınız. Sorununuzu tanımak başlık seçmenizde size yardımcı olacaktır.

İşte birkaç örnek:

> **> Kötü bir başlık:** Zar atıldığında kazanma olasılığım nedir? (Nasıl bir zar atılıyor ve sonuç kaç çıkarsa kazanılır bilinmiyor.)
> **> İyi bir başlık:** Hilesiz bir zar atıldığında çıkan sonucun 1 olma olasılığı nedir? (Gerekli tüm bilgiler verilmiş.)

> **> Kötü bir başlık:** "ki" nasıl yazılır? (iki tür "ki" var ama burada hangisinden bahsedilmiş emin değilim.)
> **> İyi bir başlık:** Bağlaç olan "ki" ve ek olan "-ki" nasıl ayırt edilir? (Detaylar verilmiş.)

## Size yardımcı olacak kişilere yardımcı olun

Bir soru sorduğunuzda oldukça açık ve anlaşılır bir dil ile sorununuzu açıklayın. Yazım kuralları, dil bilgisi ve noktalama işaretlerine olabildiğince uymaya çalışın. Gerekirse sorununuz ile ilgili referanslar sunun. Size yardım edecek kişilerin yardım edebilmesi için onların da sizin sorununuzu anlaması lazım. Bu kişiler sizden ek bilgi isterse bu bilgileri onlara detaylı bir şekilde iletin.

## Sorun mesajınızı yayınlamadan önce bir kez daha kontrol edin

Mesajınızı hazırladıktan sonra bir kez daha göz gezdirmeyi unutmayın. Sorunu baştan sona "sorunu ilk defa görüyormuş gibi" okuyun. Kullandığınız argümanların mantıklı ve açıklayıcı olup olmadığını sorgulayın. Ayrıca başlığınızın sorununuzu tam olarak tanımladığından son kez emin olun. Belki önemli bir detayı sonradan hatırlayabilirsiniz.

## Oluşturduğunuz yardım isteğini sık sık takip edin

Yardım isteğini oluşturduktan sonra bir süre bu isteği takip edin. İsteğe gelen mesajları hızlıca açık bir dille cevaplamaya çalışın. Birisi sorununuza çözüm bulursa bu çözümü her an denemeye hazır olun.


Nasıl Soru Sorulur

barisbored

barisbored

barisbored

Sabitlenen Yazılar

Kategoriler