# 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.


Development

barisbored

barisbored

barisbored

Pinned Posts

Categories