JavaScript: til asoslari, React Native va mobil ilova ishlab chiqish

JavaScript nima?

JavaScript (JS) — dinamik tiplash, prototip meros va birinchi darajali ob'yektlar sifatida funksiyalarga ega yuqori darajadagi dasturlash tilidir. Brendan Eyx tomonidan 1995-yilda 10 kunda yaratilgan. Veb texnologiyalarining uchta asosiy tilidan biri (HTML, CSS, JS) va JS ni brauzerdan tashqariga chiqargan Node.js (2009) server platformasining asosidir.

Mobil ishlab chiqishda JavaScript uchta paradigmada qo'llaniladi: native kompilyatsiya (Hermes/JSC bilan React Native), WebView konteynerlari (Ionic, Cordova) va server JS (mobil ilovalar backend uchun Node.js + Express). React Native — dominant texnologiya: Statista (2025) ma'lumotlariga ko'ra, kross-platforma loyihalarining 38% React Native dan foydalanadi, faqat Flutter dan (46%) ortda qoladi.

JavaScript ning asosiy xususiyati — bloklamaydigan kiritish-chiqarish bilan bir oqimli bajarish modelidir. Event loop minglab asinxron operatsiyalarni OT oqimlarini yaratmasdan bir oqimda qayta ishlashga imkon beradi. Bu JS ni I/O yuklangan ilovalar (tarmoq so'rovlari, ma'lumotlar bazasi bilan ishlash) uchun samarali qiladi, lekin CPU intensiv hisoblashlarda ehtiyot bo'lishni talab qiladi.

JavaScript standartlari: ES5, ES6, ES2025

ECMAScript (ES) standarti JavaScript spetsifikatsiyasini belgilaydi. ES6 (2015) let/const, o'q funksiyalari, sinflar, modullar, Promise ni taqdim etdi. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Zamonaviy Hermes (React Native) va V8 (Node.js) dvigatellari ES2022+ ni qo'llab-quvvatlaydi. React Native Hermes Proxy va Symbol bo'yicha alohida cheklovlar bilan ES2020+ ni qo'llab-quvvatlaydi.

JavaScript sintaksisi: turlar, funksiyalar va prototiplar

JavaScript sintaksisi — C ga o'xshash, dinamik tipli. O'zgaruvchining turi qiymat bilan aniqlanadi va runtime da o'zgarishi mumkin. let va const (ES6) blok darajasidagi ko'rinish maydoni uchun var ni almashtirdi. Primitiv turlar: string, number, boolean, null, undefined, symbol, bigint. Qolgan hamma narsa — ob'yekt (object, array, function, date, regexp).

Birinchi darajali ob'yektlar sifatida funksiyalar

JavaScript — yuqori darajali funksiyalarga ega til. Funksiyalar o'zgaruvchilarga tayinlanishi, argument sifatida uzatilishi, boshqa funksiyalardan qaytarilishi mumkin. O'q funksiyalari (=>) o'z this iga ega emas — ular this ni tashqi kontekstdan meros qilib oladi. Klousur (closure) — yaratilgan ko'rinish maydonidagi o'zgaruvchilarni eslab qoladigan funksiya.

// JavaScript da ma'lumot turlari va funksiyalar
// Primitiv turlar
const name = 'React Native';
let version = 0.71;
var isActive = true; // eskirgan var

// Ob'yektlar va massivlar
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Yuqori darajali 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

// Ob'yektlarni nusxalash uchun spread operatori
const newApp = { ...app, version: 16 };

Spread operatori ... ob'yektning sayoz nusxasini yaratadi. Destrukturizatsiya (const { platform, version } = app) maydonlarni o'zgaruvchilarga chiqaradi. filterByVersion dagi o'q funksiyasi function ifodasidan qisqaroq va o'z this ini yaratmaydi — bu this komponent sinfiga murojaat qiladigan React Native komponentlarida juda muhimdir.

Prototip merosi

JavaScript Java yoki C# kabi sinf asosida emas, prototip merosidan foydalanadi. Sinf (ES6) — prototiplar ustidagi sintaktik shakardir. Har bir ob'yekt boshqa ob'yektga ichki [[Prototype]] havolasiga ega. Ob'yektda mavjud bo'lmagan xususiyatga murojaat qilganda, JS uni prototip zanjirida qidiradi. Sinf sintaksisi (extends, super) kodni o'qilishi osonroq qiladi, lekin tagida prototiplar qoladi.

// JavaScript da sinflar — sintaktik shakar
class PlatformService {
  // Maxsus maydon (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;
  }
}

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

Maxsus maydonlar #apiKey (ES2022) _underscore konvensiyalari bilan erishib bo'lmaydigan haqiqiy inkapsulyatsiyani ta'minlaydi. Statik metod getPlatforms sinfga tegishli, nusxaga emas. Getter info murojaat qilinganda hisoblanadi. async/await asinxron kodni chiziqli qiladi. React Native Hermes 0.71 versiyasidan maxsus maydonlarni qo'llab-quvvatlaydi.

JavaScript da asinxronlik: Event Loop va Promise

JavaScript asinxronligi event loop — chaqiruv steki (call stack) va vazifalar navbatlarini tekshiradigan cheksiz siklga asoslanadi. Call stack — sinxron kod, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop vazifalarni avval microtask dan, keyin macrotask dan oladi. Call stack ning bloklanishi (cheksiz sikl) butun UI ni to'xtatadi.

Promise — kelajakdagi qiymatni ifodalovchi ob'yektdir. Promise pending (kutish), fulfilled (muvaffaqiyat), rejected (xato) bo'lishi mumkin. .then().catch().finally() zanjiri asinxron natijani qayta ishlaydi. async/await (ES8) — sintaktik shakar: async funksiyasi Promise qaytaradi, await oqimni bloklamasdan promise haligacha kutadi.

// React Native da asinxron ma'lumot yuklash
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 huki async fetchUser funksiyasi bilan komponent mount qilinganda HTTP so'rovini bajaradi. cancelled bayrog'i mountdan keyin setState ni oldini oladi — React Native da keng tarqalgan muammo. Optional Chaining user?.name va Nullish Coalescing ?? xatosiz undefined ni boshqaradi. ActivityIndicator yuklash vaqtida ko'rsatiladi — har bir JS dasturchisiga tanish bo'lgan asinxron naqsh.

React Native: mobil platformalarda JavaScript

React Native — Meta (Facebook) tomonidan JavaScript da native mobil ilovalar yaratish uchun freymvorkdir. WebView yondashuvidan farqli o'laroq, React Native haqiqiy native komponentlarni (iOS uchun UIView, Android uchun ViewGroup) renderlaydi. JS kodi alohida oqimda (Hermes yoki JSC) bajariladi va Bridge (eski arxitektura) yoki JSI (yangi Fabric arxitekturasi) orqali native UI oqimi bilan bog'lanadi.

React Native arxitekturasi

React Native JS oqimi (sizning kodingiz), native oqim (UI) va ularning o'zaro aloqasi uchun Bridge/JSI dan iborat. Eski arxitekturada (Bridge) JSON xabarlari seriyalashtiriladi va asinxron uzatiladi — bu tez animatsiyalarda kechikishlar yaratadi. Yangi Fabric arxitekturasi (React Native 0.68+) JSI (JavaScript Interface) — seriyalashtirishsiz JS ning C++ ob'yektlari bilan to'g'ridan-to'g'ri o'zaro aloqasidan foydalanadi.

// Native API bilan 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 geolokatsiya API si bilan ishlashni namoyish etadi. Platform.OS Android va iOS ni farqlaydi. PermissionsAndroid.request — Android ning native ruxsat dialogidir. Geolocation.getCurrentPosition — npm orqali ulanadigan @react-native-community/geolocation moduli. React Native kamera, Bluetooth, akselerometr va boshqa sensorlar uchun JS interfeyslarini taqdim etadi.

Ionic va Cordova: WebView konteynerlari

Ionic — HTML/CSS/JS ni renderlash uchun WebView dan foydalanadigan gibrid mobil ilovalar freymvorkidir. React Native dan farqli o'laroq, Ionic native komponentlar yaratmaydi — ilova iOS da (WKWebView) va Android da (Android WebView) veb konteyner ichida ishlaydi. Bu veb kodning 100% qayta ishlatilishini ta'minlaydi, lekin murakkab animatsiyalar samaradorligini cheklaydi.

Apache Cordova — JavaScript plaginlari orqali native API larga kirishni ta'minlaydigan Ionic ning asosidir. Kamera, GPS, kontaktlar, fayl tizimi — hamma narsa cordova-plugin-* orqali mavjud. Ionic 7+ yaxshiroq samaradorlik, ESM qo'llab-quvvatlashi va Swift hamda Kotlin orqali iOS/Android SDK ga to'g'ridan-to'g'ri kirish bilan Cordova ning vorisi Capacitor dan foydalanadi.

JavaScript dasturchi vositalari

JS dasturchi vositalari mobil ilovalar uchun Node.js, npm/yarn, Expo, React Native CLI va Metro bundlerni o'z ichiga oladi. Node.js — brauzerdan tashqarida JS bajarish muhiti, ekotizim asosidir. npm (Node Package Manager) — 2+ million kutubxonaga ega paket menejeri. npx — npm paketlarini o'rnatmasdan ishga tushirish vositasi.

Vositalar ekotizimi

Expo — ishlab chiqishni soddalashtiradigan React Native ustidagi qo'shimcha: boshlash uchun Xcode/Android Studio talab qilmaydi, oldindan o'rnatilgan kutubxonalar bilan Managed Workflow ni ta'minlaydi. Expo Application Services (EAS) — bulutda qurish va nashr qilish. Metro — JS kodini va bog'liqliklarni bitta faylda to'playdigan React Native bundleri. Hermes — AOT kompilyatsiyasi bilan mobil qurilmalar uchun optimallashtirilgan Meta dan JS dvigateli.

// package.json — React Native loyihasi konfiguratsiyasi
{
  "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 fayli — har qanday JS loyihasining asosidir. start, android, ios skriptlari Metro bundler va qurishni ishga tushiradi. Bog'liqliklar dependencies (runtime) va devDependencies (testlar, linterlar) ga bo'linadi. React Navigation — standart marshrutizator. Jest — test uchun freymvork. ESLint — kod uslubini va potentsial xatolarni tekshiradigan statik analizator.