JavaScript: مبانی زبان، React Native و توسعه اپلیکیشن موبایل

JavaScript چیست؟

JavaScript (JS) — زبان برنامه‌نویسی سطح بالا با تایپ پویا، وراثت پروتوتایپی و توابع به عنوان اشیاء درجه یک. توسط برندان ایچ در سال ۱۹۹۵ در ۱۰ روز ایجاد شد. یکی از سه زبان اصلی فناوری‌های وب (HTML، CSS، JS) و پایه پلتفرم سروری Node.js (2009) است که به JS اجازه خروج از مرورگر را داد.

در توسعه موبایل، JavaScript در سه پارادایم استفاده می‌شود: کامپایل بومی (React Native با Hermes/JSC)، کانتینرهای WebView (Ionic، Cordova) و JS سروری (Node.js + Express برای بک‌اند اپلیکیشن‌های موبایل). React Native — فناوری غالب: طبق آمار Statista (2025)، ۳۸٪ پروژه‌های کراس‌پلتفرم از 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'];
  }

  // Getter
  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 متعلق به کلاس است، نه نمونه. getter info هنگام دسترسی محاسبه می‌شود. async/await کد ناهم‌زمان را خطی می‌کند. React Native Hermes از فیلدهای خصوصی از نسخه ۰٫۷۱ پشتیبانی می‌کند.

ناهم‌زمانی در 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 — شیء نمایانگر یک مقدار آینده. Promise می‌تواند pending (در انتظار)، fulfilled (موفقیت)، rejected (خطا) باشد. زنجیره .then().catch().finally() نتیجه ناهم‌زمان را پردازش می‌کند. async/await (ES8) — شکر نحوی: تابع async یک Promise برمی‌گرداند، await اجرا را تا حل شدن promise متوقف می‌کند بدون اینکه رشته را مسدود کند.

// بارگذاری ناهم‌زمان داده در 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 failed:', error);
          setLoading(false);
        }
      }
    }

    fetchUser();

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

  if (loading) return <ActivityIndicator />;

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

هوک useEffect با تابع async fetchUser هنگام mount کامپوننت درخواست HTTP انجام می‌دهد. پرچم cancelled از setState پس از unmount جلوگیری می‌کند — مشکل رایج در 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) اجرا می‌شود و از طریق Bridge (معماری قدیمی) یا JSI (معماری جدید Fabric) با رشته UI بومی ارتباط برقرار می‌کند.

معماری 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) کار می‌کند. این ۱۰۰٪ استفاده مجدد از کد وب را فراهم می‌کند، اما عملکرد انیمیشن‌های پیچیده را محدود می‌کند.

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) — مدیر بسته با ۲+ میلیون کتابخانه. 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 (runtime) و devDependencies (تست‌ها، لینترها) تقسیم می‌شوند. React Navigation — روتتر استاندارد. Jest — فریم‌ورک تست. ESLint — تحلیلگر ایستا که سبک کد و خطاهای بالقوه را بررسی می‌کند.