JavaScript: dilin əsasları, React Native və mobil tətbiq inkişafı

JavaScript nədir?

JavaScript (JS) — dinamik tipləmə, prototip irsiliyi və birinci dərəcəli obyektlər kimi funksiyaları olan yüksək səviyyəli proqramlaşdırma dilidir. Brendan Eyx tərəfindən 1995-ci ildə 10 günə yaradılmışdır. Veb texnologiyalarının (HTML, CSS, JS) üç əsas dilindən biridir və JS-ni brauzerdən kənara çıxaran Node.js (2009) server platformasının əsasını təşkil edir.

Mobil inkişafda JavaScript üç paradiqmada istifadə olunur: native kompilasiya (Hermes/JSC ilə React Native), WebView konteynerləri (Ionic, Cordova) və server JS (mobil tətbiqlərin backend üçün Node.js + Express). React Native — dominant texnologiyadır: Statista (2025) məlumatlarına görə, kross-platformalı layihələrin 38%-i React Native istifadə edir, yalnız Flutter-dən (46%) geri qalır.

JavaScript-in əsas xüsusiyyəti — bloklanmayan giriş-çıxışla tək axınlı icra modelidir. Event loop əməliyyat sistemi axınları yaratmadan minlərlə asinxron əməliyyatı bir axında emal etməyə imkan verir. Bu JS-ni I/O yüklü tətbiqlər (şəbəkə sorğuları, verilənlər bazası ilə iş) üçün səmərəli edir, lakin CPU intensiv hesablamalarda ehtiyat tələb edir.

JavaScript standartları: ES5, ES6, ES2025

ECMAScript (ES) standartı JavaScript spesifikasiyasını müəyyən edir. ES6 (2015) let/const, ox funksiyaları, siniflər, modullar, Promise təqdim etdi. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Müasir Hermes (React Native) və V8 (Node.js) mühərrikləri ES2022+ dəstəkləyir. React Native Hermes Proxy və Symbol üzrə ayrıca məhdudiyyətlərlə ES2020+ dəstəkləyir.

JavaScript sintaksisi: tiplər, funksiyalar və prototiplər

JavaScript sintaksisi — C bənzəri, dinamik tipli. Dəyişənin tipi dəyərlə müəyyən edilir və runtime-də dəyişə bilər. let və const (ES6) blok səviyyəli görünmə sahəsi üçün var-ı əvəz etdi. Primitiv tiplər: string, number, boolean, null, undefined, symbol, bigint. Qalan hər şey — obyektdir (object, array, function, date, regexp).

Birinci dərəcəli obyektlər kimi funksiyalar

JavaScript — yüksək dərəcəli funksiyaları olan dildir. Funksiyalar dəyişənlərə təyin edilə, arqument kimi ötürülə, digər funksiyalardan qaytarıla bilər. Ox funksiyaları (=>) öz this-inə malik deyil — onlar this-i xarici kontekstdən miras alır. Klousur (closure) — yaradıldığı görünmə sahəsindən dəyişənləri xatırlayan funksiyadır.

// JavaScript-də məlumat tipləri və funksiyalar
// Primitiv tiplər
const name = 'React Native';
let version = 0.71;
var isActive = true; // köhnəlmiş var

// Obyektlər və massivlər
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Yüksək dərəcəli funksiya
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Klousur (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// Obyektlərin kopyalanması üçün spread operatoru
const newApp = { ...app, version: 16 };

Spread operatoru ... obyektin dayaz surətini yaradır. Destrukturizasiya (const { platform, version } = app) sahələri dəyişənlərə çıxarır. filterByVersion-də ox funksiyası function ifadəsindən daha qısadır və öz this-ini yaratmır — bu, this-in komponent sinfinə istinad etdiyi React Native komponentlərində kritikdir.

Prototip irsiliyi

JavaScript Java və ya C# kimi sinif əsaslı deyil, prototip irsiliyindən istifadə edir. Siniflər (ES6) — prototiplər üzərində sintaktik şəkərdir. Hər bir obyektin başqa bir obyektə daxili [[Prototype]] istinadı var. Obyektdə olmayan xassəyə müraciət edərkən, JS onu prototip zəncirində axtarır. Sinif sintaksisi (extends, super) kodu daha oxunaqlı edir, lakin altlıqda prototiplər qalır.

// JavaScript-də siniflər — sintaktik şəkər
class PlatformService {
  // Özəl sahə (ES2022)
  #apiKey;

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

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

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

  // Asinxron metod
  async initialize() {
    return await this.#validateKey();
  }

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

// İrsilik
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Özəl sahələr #apiKey (ES2022) _underscore konvensiyaları ilə əlçatmaz olan həqiqi inkapsulyasiyanı təmin edir. Statik metod getPlatforms sinfə aiddir, nüsxəyə deyil. Getter info müraciət zamanı hesablanır. async/await asinxron kodu xətti edir. React Native Hermes 0.71 versiyasından özəl sahələri dəstəkləyir.

JavaScript-də asinxronluq: Event Loop və Promise

JavaScript asinxronluğu event loop — çağırış stackini (call stack) və tapşırıq növbələrini yoxlayan sonsuz dövrə əsaslanır. Call stack — sinxron kod, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop tapşırıqları əvvəlcə microtask-dan, sonra macrotask-dan götürür. Call stack-in bloklanması (sonsuz dövrə) bütün UI-ni dayandırır.

Promise — gələcək dəyəri təmsil edən obyektdir. Promise pending (gözləmə), fulfilled (uğur), rejected (xəta) ola bilər. .then().catch().finally() zənciri asinxron nəticəni emal edir. async/await (ES8) — sintaktik şəkərdir: async funksiyası Promise qaytarır, await axını bloklamadan promise-in həllini gözləyir.

// React Native-də asinxron məlumat yükləmə
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('Fetch failed:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

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

  if (loading) return <ActivityIndicator />;

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

useEffect hook-u async fetchUser funksiyası ilə komponent montaj edilərkən HTTP sorğusu yerinə yetirir. cancelled bayrağı montajdan sonra setState-in qarşısını alır — React Native-də geniş yayılmış problemdir. Optional Chaining user?.name və Nullish Coalescing ?? xətasız undefined-i idarə edir. ActivityIndicator yükləmə zamanı göstərilir — hər bir JS tərtibatçısına tanış olan asinxron nümunə.

React Native: mobil platformalarda JavaScript

React Native — Meta (Facebook) tərəfindən JavaScript-də native mobil tətbiqlər yaratmaq üçün freymvorkdur. WebView yanaşmasından fərqli olaraq, React Native həqiqi native komponentləri (iOS üçün UIView, Android üçün ViewGroup) render edir. JS kodu ayrı bir axında (Hermes və ya JSC) icra olunur və Bridge (köhnə arxitektura) və ya JSI (yeni Fabric arxitekturası) vasitəsilə native UI axını ilə əlaqə qurur.

React Native arxitekturası

React Native JS axını (sizin kod), native axın (UI) və onların qarşılıqlı əlaqəsi üçün Bridge/JSI-dən ibarətdir. Köhnə arxitekturada (Bridge) JSON mesajları seriyalaşdırılır və asinxron ötürülür — bu, sürətli animasiyalarda gecikmələr yaradır. Yeni Fabric arxitekturası (React Native 0.68+) JSI (JavaScript Interface) — seriyalaşdırmasız JS-in C++ obyektləri ilə birbaşa qarşılıqlı əlaqəsini istifadə edir.

// Native API ilə React Native komponenti
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 komponenti native geolokasiya API-si ilə işi nümayiş etdirir. Platform.OS Android və iOS-u fərqləndirir. PermissionsAndroid.request — Android-in native icazə dialoqudur. Geolocation.getCurrentPosition — npm vasitəsilə qoşulan @react-native-community/geolocation moduludur. React Native kamera, Bluetooth, akselerometr və digər sensorlar üçün JS interfeysləri təqdim edir.

Ionic və Cordova: WebView konteynerləri

Ionic — HTML/CSS/JS-nin render edilməsi üçün WebView istifadə edən hibrid mobil tətbiqlər freymvorkudur. React Native-dən fərqli olaraq, Ionic native komponentlər yaratmır — tətbiq iOS-da (WKWebView) və Android-də (Android WebView) veb konteyner daxilində işləyir. Bu, veb kodun 100% təkrar istifadəsini təmin edir, lakin mürəkkəb animasiyaların performansını məhdudlaşdırır.

Apache Cordova — JavaScript plaginləri vasitəsilə native API-lərə girişi təmin edən Ionic-in əsasıdır. Kamera, GPS, kontaktlar, fayl sistemi — hər şey cordova-plugin-* vasitəsilə əlçatandır. Ionic 7+ daha yaxşı performans, ESM dəstəyi və Swift və Kotlin vasitəsilə iOS/Android SDK-ya birbaşa giriş ilə Cordova-nın varisi Capacitor-dan istifadə edir.

JavaScript tərtibatçı alətləri

JS tərtibatçı alətləri mobil tətbiqlər üçün Node.js, npm/yarn, Expo, React Native CLI və Metro bundler daxildir. Node.js — brauzerdən kənarda JS icra mühiti, ekosistemin əsasıdır. npm (Node Package Manager) — 2+ milyon kitabxanası olan paket meneceridir. npx — npm paketlərini quraşdırmadan işə salmaq üçün alətdir.

Alət ekosistemi

Expo — inkişafı asanlaşdıran React Native üzərində əlavədir: başlamaq üçün Xcode/Android Studio tələb etmir, əvvəlcədən quraşdırılmış kitabxanalarla Managed Workflow təmin edir. Expo Application Services (EAS) — buludda qurma və nəşr. Metro — JS kodunu və asılılıqları bir faylda toplayan React Native bündleridir. Hermes — AOT kompilasiyası ilə mobil cihazlar üçün optimallaşdırılmış Meta-dan JS mühərrikidir.

// package.json — React Native layihəsinin konfiqurasiyası
{
  "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 faylı — hər bir JS layihəsinin əsasıdır. start, android, ios skriptləri Metro bündlerini və qurmanı işə salır. Asılılıqlar dependencies (runtime) və devDependencies (testlər, linterlər) bölünür. React Navigation — standart marşrutlaşdırıcıdır. Jest — test üçün freymvorkdur. ESLint — kod stilini və potensial səhvləri yoxlayan statik analizatordur.