JavaScript: dilin temelleri, React Native ve mobil geliştirme

JavaScript nedir?

JavaScript (JS), dinamik tipleme, prototip tabanlı kalıtım ve birinci sınıf nesneler olarak fonksiyonlara sahip üst düzey bir programlama dilidir. Brendan Eich tarafından 1995 yılında 10 günde oluşturuldu. Web teknolojilerinin (HTML, CSS, JS) üç ana dilinden biridir ve JS'nin tarayıcının dışına çıkmasını sağlayan Node.js sunucu platformunun (2009) temelidir.

Mobil geliştirmede, JavaScript üç paradigmada kullanılır: yerel derleme (Hermes/JSC ile React Native), WebView kapsayıcıları (Ionic, Cordova) ve sunucu tarafı JS (mobil uygulama arka uçları için Node.js + Express). React Native baskın teknolojidir: Statista'ya (2025) göre, çapraz platform projelerinin %38'i React Native kullanır ve yalnızca Flutter'dan (%46) sonra ikinci sıradadır.

JavaScript'in temel özelliği, engellemesiz G/Ç ile tek iş parçacıklı yürütme modelidir. Olay döngüsü, işletim sistemi iş parçacıkları oluşturmadan tek bir iş parçacığında binlerce asenkron işlemi işleyebilir. Bu, JS'yi G/Ç yoğunluklu uygulamalar (ağ istekleri, veritabanı işlemleri) için verimli kılar, ancak CPU yoğun hesaplamalarda dikkat gerektirir.

JavaScript Standartları: ES5, ES6, ES2025

ECMAScript (ES) standardı, JavaScript spesifikasyonunu tanımlar. ES6 (2015) let/const, ok fonksiyonları, sınıflar, modüller, Promise'i tanıttı. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Modern motorlar Hermes (React Native) ve V8 (Node.js), ES2022+'yı destekler. React Native Hermes, Proxy ve Symbol'de belirli sınırlamalarla ES2020+'yı destekler.

JavaScript Sözdizimi: türler, fonksiyonlar ve prototipler

JavaScript sözdizimi C benzeridir, dinamik olarak tiplendirilir. Değişkenin türü değere göre belirlenir ve çalışma zamanında değişebilir. let ve const (ES6), blok kapsamı için var'ın yerini aldı. İlkel türler: string, number, boolean, null, undefined, symbol, bigint. Geriye kalan her şey bir nesnedir (object, array, function, date, regexp).

Birinci Sınıf Nesneler Olarak Fonksiyonlar

JavaScript, yüksek dereceli fonksiyonlara sahip bir dildir. Fonksiyonlar değişkenlere atanabilir, argüman olarak geçirilebilir, diğer fonksiyonlardan döndürülebilir. Ok fonksiyonlarının (=>) kendi this'i yoktur — this'i dış bağlamdan miras alırlar. Kapanış (closure), oluşturulduğu kapsamdaki değişkenleri hatırlayan bir fonksiyondur.

// JavaScript'te veri türleri ve fonksiyonlar
// İlkel türler
const name = 'React Native';
let version = 0.71;
var isActive = true; // eski var

// Nesneler ve diziler
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

const items = ['Dart', 'Kotlin', 'Swift'];

// Yüksek dereceli fonksiyon
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Kapanış (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// Nesneleri kopyalamak için yayılma operatörü
const newApp = { ...app, version: 16 };

Yayılma operatörü ... bir nesnenin yüzeysel kopyasını oluşturur. Yapı bozma (const { platform, version } = app) alanları değişkenlere çıkarır. filterByVersion'daki ok fonksiyonu, function ifadesinden daha kısadır ve kendi this'ini oluşturmaz — bu, this'in bileşen sınıfına atıfta bulunduğu React Native bileşenlerinde kritiktir.

Prototip Tabanlı Kalıtım

JavaScript, Java veya C# gibi klasik değil, prototip tabanlı kalıtım kullanır. Sınıflar (ES6), prototipler üzerinde sözdizimsel şekerdir. Her nesnenin başka bir nesneye dahili [[Prototype]] referansı vardır. Nesnede olmayan bir özelliğe erişirken, JS onu prototip zincirinde arar. Sınıf sözdizimi (extends, super) kodu daha okunabilir yapar, ancak perde arkasında prototipler kalır.

// JavaScript'te sınıflar — sözdizimsel şeker
class PlatformService {
  // Özel alan (ES2022)
  #apiKey;

  constructor(name, apiKey) {
    this.name = name;
    this.#apiKey = apiKey;
  }

  // Statik yöntem
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // Getter
  get info() {
    return `${this.name} SDK`;
  }

  // Asenkron yöntem
  async initialize() {
    return await this.#validateKey();
  }

  #validateKey() {
    return this.#apiKey.length > 10;
  }
}

// Kalıtım
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Özel alanlar #apiKey (ES2022), _alt çizgi kurallarıyla mümkün olmayan gerçek kapsülleme sağlar. Statik yöntem getPlatforms, örneğe değil sınıfa aittir. Getter info, erişimde hesaplanır. async/await, asenkron kodu doğrusal hale getirir. React Native Hermes, sürüm 0.71'den itibaren özel alanları destekler.

JavaScript'te Asenkronluk: Event Loop ve Promise

JavaScript asenkronluğu, olay döngüsüne dayanır — çağrı yığınını (call stack) ve görev kuyruklarını kontrol eden sonsuz bir döngü. Call stack senkron kodu işler, microtask kuyruğu Promise.then/catch/finally'yi işler, macrotask kuyruğu setTimeout, setInterval, G/Ç'yi işler. Olay döngüsü önce microtask'ten, sonra macrotask'tan görev alır. Call stack'i bloke etmek (sonsuz döngü) tüm UI'yi durdurur.

Promise, gelecekteki bir değeri temsil eden bir nesnedir. Bir promise, pending (beklemede), fulfilled (yerine getirilmiş) veya rejected (reddedilmiş) olabilir. .then().catch().finally() zinciri asenkron sonucu işler. async/await (ES8) sözdizimsel şekerdir: async fonksiyonu Promise döndürür, await iş parçacığını bloke etmeden promise çözülene kadar yürütmeyi duraklatır.

// React Native'de asenkron veri yükleme
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    async function fetchUser() {
      try {
        const response = await fetch(
          `https://api.example.com/users/${userId}`
        );

        if (!response.ok) {
          throw new Error('Network error');
        }

        const data = await response.json();

        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error('Getirme başarısız:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

    return () => { cancelled = true; };
  }, [userId]);

  if (loading) return <ActivityIndicator />;

  return (
    <View>
      <Text>{user?.name ?? 'Unknown'}</Text>
    </View>
  );
}

useEffect kancası, async fetchUser fonksiyonuyla bileşen monte edildiğinde HTTP isteği yapar. cancelled bayrağı, monte etme kaldırıldıktan sonra setState'i önler — yaygın bir React Native sorunu. Optional Chaining user?.name ve Nullish Coalescing ??, hata olmadan undefined'ı işler. ActivityIndicator yükleme sırasında görüntülenir — her JS geliştiricisine tanıdık gelen bir asenkron desen.

React Native: Mobil Platformlarda JavaScript

React Native, JavaScript ile yerel mobil uygulamalar oluşturmak için Meta'dan (Facebook) bir framework'tür. WebView yaklaşımının aksine, React Native gerçek yerel bileşenleri (iOS için UIView, Android için ViewGroup) işler. JS kodu ayrı bir iş parçacığında (Hermes veya JSC) çalışır ve Bridge (eski mimari) veya JSI (yeni Fabric mimarisi) aracılığıyla yerel UI iş parçacığıyla iletişim kurar.

React Native Mimarisi

React Native, JS iş parçacığı (kodunuz), yerel iş parçacığı (UI) ve bunların etkileşimi için Bridge/JSI'den oluşur. Eski mimaride (Bridge), JSON mesajları serileştirilir ve asenkron olarak iletilir — bu, hızlı animasyonlar sırasında gecikmelere neden olur. Yeni Fabric mimarisi (React Native 0.68+), JSI'yi (JavaScript Interface) kullanır — serileştirme olmadan C++ nesneleriyle doğrudan JS etkileşimi.

// Yerel API ile React Native bileşeni
import React, { useState, useEffect } from 'react';
import {
  View, Text, TouchableOpacity, Platform,
  PermissionsAndroid, Alert
} from 'react-native';
import Geolocation from '@react-native-community/geolocation';

function LocationTracker() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    requestLocationPermission();
  }, []);

  async function requestLocationPermission() {
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied');
        return;
      }
    }
    getCurrentPosition();
  }

  function getCurrentPosition() {
    Geolocation.getCurrentPosition(
      pos => setLocation({
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
      }),
      error => Alert.alert('Error', error.message),
      { enableHighAccuracy: true, timeout: 15000 }
    );
  }

  return (
    <View>
      <Text>Lat: {location?.lat ?? 'N/A'}</Text>
      <Text>Lng: {location?.lng ?? 'N/A'}</Text>
      <TouchableOpacity onPress={getCurrentPosition}>
        <Text>Update Location</Text>
      </TouchableOpacity>
    </View>
  );
}

LocationTracker bileşeni, yerel konum API'siyle çalışmayı gösterir. Platform.OS, Android ve iOS'u ayırt eder. PermissionsAndroid.request, yerel Android izin diyalogudur. Geolocation.getCurrentPosition — @react-native-community/geolocation modülü, npm aracılığıyla kurulur. React Native, kamera, Bluetooth, ivmeölçer ve diğer sensörler için JS arayüzleri sağlar.

Ionic ve Cordova: WebView Kapsayıcıları

Ionic, HTML/CSS/JS'yi işlemek için WebView kullanan hibrit mobil uygulamalar için bir framework'tür. React Native'den farklı olarak Ionic, yerel bileşenler oluşturmaz — uygulama iOS (WKWebView) ve Android'de (Android WebView) bir web kapsayıcısının (WebView) içinde çalışır. Bu, web kodunun %100 yeniden kullanımını sağlar ancak karmaşık animasyonların performansını sınırlar.

Apache Cordova, Ionic'in temelidir ve JavaScript eklentileri aracılığıyla yerel API'lere erişim sağlar. Kamera, GPS, kişiler, dosya sistemi — her şey cordova-plugin-* aracılığıyla kullanılabilir. Ionic 7+, Capacitor'u kullanır — daha iyi performans, ESM desteği ve Swift ile Kotlin aracılığıyla iOS/Android SDK'ya doğrudan erişim sağlayan Cordova'nın halefi.

JavaScript Geliştirici Araçları

Mobil uygulamalar için JS geliştirici araçları, Node.js, npm/yarn, Expo, React Native CLI ve Metro paketleyiciyi içerir. Node.js, tarayıcı dışında bir JS çalışma zamanıdır, ekosistemin temelidir. npm (Node Package Manager), 2+ milyon kütüphane ile bir paket yöneticisidir. npx, kurulum olmadan npm paketlerini çalıştırmak için bir yardımcı programdır.

Araç Ekosistemi

Expo, React Native üzerinde geliştirmeyi basitleştiren bir katmandır: başlamak için Xcode/Android Studio gerektirmez, önceden yüklenmiş kütüphanelerle Managed Workflow sağlar. Expo Application Services (EAS) — bulutta derleme ve yayınlama. Metro, JS kodunu ve bağımlılıkları tek bir dosyada toplayan React Native paketleyicisidir. Hermes, AOT derlemesi ile mobil cihazlar için optimize edilmiş Meta'nın JS motorudur.

// package.json — React Native proje yapılandırması
{
  "name": "MyMobileApp",
  "version": "1.0.0",
  "scripts": {
    "start": "npx react-native start",
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "^0.73.0",
    "@react-navigation/native": "^6.1.0",
    "@react-native-community/geolocation": "^3.2.0"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0",
    "metro-react-native-babel-preset": "^0.77.0"
  }
}

package.json dosyası, herhangi bir JS projesinin temelidir. start, android, ios betikleri Metro paketleyiciyi ve derlemeyi başlatır. Bağımlılıklar, dependencies (çalışma zamanı) ve devDependencies (testler, lint'ler) olarak ayrılır. React Navigation standart yönlendiricidir. Jest bir test framework'üdür. ESLint, kod stilini ve potansiyel hataları kontrol eden statik bir analizördür.