JavaScript: основи мови, React Native та мобільна розробка

Що таке JavaScript?

JavaScript (JS) — мова програмування високого рівня з динамічною типізацією, прототипним успадкуванням та функціями як об'єктами першого класу. Створена Бренданом Айхом у 1995 році за 10 днів. Є однією з трьох основних мов веб-технологій (HTML, CSS, JS) та основою для серверної платформи Node.js (2009), яка дозволила JS вийти за межі браузера.

У мобільній розробці JavaScript використовується в трьох парадигмах: нативна компіляція (React Native із Hermes/JSC), WebView-контейнери (Ionic, Cordova) та серверний JS (Node.js + Express для бекенду мобільних застосунків). React Native — домінуюча технологія: за даними Statista (2025), 38% крос-платформних проєктів використовують React Native, поступаючись лише Flutter (46%).

Ключова особливість JavaScript — однопотокова модель виконання з неблокуючим введенням-виведенням. Event loop дозволяє обробляти тисячі асинхронних операцій в одному потоці без створення потоків ОС. Це робить JS ефективним для I/O-навантажених застосунків (мережеві запити, робота з БД), але вимагає обережності при CPU-інтенсивних обчисленнях.

Стандарти JavaScript: ES5, ES6, ES2025

Стандарт ECMAScript (ES) визначає специфікацію JavaScript. ES6 (2015) ввів let/const, стрілкові функції, класи, модулі, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Сучасні двигуни Hermes (React Native) та V8 (Node.js) підтримують ES2022+. React Native Hermes підтримує ES2020+ з окремими обмеженнями на Proxy та Symbol.

Синтаксис JavaScript: типи, функції та прототипи

Синтаксис JavaScript — C-подібний, динамічно типізований. Тип змінної визначається значенням і може змінюватися в рантаймі. let та const (ES6) замінили var для блочної області видимості. Примітивні типи: string, number, boolean, null, undefined, symbol, bigint. Все інше — об'єкт (object, array, function, date, regexp).

Функції як об'єкти першого класу

JavaScript — мова з функціями вищого порядку. Функції можна присвоювати змінним, передавати як аргументи, повертати з інших функцій. Стрілкові функції (=>) не мають власного this — вони успадковують this від зовнішнього контексту. Замикання (closure) — функція, що запам'ятовує змінні з області видимості, де вона була створена.

// Типи даних та функції в JavaScript
// Примітивні типи
const name = 'React Native';
let version = 0.71;
var isActive = true; // застарілий var

// Об'єкти та масиви
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Функція вищого порядку
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Замикання (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// Spread оператор для копіювання об'єктів
const newApp = { ...app, version: 16 };

Spread оператор ... створює поверхневу копію об'єкта. Деструктуризація (const { platform, version } = app) витягує поля в змінні. Стрілкова функція в filterByVersion пишеться коротше, ніж function-вираз, і не створює власний this — це критично в React Native компонентах, де this посилається на клас компонента.

Прототипне успадкування

JavaScript використовує прототипне успадкування, а не класове як Java чи C#. Класи (ES6) — синтаксичний цукор поверх прототипів. Кожен об'єкт має внутрішнє посилання [[Prototype]] на інший об'єкт. При зверненні до властивості, якої немає в об'єкті, JS шукає її в ланцюжку прототипів. Класовий синтаксис (extends, super) робить код читабельнішим, але під капотом залишаються прототипи.

// Класи в JavaScript — синтаксичний цукор
class PlatformService {
  // Приватне поле (ES2022)
  #apiKey;

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

  // Статичний метод
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

  // Геттер
  get info() {
    return `${this.name} SDK`;
  }

  // Асинхронний метод
  async initialize() {
    return await this.#validateKey();
  }

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

// Успадкування
class AndroidService extends PlatformService {
  constructor(apiKey) {
    super('Android', apiKey);
  }
}

Приватні поля #apiKey (ES2022) забезпечують справжню інкапсуляцію, недоступну з _underscore-умовностями. Статичний метод getPlatforms належить класу, а не екземпляру. Геттер info обчислюється при зверненні. async/await робить асинхронний код лінійним. React Native Hermes підтримує приватні поля з версії 0.71.

Асинхронність у JavaScript: Event Loop та Promise

Асинхронність JavaScript заснована на event loop — нескінченному циклі, який перевіряє стек викликів (call stack) та черги завдань. Call stack — синхронний код, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop бере завдання з microtask спочатку, потім із macrotask. Блокування call stack (нескінченний цикл) зупиняє весь UI.

Promise — об'єкт, що представляє майбутнє значення. Проміс може бути pending (очікування), fulfilled (успіх), rejected (помилка). Ланцюжок .then().catch().finally() обробляє асинхронний результат. async/await (ES8) — синтаксичний цукор: функція async повертає Promise, await призупиняє виконання до розв'язання промісу, не блокуючи потік.

// Асинхронне завантаження даних у React Native
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:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

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

  if (loading) return <ActivityIndicator />;

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

Хук useEffect з async-функцією fetchUser виконує HTTP-запит при монтуванні компонента. Прапорець cancelled запобігає setState після демонтування — поширена проблема React Native. Optional Chaining user?.name та Nullish Coalescing ?? обробляють undefined без помилок. ActivityIndicator відображається під час завантаження — асинхронний патерн, знайомий кожному JS-розробнику.

React Native: JavaScript на мобільних платформах

React Native — фреймворк від Meta (Facebook) для створення нативних мобільних застосунків на JavaScript. На відміну від WebView-підходу, React Native рендерить справжні нативні компоненти (UIView для iOS, ViewGroup для Android). JS-код виконується в окремому потоці (Hermes або JSC) і спілкується з нативним UI-потоком через Bridge (стара архітектура) або JSI (нова архітектура Fabric).

Архітектура React Native

React Native складається з JS-потоку (ваш код), нативного потоку (UI) та Bridge/JSI для їх взаємодії. У старій архітектурі (Bridge) JSON-повідомлення серіалізуються та передаються асинхронно — це створює затримки при швидких анімаціях. Нова архітектура Fabric (React Native 0.68+) використовує JSI (JavaScript Interface) — пряму взаємодію JS із C++ об'єктами без серіалізації.

// Компонент React Native з нативним API
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 демонструє роботу з нативним API геолокації. Platform.OS розрізняє Android та iOS. PermissionsAndroid.request — нативний діалог дозволів Android. Geolocation.getCurrentPosition — модуль @react-native-community/geolocation, що підключається через npm. React Native надає JS-інтерфейси для камери, Bluetooth, акселерометра та інших датчиків.

Ionic та Cordova: WebView-контейнери

Ionic — фреймворк для гібридних мобільних застосунків, що використовує WebView для рендерингу HTML/CSS/JS. На відміну від React Native, Ionic не створює нативні компоненти — застосунок працює всередині веб-контейнера (WebView) на iOS (WKWebView) та Android (Android WebView). Це дає 100% повторне використання веб-коду, але обмежує продуктивність складних анімацій.

Apache Cordova — основа Ionic, що забезпечує доступ до нативних API через JavaScript-плагіни. Камера, GPS, контакти, файлова система — все доступно через cordova-plugin-*. Ionic 7+ використовує Capacitor — наступник Cordova з кращою продуктивністю, підтримкою ESM та прямим доступом до iOS/Android SDK через Swift та Kotlin.

Інструменти JavaScript розробника

Інструменти JS-розробника для мобільних застосунків включають Node.js, npm/yarn, Expo, React Native CLI та Metro bundler. Node.js — середовище виконання JS поза браузером, основа екосистеми. npm (Node Package Manager) — менеджер пакетів із 2+ мільйонами бібліотек. npx — утиліта для запуску npm-пакетів без встановлення.

Екосистема інструментів

Expo — надбудова над React Native, що спрощує розробку: не вимагає Xcode/Android Studio для початку, надає Managed Workflow із попередньо встановленими бібліотеками. Expo Application Services (EAS) — збірка та публікація в хмарі. Metro — бандлер React Native, що збирає JS-код та залежності в один файл. Hermes — JS-двигун від Meta, оптимізований для мобільних пристроїв із AOT-компіляцією.

// package.json — конфігурація React Native проєкту
{
  "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 — основа будь-якого JS-проєкту. Скрипти start, android, ios запускають Metro бандлер та збірку. Залежності розділені на dependencies (рантайм) та devDependencies (тести, лінтери). React Navigation — стандартний роутер. Jest — фреймворк для тестування. ESLint — статичний аналізатор, що перевіряє стиль коду та потенційні помилки.