Kod inceleme süreçleri, yazılım kalitenizi yükseltmenin ve ekip içi dayanışmayı güçlendirmenin en etkili yollarından biridir. Burada edindiğim ipuçlarını ve adım adım uyguladıklarımı sizinle paylaşacağım.

Neden Kod İncelemesi Yapmalıyız?

Kod incelemeleri, yalnızca hata bulmak için değil, aynı zamanda kod kalitesini yükseltmek, standartları korumak ve takım içinde bilgi paylaşımını güçlendirmek için önemli bir araçtır. İyi yapılandırılmış bir kod inceleme süreci sayesinde:

• Hataları erken aşamada yakalayabilir,
• Kod kalitenizi sürekli artırabilir,
• Geliştiriciler arası iletişimi ve bilgi paylaşımını güçlendirebilirsiniz.

Kod İncelemesi Yaparken Nelere Dikkat Etmeliyiz?

Kod inceleme sürecinde profesyonelce ele alınması gereken temel konuları aşağıda sıralıyorum:

1. Kod Okunabilirliği ve Anlaşılabilirlik

Kod yazarken, kodun sadece makineler tarafından değil, aynı zamanda diğer geliştiriciler tarafından da kolaylıkla anlaşılabilir olmasına dikkat etmek gerekir. Kodun okunabilirliğini artırmak için:

• İyi isimlendirme standartları kullanmalı,
• Açıklayıcı yorumlar eklenmeli (gereksiz yorumlardan kaçınarak),
• Kod blokları ve fonksiyonlar küçük ve odaklı tutulmalıdır.

2. SOLID Prensiplerine Uygunluk

Kodunuzun bakımını kolaylaştırmak ve genişletilebilirliğini artırmak için SOLID prensiplerine uygun yazmalısınız:

• Single Responsibility Principle: Her fonksiyonun tek bir sorumluluğu olmalı.
• Open/Closed Principle: Kodunuz genişlemeye açık ancak değiştirmeye kapalı olmalı.
• Liskov Substitution Principle: Alt sınıflar üst sınıfların yerine sorunsuzca kullanılabilmeli.
• Interface Segregation Principle: İstemcilerin kullanmadığı metotları içeren büyük interfaceler yerine, küçük interfaceler oluşturulmalı.
• Dependency Inversion Principle: Üst düzey modüller, alt düzey modüllere bağımlı olmamalı, ikisi de soyutlamalara bağımlı olmalıdır.

3. Performans ve Verimlilik

Kodunuzun performans açısından değerlendirilmesi gerekir:

• Gereksiz döngüler ve işlemlerden kaçınılmalı,
• Bellek ve işlemci kullanımı göz önünde bulundurulmalı,
• Network istekleri optimize edilmeli.

4. Güvenlik Açısından Kontrol

Kod incelerken güvenlik açıkları konusunda hassas olunmalıdır:

• XSS ve CSRF gibi güvenlik açıklarına karşı gerekli önlemler alınmış mı?
• Dışarıdan alınan veriler doğru şekilde sanitize edilmiş mi?
• Yetkilendirme ve kimlik doğrulama süreçleri düzgün çalışıyor mu?

5. UI ve UX Tutarlılığı

Kod incelerken UI ve UX açısından tutarlılık kontrol edilmeli:

• Bileşenlerin tasarımı ve kullanımı standartlara uygun mu?
• Kullanıcı deneyimi tutarlı mı ve akıcı mı?

Kod İncelemesinde Kullanılan Araçlar

Kod kalitenizi korumak için aşağıdaki araçları kullanabilirsiniz:

• ESLint ve Prettier: Kodun okunabilirliğini ve standardizasyonunu sağlar.
• SonarQube: Kod kalitesini ölçer ve performans, güvenlik ve hata potansiyellerini raporlar.
• GitHub/GitLab Review Araçları: Kolay ve etkin kod inceleme süreçleri sağlar.

İyi ve Kötü Kod Örneği

Kötü örnek:

function handleUserAction(actionType, user) {
  if (actionType === 'create') {
    createUser(user);
  } else if (actionType === 'update') {
    updateUser(user);
  } else if (actionType === 'delete') {
    deleteUser(user);
  } else {
    throw new Error('Geçersiz işlem türü.');
  }
}

Neden kötü?

• Açık-kapalı prensibini (Open/Closed Principle) ihlal eder; yeni işlem türleri eklendiğinde sürekli değiştirilmesi gerekir.
• Uzun if-else blokları kod okunabilirliğini azaltır.

İyi örnek:

const userActionHandlers = {
  create: createUser,
  update: updateUser,
  delete: deleteUser,
};

function handleUserAction(actionType, user) {
  const handler = userActionHandlers[actionType];
  
  if (!handler) {
    throw new Error(`Geçersiz işlem türü: ${actionType}`);
  }

  handler(user);
}

Neden iyi?

• SOLID prensiplerine uygun ve kolayca genişletilebilir.
• Yeni bir işlem türü eklemek çok kolaydır; tek gereken yeni işlem türünü userActionHandlers nesnesine eklemektir.
• Okunabilirlik artar, karmaşık mantıksal kontrollerden kurtulur.

İyi örnek SOLID prensiplerine uygun, okunaklı ve genişlemeye açıktır.

Kod İnceleme Süreci Nasıl Yürütülmeli?

• Kod review talepleri küçük ve anlamlı parçalar halinde yapılmalı.
• İnceleyecek kişi için açıklayıcı notlar eklenmeli.
• İncelemeden sonra yapıcı ve açıklayıcı geri dönüşler sağlanmalı.
• Kod incelemesi sonrası tespit edilen problemler mutlaka düzeltilmeli ve yeniden kontrol edilmelidir.

Sonuç ve Tavsiyeler

Profesyonelce yürütülen kod incelemeleri, takımınızın üretkenliğini ve yazılımınızın kalitesini önemli ölçüde artıracaktır. İyi yapılandırılmış, detaylı ve profesyonel bir kod inceleme süreci, projelerinizin sürdürülebilirliğini sağlarken, ekip içindeki bilgi paylaşımını da güçlendirecektir.

Günümüzün büyük ölçekli Front-End projelerinde ölçeklenebilirlik ve takım bazlı gelişim en kritik gereksinimler arasında. Angular ekosisteminde, ekiplerin kod paylaşımını, bağımlılık yönetimini ve versiyon kontrolünü kolaylaştırmak için iki popüler yaklaşım öne çıkar:

• Monorepo (Tek Depo) Yaklaşımı
• Micro Frontends (Mikro Ön Yüzler) Yaklaşımı

Bu yazımda, kurumsal mimarilerde her iki yaklaşımın nasıl uygulanacağını, avantaj ve dezavantajlarını, örnek folder structure ve kodlarla birlikte detaylı olarak ele alacağız.

Monorepo Nedir?

Monorepo, birden fazla uygulama ve kütüphanenin tek bir versiyon kontrollü depoda “workspace” yönetilmesi yaklaşımıdır. Çoğu zaman Nx veya Lerna gibi araçlarla desteklenir.

• Tek Yerden Yönetim: Birden fazla uygulama (apps/) ve paylaşılan kütüphane (libs/) aynı repo içinde bulunur.
• Bağımlılık Çakışma Azaltma: Ortak paketler, versiyon yükseltme tek seferde yapılır.
• Geliştirme Hızı: CLI komutları (nx build, nx test, nx affected:build) ile toplu işlem yapılabilir.

Micro Frontends Nedir?

Micro Frontends, monolitik bir Front-End uygulamasını bağımsız dağıtılabilir küçük parçalara (remotes) bölme yaklaşımıdır.

• Ana Shell (Host): Tüm remote parçaları yükleyen kabuk uygulama.
• Remote Uygulamalar: Özellik bazlı, bağımsız deploy edilebilir uygulamalar.
• Module Federation (Webpack 5): Runtime’da modüllerin dinamik yüklenmesini sağlar.

Karşılaştırma: Monorepo vs. Micro Frontends

Avantaj ve Dezavantajlar

Monorepo Avantajları

- Tek Bir Kaynak:

• Kod tekrarını azaltır.
• Ortak servis ve pipe’lar paylaştırılır.

- Kolay Refactoring:

• Tüm bağımlılıklar tek repo içinde tek komutla güncellenir.

- Tutarlılık:

• Kod standartları, linting, testing config’leri ortak.

- Etkili CI (Continuous Integration) / CD (Continuous Delivery):

• Affected komutlarıyla yalnızca değişen projeler build/test edilir.

Monorepo Dezavantajları

- Build Süresi:

• Workspace büyüdükçe full build/test süreleri uzayabilir.

- Yetki Yönetimi:

• Repo seviyesinde erişim kontrolü zorlaşabilir.

- Ölçeklenebilirlik Limitleri:

• Çok büyük kod tabanlarında IDE performansı düşebilir.

Micro Frontends Avantajları

- Bağımsız Geliştirme:

• Ekipler kendi remote’larında özgür.

- Bağımsız Deploy:

• Üretime hızlı ve kademeli özellik ekleme.

- Teknoloji Mix:

• Her remote farklı framework/versiyon kullanabilir.

- Modüler Yükleme:

• Kullanıcı yalnızca ihtiyaç duyulan remote’u alır.

Micro Frontends Dezavantajları

- Kompleks Entegrasyon:

• Shell + remotes arasındaki versiyon uyuşmazlığı riskleri.

- Performans Yükü:

• Birden fazla bundle, network overhead.

- Geliştirme Karmaşıklığı:

• Module Federation konfigürasyonu, shared scope yönetimi.

- Ortak Kod Duplication:

• Ortak kütüphaneler remote’lar içinde tekrar paketlenebilir.

Kurumsal Mimaride Monorepo Uygulamaları

Nx ile Workspace Yapısı

Nx, büyük kurumsal Angular projelerinde en yaygın tercih edilen Monorepo aracıdır. Aşağıda tipik bir Nx workspace yapısı örneği görebilirsiniz:

my-enterprise-workspace/
├── apps/
│   ├── shell/                   # Ana host uygulama
│   └── admin-portal/            # Yönetim paneli
├── libs/
│   ├── ui/                      # UI bileşenleri (button, modal, grid)
│   ├── data-access/             # API servisleri, store
│   ├── feature/auth/            # Oturum yönetimi
│   └── util/logger/             # Ortak yardımcı util’ler
├── tools/                       # Custom scripts & generators
├── nx.json
├── angular.json
├── workspace.json
└── package.json

Örnek nx.json (Özet)

{
  "npmScope": "enterprise",
  "projects": {
    "shell": { "tags": ["type:app", "scope:host"] },
    "admin-portal": { "tags": ["type:app", "scope:admin"] },
    "ui": { "tags": ["type:lib", "scope:shared"] },
    "data-access": { "tags": ["type:lib", "scope:shared"] }
  },
  "implicitDependencies": {
    "angular.json": "*",
    "package.json": "*"
  }
}

Örnek Folder Structure

Not: Her lib, Angular CLI schematic’leriyle oluşturulmalı (nx g @nrwl/angular:lib ui).

libs/ui/
├── src/
│   ├── lib/
│   │   ├── button/
│   │   ├── modal/
│   │   └── grid/
│   └── index.ts
└── jest.config.js

Kurumsal Mimaride Micro Frontends Uygulamaları

Module Federation ile Entegrasyon

Webpack 5’in Module Federation özelliği, Remote uygulamaların runtime’da dinamik olarak yüklenmesini sağlar. Angular CLI’da @angular-architects/module-federation gibi eklentilerle kolayca entegre edilebilir.

Shell (apps/shell/webpack.config.js)

const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;

module.exports = {
  output: { uniqueName: "shell", publicPath: "auto" },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        marketing: "marketing@http://localhost:4201/remoteEntry.js",
        auth: "auth@http://localhost:4202/remoteEntry.js"
      },
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
      }
    }),
  ],
};

Remote (apps/marketing/webpack.config.js)

new ModuleFederationPlugin({
  name: "marketing",
  filename: "remoteEntry.js",
  exposes: {
    "./MarketingModule": "./src/app/marketing/marketing.module.ts",
  },
  shared: {
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true },
  },
});

Örnek Yapı ve Konfigürasyon

my-micro-frontend/
├── apps/
│   ├── shell/            # http://localhost:4200
│   ├── marketing/        # http://localhost:4201
│   └── auth/             # http://localhost:4202
├── libs/                 # Ortak util & ui libs
└── package.json

Örnek Kod ve Yapı Detayları

Monorepo’da Ortak Kütüphaneler

// libs/data-access/src/lib/api.service.ts
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" })
export class ApiService {
  constructor(private http: HttpClient) {}
  get<T>(url: string) { return this.http.get<T>(url); }
  // ...
}

// apps/admin-portal/src/app/app.module.ts
import { ApiService } from "@enterprise/data-access";
@NgModule({
  providers: [ApiService],
})
export class AppModule {}

Micro Frontends — Ana Shell ve Remote Uygulama

// apps/shell/src/app/app-routing.module.ts
const routes: Routes = [
  { path: "marketing", loadChildren: () => import("marketing/MarketingModule").then(m => m.MarketingModule) },
  { path: "auth", loadChildren: () => import("auth/AuthModule").then(m => m.AuthModule) },
];

// apps/marketing/src/app/marketing.module.ts
@NgModule({
  declarations: [MarketingComponent],
  imports: [CommonModule, RouterModule.forChild([{ path: "", component: MarketingComponent }])],
})
export class MarketingModule {}

Sonuç olarak:

• Monorepo, proje büyüklüğü orta/ büyük seviyedeyse ve ekipler arası sık kod paylaşımı varsa tercih edilmeli.
• Micro Frontends, büyük organizasyonlarda bağımsız ekiplerin çok farklı release döngülerine sahip olduğu durumlarda kullanılmalı.
• Hybrid Yaklaşım: Nx workspace içinde Micro Frontends stratejisini de kullanabilirsiniz; böylece hem tek repo avantajı sağlanır hem de bağımsız deploy yeteneği korunur.
• CI/CD: Affected build/test adımlarını mutlaka devreye alın — hem Monorepo hem de MFE için kritik.
• Dokümantasyon & Görsel Materyal: Ekipler arasında ortak diyagramlar ve UML(Unified Modeling Language) akışları hazırlayın; sürekli güncel tutun.

Angular projelerinde Dependency Injection (DI) yöntemleri çoğunlukla temel seviyede kullanılır. Fakat büyük ölçekli uygulamalarda sürdürülebilir ve test edilebilir yapılar oluşturmak için ileri seviye DI teknikleri kritik önem taşıyor.

Sizlere InjectionToken ve Factory Provider gibi ileri düzey Angular DI yöntemlerinden kısa ama güçlü bir örnek paylaşmak istiyorum.

Bu yaklaşım sayesinde uygulamalarımız çok daha modüler ve sürdürülebilir oluyor.

// Logger tipini belirten InjectionToken oluşturma
export const LOGGER_TOKEN = new InjectionToken<Logger>('LOGGER_TOKEN');

// Ortama göre (prod/dev) farklı logger döndüren factory methodu
export function loggerFactory(environment: EnvironmentService): Logger {
  return environment.production ? new ProdLogger() : new DevLogger();
}

// Angular Module Providers'da Factory Provider kullanımı
providers: [
  {
    provide: LOGGER_TOKEN,
    useFactory: loggerFactory,
    deps: [EnvironmentService]
  }
]

// Component içinde InjectionToken kullanımı
constructor(@Inject(LOGGER_TOKEN) private logger: Logger) {
  logger.log('Advanced DI kullanımı başarılı!');
}

Web uygulamaları geliştirmek için JavaScript framework’leri büyük bir öneme sahiptir. Bu framework’ler, geliştirme sürecini kolaylaştırır, verimliliği artırır ve kullanıcı deneyimini iyileştirir. Angular, React.js ve Vue.js, bu alanda öne çıkan framework’lerdir. Her biri benzersiz özelliklere sahiptir ve farklı ihtiyaçları karşılamak için tasarlanmıştır. Bu yazımda, Angular, React.js ve Vue.js’i ayrıntılı bir şekilde inceleyeceğiz.

1. Angular: Angular, Google tarafından geliştirilen bir JavaScript framework’üdür. Angular, büyük ölçekli, karmaşık ve performans odaklı web uygulamalarını geliştirmek için kullanılır. İşte Angular’ın bazı önemli özellikleri:

• Tam bir framework olması: Angular, birçok özellik ve bileşen sunarak geliştirme sürecini kolaylaştırır. Veri bağlama, yönlendirme, hata işleme gibi birçok özellik dahildir.
• TypeScript tabanlı: Angular, TypeScript kullanarak statik tür denetimi ve nesne yönelimli programlamayı destekler. Bu, daha güvenli ve hata ayıklaması daha kolay kod yazmanıza olanak sağlar.
• Bileşen tabanlı yapı: Angular, bileşen tabanlı bir yapıya sahiptir. Bileşenler, HTML, CSS ve TypeScript’i birleştirerek web uygulamasının farklı bölümlerini oluşturmanızı sağlar.
• Güçlü altyapı: Angular, büyük ölçekli uygulamaları yönetmek için sağlam bir altyapı sunar. Verimlilik, performans ve test yetenekleri konusunda güçlüdür.

Avantajları:

• Tam bir framework olması, geliştirme sürecini kolaylaştırır ve birçok özellik sunar.
• Büyük ölçekli uygulamaları yönetmek için geliştirilmiştir ve sağlam bir altyapı sunar.
• İyi test yetenekleri ve ölçeklenebilirlik sağlar.
• İleri düzey veri bağlama ve iki yönlü(Two-way binding) veri bağlama özelliklerine sahiptir.

Dezavantajları:

• Öğrenme eğrisi yüksektir. Angular, kapsamlı bir framework olduğu için başlangıçta öğrenmesi biraz zor olabilir.
• Performans açısından diğer framework’lere kıyasla daha ağırdır.
• Esneklik açısından bazı diğer framework’lere göre daha sınırlıdır.

2. React.js: React.js, Facebook tarafından geliştirilen bir JavaScript kütüphanesidir. Kullanıcı arayüzü oluşturmak için kullanılır ve bileşen tabanlı bir yaklaşım sunar. İşte React.js’in bazı önemli özellikleri:

• Sanal DOM kullanımı: React.js, sanal bir DOM (Document Object Model) kullanarak verimli güncellemeler yapmayı sağlar. Bu, performansı artırır ve sadece değişen kısımları günceller.
• Modülerlik: React.js, bileşen tabanlı bir yapıya sahiptir. Bileşenler, yeniden kullanılabilir ve bağımsız olabilir. Bu, kodun daha kolay sürdürülebilir ve genişletilebilir olmasını sağlar.
• Büyük topluluk ve ekosistem: React.js, geniş bir topluluğa sahiptir ve birçok üçüncü taraf kütüphane ve araçlarla entegre edilebilir. Bu, sorunları çözmek ve kaynaklara kolayca erişmek için büyük bir avantajdır.
• JavaScript entegrasyonu: React.js, JavaScript ile iyi entegrasyon sağlar ve karmaşık uygulamaları kolayca oluşturmanıza olanak tanır.

Avantajları:

• Hızlı ve verimli bir şekilde çalışır, çünkü sanal DOM kullanır ve sadece değişiklikleri güncelleyerek performansı artırır.
• Modüler bir yapıya sahiptir ve yeniden kullanılabilir bileşenler oluşturmayı kolaylaştırır.
• Büyük bir topluluğa sahiptir, bu da sorunlarınızı çözmek için kaynaklara kolayca erişebileceğiniz anlamına gelir.
• JavaScript ile iyi entegrasyon sağlar ve karmaşık uygulamaları kolayca oluşturmanızı sağlar.

Dezavantajları:

• React.js, sadece bir kullanıcı arayüzü kütüphanesi olduğu için diğer gereksinimleri karşılamak için ek kütüphaneler veya çerçeveler kullanmanız gerekebilir.
• Başlangıçta öğrenme eğrisi biraz yüksek olabilir.
• React.js, başlangıçta birçok karar vermenizi gerektiren esnek bir yapıya sahiptir.

3. Vue.js: Vue.js, açık kaynaklı bir JavaScript framework’üdür ve modern kullanıcı arayüzü uygulamaları oluşturmak için kullanılır. İşte Vue.js’in bazı önemli özellikleri:

• Hafif ve hızlı: Vue.js, küçük boyutu ve hızlı performansıyla bilinir. Bu, uygulamaların hızlı bir şekilde çalışmasını sağlar.
• Kolay öğrenme ve kullanım: Vue.js, başlangıçta hızlı bir şekilde projeye başlamanıza olanak tanır. Basit ve sezgisel bir API’ye sahiptir ve HTML tabanlı şablonları kullanarak bileşenleri oluşturmak ve veri bağlama işlemleri yapmak oldukça basittir.
• İhtiyaca göre kullanılabilirlik: Vue.js, kullanımı isteğe bağlıdır, yani ihtiyaca göre bir bölümü veya tamamını kullanabilirsiniz. Bu, mevcut projelere kolayca entegre olmayı sağlar ve mevcut kod tabanınızı değiştirmek zorunda kalmazsınız.
• Entegrasyon ve genişletilebilirlik: Vue.js, diğer kütüphaneler veya projelerle kolayca entegre olabilir. İhtiyaç duyduğunuzda üçüncü taraf kütüphanelerle veya eklentilerle genişleyebilirsiniz.
• Avantajları:
• Hafif ve hızlı bir framework olması, uygulamaların hızlı bir şekilde çalışmasını sağlar.
• Kolay öğrenilebilir ve kullanımı basittir. Başlangıçta hızlı bir şekilde projeye başlayabilirsiniz.
• Diğer framework ve kütüphanelerle kolayca entegre olabilir.
• İhtiyaca göre kullanılabilirlik özelliği sunar, yani ihtiyacınıza bağlı olarak sadece belirli bir kısmını kullanabilirsiniz.

Dezavantajları:

• Büyük ölçekli projelerde bazı özellikler ve altyapı eksiklikleri olabilir. Vue.js, diğer iki framework olan Angular ve React.js’e kıyasla daha yeni bir teknolojidir ve bazı büyük ölçekli projeler için eksikliklere sahip olabilir.
• Vue.js, diğer framework’ler kadar geniş bir topluluğa sahip değildir. Bu nedenle, bazı konularda daha sınırlı kaynaklara ve yardıma erişmek zor olabilir.

Karşılaştırma:

1. Performans:

• Angular: Angular, büyük ölçekli projeler için sağlam bir performans sunar, ancak diğer framework’lere kıyasla daha ağırdır.
• React.js: React.js, sanal DOM kullanarak performansı artırır ve sadece değişiklikleri güncelleyerek hızlı çalışır.
• Vue.js: Vue.js, hafif ve hızlı bir framework olarak bilinir ve küçük ölçekli projelerde iyi performans gösterir.

2. Öğrenme Eğrisi:

• Angular: Angular, tam bir framework olduğu için öğrenme eğrisi daha yüksektir.
• React.js: React.js, sadece bir kütüphane olduğu için Angular’a göre daha hızlı öğrenilebilir.
• Vue.js: Vue.js, kolay anlaşılabilir ve kullanımı basit olduğu için hızlı bir şekilde öğrenilebilir.

3. Topluluk ve Ekosistem:

• Angular: Angular, büyük bir topluluğa ve geniş bir ekosisteme sahiptir. Kaynaklara kolayca erişebilirsiniz ve birçok üçüncü taraf kütüphane ve araç mevcuttur.
• React.js: React.js, geniş bir topluluğa ve birçok üçüncü taraf kütüphane ve araca sahiptir. Sorunlarınızı çözmek için geniş bir destek ağı vardır.
• Vue.js: Vue.js, Angular ve React.js kadar geniş bir topluluğa sahip olmasa da büyümekte olan bir topluluğa sahiptir. Kaynaklara erişmek konusunda bazı sınırlamalar olabilir, ancak destek ve yardım bulmak hala mümkündür.

Sonuç: Angular, React.js ve Vue.js, farklı ihtiyaçları karşılamak için farklı özelliklere sahip JavaScript framework’leridir. Angular, büyük ve karmaşık projeler için güçlü bir altyapı sunar. React.js, performansı ve modülerliğiyle ön plana çıkar. Vue.js ise hafif, kolay öğrenilebilir ve kullanışlı bir framework olarak öne çıkar. Hangi framework’ün kullanılacağı, projenin gereksinimlerine, ekibin deneyimine ve kişisel tercihlere bağlıdır.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

JavaScript’te splice() methodu, bir diziden öğe eklemek, çıkarmak veya değiştirmek için kullanılır. Bu method, dizinin belirli bir konumundan başlayarak öğeleri değiştirir ve isteğe bağlı olarak çıkarılan öğeleri yeni bir dizi olarak döndürür.

Syntax (Sözdizimi)

array.splice(start, deleteCount, item1, item2, ...)

Parametre

• start (gereklidir): Dizideki değişikliğin başladığı indeks.
• deleteCount (opsiyonel): Çıkarılan öğe sayısı. Bu parametre belirtilmezse, start indeksinden itibaren tüm öğeler çıkarılır.
• item1, item2, ... (opsiyonel): Eklenecek yeni öğeler. Bu parametreler belirtilmezse, sadece çıkarılan öğeleri döndürür.

Dönüş Değeri

• Çıkarılan öğelerden oluşan yeni bir dizi (eğer öğeler çıkarıldıysa).

Örnekler

1. Bir diziye yeni öğeler eklemek:

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 0, 6, 7);

console.log(numbers);   // [1, 2, 6, 7, 3, 4, 5]

Yukarıdaki örnekte, splice() methodu kullanılarak numbers dizisinin 2. indeksine (yani 3. öğeye) yeni öğeler eklenir. 0 değeri, çıkarılan öğe olmadığını gösterir. Sonuç olarak, dizinin içine 6 ve 7 eklenir ve dizi [1, 2, 6, 7, 3, 4, 5] şeklinde güncellenir.

2. Bir dizi içindeki öğeleri çıkarmak:

const fruits = ['apple', 'banana', 'orange', 'kiwi'];
const removedFruits = fruits.splice(1, 2);

console.log(fruits);         // ['apple', 'kiwi']
console.log(removedFruits);  // ['banana', 'orange']

Yukarıdaki örnekte, splice() methodu kullanılarak fruits dizisinin 1. indeksinden başlayarak 2 öğe çıkarılır. Çıkarılan öğeler, removedFruits dizisine atanır ve orijinal dizi fruits güncellenir. Sonuç olarak, fruits dizisi ['apple', 'kiwi'] şeklinde güncellenir ve çıkarılan öğeler removedFruits dizisinde [ 'banana', 'orange' ] şeklinde döndürülür.

3. Bir dizi içindeki öğeleri değiştirmek:

const colors = ['red', 'green', 'blue'];
colors.splice(1, 1, 'yellow');

console.log(colors);   // ['red', 'yellow', 'blue']

Yukarıdaki örnekte, splice() methodu kullanılarak colors dizisinin 1. indeksindeki öğe ('green') 'yellow' ile değiştirilir. Sonuç olarak, colors dizisi ['red', 'yellow', 'blue'] şeklinde güncellenir.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

JavaScript’te sort() methodu, bir diziyi yerinde sıralamak için kullanılır. Bu method, dizinin öğelerini varsayılan olarak alfabetik olarak veya belirtilen bir sıralama işlevine göre sıralar.

Syntax (Sözdizimi)

array.sort(compareFunction)

Parametre

• compareFunction (opsiyonel): Sıralama işlevi. Bu işlev, dizinin öğelerini sıralamak için kullanılır. İki öğe arasında karşılaştırma yapar ve sıralama düzenini belirler. Bu işlevin iki parametresi (a ve b) vardır ve döndürdüğü değere göre sıralama gerçekleşir.

Dönüş Değeri

• Yerinde sıralanmış dizi (orijinal dizi üzerinde değişiklik yapar).

Örnekler

1. Bir dizi içindeki sayıları sıralama:

const numbers = [5, 1, 3, 2, 4];
numbers.sort();

console.log(numbers);   // [1, 2, 3, 4, 5]

Yukarıdaki örnekte, sort() methodu kullanılarak numbers dizisi varsayılan olarak alfabetik olarak sıralanır. Sayılar da alfabetik olarak sıralandığından, sonuç [1, 2, 3, 4, 5] şeklinde olur.

2. Sıralama işlevi kullanarak bir dizi içindeki sayıları ters sıralama:

const numbers = [5, 1, 3, 2, 4];
numbers.sort(function(a, b) {
  return b - a;
});

console.log(numbers);   // [5, 4, 3, 2, 1]

Yukarıdaki örnekte, sort() methodu kullanılarak numbers dizisi ters sırada sıralanır. Bunun için sıralama işlevi olarak function(a, b) { return b - a; } kullanılır. Bu işlev, öğeleri büyükten küçüğe doğru sıralamak için kullanılır. Sonuç olarak, dizi [5, 4, 3, 2, 1] şeklinde ters sıralanır.

3. Alfabetik olarak bir dizi içindeki string öğeleri sıralama:

const fruits = ['banana', 'apple', 'orange', 'kiwi'];
fruits.sort();

console.log(fruits);   // ['apple', 'banana', 'kiwi', 'orange']

Yukarıdaki örnekte, sort() methodu kullanılarak fruits dizisi alfabetik olarak sıralanır. String öğeler alfabetik olarak sıralandığından, sonuç ['apple', 'banana', 'kiwi', 'orange'] şeklinde olur.

4. Özel bir sıralama işlevi kullanarak bir nesne dizisini sıralama:

const persons = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 },
  { name: 'David', age: 20 }
];

persons.sort(function(a, b) {
  return a.age - b.age;
});

console.log(persons);
/* 
[
  { name: 'David', age: 20 },
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 }
]
*/

Yukarıdaki örnekte, sort() methodu kullanılarak persons dizisi age özelliğine göre sıralanır. Sıralama işlevi, öğeleri yaşa göre küçükten büyüğe doğru sıralamak için kullanılır. Sonuç olarak, nesne dizisi yaşa göre sıralanır.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

JavaScript’te some() methodu, bir dizi içinde en az bir öğenin belirli bir koşulu sağlayıp sağlamadığını kontrol etmek için kullanılır. Bu method, dizi içindeki öğeler üzerinde verilen bir test fonksiyonunu çalıştırır ve en az bir öğe testi geçerse true değerini döndürür; aksi takdirde false değerini döndürür.

Syntax (Sözdizimi)

array.some(callback)

Parametre

• callback (gereklidir): Her bir öğe için çağrılan test fonksiyonu. Bu fonksiyon, üç parametre alır: element (geçerli öğe), index (geçerli öğenin indeksi), array (çalışılan dizi).

Dönüş Değeri

• Testin en az bir öğe tarafından geçilip geçilmediğine bağlı olarak true veya false değeri.

Örnekler

1. Bir dizi içinde pozitif bir sayı olup olmadığını kontrol etme:

const numbers = [1, -2, 3, -4, 5];
const hasPositiveNumber = numbers.some(function(number) {
  return number > 0;
});

console.log(hasPositiveNumber);   // true

Yukarıdaki örnekte, some() methodu kullanılarak numbers dizisinin her bir öğesi, number > 0 koşulunu kontrol eden bir test fonksiyonu ile değerlendirilir. Bu test fonksiyonu, pozitif bir sayı olup olmadığını kontrol eder. Dizi içinde en az bir pozitif sayı olduğu için some() methodu true değerini döndürür ve hasPositiveNumber değişkenine atanır.

2. Dizi içinde belirli bir değere sahip öğenin olup olmadığını kontrol etme:

const fruits = ['apple', 'banana', 'orange'];
const hasBanana = fruits.some(function(fruit) {
  return fruit === 'banana';
});

console.log(hasBanana);   // true

Yukarıdaki örnekte, some() methodu kullanılarak fruits dizisinin her bir öğesi, fruit === 'banana' koşulunu kontrol eden bir test fonksiyonu ile değerlendirilir. Bu test fonksiyonu, dizinin içinde 'banana' değerine sahip bir öğe olup olmadığını kontrol eder. Dizi içinde 'banana' değerine sahip bir öğe olduğu için some() methodu true değerini döndürür ve hasBanana değişkenine atanır.

3. Arrow function kullanarak test fonksiyonunu tanımlama:

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);

console.log(hasEvenNumber);   // true

Yukarıdaki örnekte, arrow function kullanarak test fonksiyonunu tanımlarız. Bu test fonksiyonu, öğelerin çift sayı olup olmadığını kontrol eder. Dizi içinde en az bir çift sayı olduğu için some() methodu true değerini döndürür ve hasEvenNumber değişkenine atanır.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

JavaScript’te slice() methodu, bir dizinin belirli bir kısmını yeni bir dizi olarak döndürür. Bu method, başlangıç ve bitiş indeksleri arasındaki öğeleri seçerek orijinal diziyi değiştirmeden keser.

Syntax (Sözdizimi)

array.slice(startIndex, endIndex)

Parametre

• startIndex (opsiyonel): Kesilecek kısmın başlangıç indeksi. Bu indeksten itibaren (dahil) öğeler kesilir. Negatif bir değer verilirse, dizinin sonundan geriye doğru indekslenir (-1 son öğeyi temsil eder).
• endIndex (opsiyonel): Kesilecek kısmın bitiş indeksi. Bu indekse kadar (hariç) öğeler kesilir. Negatif bir değer verilirse, dizinin sonundan geriye doğru indekslenir (-1 son öğeyi temsil eder).

Dönüş Değeri

• Kesilen öğelerden oluşan yeni bir dizi.

Örnekler

1. Dizi üzerinde belirli bir aralığı kesme:

const fruits = ['apple', 'banana', 'orange', 'kiwi', 'mango'];
const slicedFruits = fruits.slice(1, 4);

console.log(slicedFruits);   // ['banana', 'orange', 'kiwi']

Yukarıdaki örnekte, slice() methodu kullanılarak fruits dizisinin 1. indeksinden (dahil) 4. indeksine kadar (hariç) olan öğeler kesilir ve bu öğelerden oluşan yeni bir dizi olan slicedFruits oluşturulur. Sonuç olarak, slicedFruits dizisi ['banana', 'orange', 'kiwi'] şeklinde oluşturulur.

2. Başlangıç indeksi belirtilmeden kesme:

const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(2);

console.log(slicedNumbers);   // [3, 4, 5]

Yukarıdaki örnekte, slice() methodu kullanılarak numbers dizisinin 2. indeksinden başlayarak (dahil) tüm öğeler kesilir ve bu öğelerden oluşan yeni bir dizi olan slicedNumbers oluşturulur. Başlangıç indeksi belirtilmediği için 2. indeks (3. öğe) dahil olacak şekilde tüm öğeler kesilir. Sonuç olarak, slicedNumbers dizisi [3, 4, 5] şeklinde oluşturulur.

3. Negatif indekslerle kesme:

const alphabets = ['A', 'B', 'C', 'D', 'E'];
const slicedAlphabets = alphabets.slice(-3, -1);

console.log(slicedAlphabets);   // ['C', 'D']

Yukarıdaki örnekte, slice() methodu kullanılarak alphabets dizisinin son 3 öğesi (indeks -3'den itibaren) ile son 1 öğesi (indeks -1 hariç) arasındaki öğeler kesilir ve bu öğelerden oluşan yeni bir dizi olan slicedAlphabets oluşturulur. Sonuç olarak, slicedAlphabets dizisi ['C', 'D'] şeklinde oluşturulur.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

JavaScript’te shift() methodu, bir diziden ilk öğeyi çıkarır (kaldırır) ve bu öğeyi döndürür. Bu işlem sonucunda dizinin uzunluğu bir azalır ve diğer öğeler sola kayar.

Syntax (Sözdizimi)

array.shift()

Parametre

• Bu methodun parametresi yoktur.

Dönüş Değeri

• Kaldırılan (çıkarılan) öğe.

Örnekler

1. Basit bir dizi üzerinde shift() kullanımı:

const colors = ['red', 'green', 'blue'];
const removedColor = colors.shift();

console.log(colors);        // ['green', 'blue']
console.log(removedColor);  // 'red'

Yukarıdaki örnekte, shift() methodu kullanılarak colors dizisinin ilk öğesi ('red') kaldırılır ve bu öğe removedColor değişkenine atanır. Dizi üzerinde yapılan değişiklik sonucunda colors dizisi, 'red' öğesinin kaldırılmasıyla ['green', 'blue'] şeklinde güncellenir. removedColor değişkeni ise kaldırılan öğe ('red') değerini içerir.

2. Boş bir dizi üzerinde shift() kullanımı:

const emptyArray = [];
const removedItem = emptyArray.shift();

console.log(emptyArray);   // []
console.log(removedItem);  // undefined

Yukarıdaki örnekte, shift() methodu kullanılarak boş bir dizi üzerinde işlem yapılır. Çünkü dizi boş olduğu için herhangi bir öğe kaldırılamaz. Bu durumda, shift() methodu undefined değerini döndürür ve dizi üzerinde herhangi bir değişiklik yapmaz.

3. Dizi üzerindeki öğeleri tek tek kaldırma:

const numbers = [1, 2, 3, 4, 5];
while (numbers.length > 0) {
  const removedNumber = numbers.shift();
  console.log(removedNumber);
}

console.log(numbers);   // []

Yukarıdaki örnekte, shift() methodu döngü içinde kullanılarak numbers dizisinin öğeleri tek tek kaldırılır ve ekrana yazdırılır. Döngü, dizi boşalana kadar (numbers.length > 0 koşulu sağlandığı sürece) devam eder. Sonuç olarak, öğeler sırasıyla kaldırılarak ekrana yazdırılır ve numbers dizisi boş bir dizi haline gelir ([]).

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.

JavaScript’te reverse() methodu, bir dizinin öğelerini yerinde tersine çevirir. Bu method, dizinin ilk öğesini sona, ikinci öğesini sondan bir önceki sıraya ve böylece devam ederek dizinin tamamını tersine çevirir.

Syntax (Sözdizimi)

array.reverse()

Parametre

• Bu methodun parametresi yoktur.

Dönüş Değeri

• Tersine çevrilmiş dizi.

Örnekler

1. Basit bir dizi üzerinde reverse() kullanımı:

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]

Yukarıdaki örnekte, reverse() methodu kullanılarak numbers dizisinin öğeleri tersine çevrilir. Dizi üzerinde yapılan değişiklik sonucunda numbers dizisi, [5, 4, 3, 2, 1] şeklinde tersine çevrilmiş hali alır.

2. String dizisini tersine çevirme:

const fruits = ['apple', 'banana', 'orange'];
fruits.reverse();

console.log(fruits);   // ['orange', 'banana', 'apple']

Yukarıdaki örnekte, reverse() methodu kullanılarak fruits dizisinin öğeleri tersine çevrilir. Dizi üzerinde yapılan değişiklik sonucunda fruits dizisi, ['orange', 'banana', 'apple'] şeklinde tersine çevrilmiş hali alır.

3. Tersine çevrilen diziyi başka bir değişkene atama:

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = numbers.reverse();

console.log(reversedNumbers);   // [5, 4, 3, 2, 1]

Yukarıdaki örnekte, reverse() methodu kullanılarak numbers dizisinin öğeleri tersine çevrilir ve bu tersine çevrilmiş dizi reversedNumbers değişkenine atanır. reversedNumbers değişkeni, [5, 4, 3, 2, 1] şeklindeki tersine çevrilmiş diziye referans yapar.

Diğer JavaScript Array Method’larına buradan ulaşabilirsiniz.