JavaScript: भाषा की मूल बातें, React Native और मोबाइल विकास

JavaScript क्या है?

JavaScript (JS) एक उच्च-स्तरीय प्रोग्रामिंग भाषा है जिसमें डायनामिक टाइपिंग, प्रोटोटाइपल इनहेरिटेंस और फ़ंक्शन प्रथम श्रेणी की वस्तुओं के रूप में होते हैं। इसे Brendan Eich ने 1995 में 10 दिनों में बनाया था। यह वेब तकनीकों (HTML, CSS, JS) की तीन मुख्य भाषाओं में से एक है और Node.js सर्वर प्लेटफ़ॉर्म (2009) की नींव है, जिसने JS को ब्राउज़र से बाहर आने की अनुमति दी।

मोबाइल विकास में, JavaScript का उपयोग तीन प्रतिमानों में किया जाता है: देशी संकलन (Hermes/JSC के साथ React Native), WebView कंटेनर (Ionic, Cordova) और सर्वर-साइड JS (मोबाइल एप्लिकेशन बैकएंड के लिए Node.js + Express)। React Native प्रमुख तकनीक है: Statista (2025) के अनुसार, 38% क्रॉस-प्लेटफ़ॉर्म प्रोजेक्ट React Native का उपयोग करते हैं, जो केवल Flutter (46%) से पीछे है।

JavaScript की मुख्य विशेषता नॉन-ब्लॉकिंग I/O के साथ एकल-थ्रेडेड निष्पादन मॉडल है। इवेंट लूप OS थ्रेड बनाए बिना एक ही थ्रेड में हजारों अतुल्यकालिक संचालन को संसाधित करने की अनुमति देता है। यह 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 Proxy और Symbol पर कुछ सीमाओं के साथ ES2020+ का समर्थन करता है।

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);
}

// क्लोजर
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// ऑब्जेक्ट कॉपी करने के लिए स्प्रेड ऑपरेटर
const newApp = { ...app, version: 16 };

स्प्रेड ऑपरेटर ... एक ऑब्जेक्ट की शैलो कॉपी बनाता है। डीस्ट्रक्चरिंग (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) वास्तविक एनकैप्सुलेशन प्रदान करती हैं, जो _अंडरस्कोर सम्मेलनों के साथ उपलब्ध नहीं है। स्टैटिक मेथड getPlatforms वर्ग से संबंधित है, न कि इंस्टेंस से। गेटर info एक्सेस करने पर गणना की जाती है। async/await अतुल्यकालिक कोड को रैखिक बनाता है। React Native Hermes संस्करण 0.71 से प्राइवेट फ़ील्ड का समर्थन करता है।

JavaScript में अतुल्यकालिकता: Event Loop और Promise

JavaScript अतुल्यकालिकता event loop पर आधारित है — एक अनंत लूप जो कॉल स्टैक और कार्य कतारों की जाँच करता है। कॉल स्टैक समकालिक कोड को संभालता है, माइक्रोटास्क कतार Promise.then/catch/finally को संभालती है, मैक्रोटास्क कतार setTimeout, setInterval, I/O को संभालती है। Event loop पहले माइक्रोटास्क से, फिर मैक्रोटास्क से कार्य लेता है। कॉल स्टैक को अवरुद्ध करना (अनंत लूप) पूरे 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('फ़ेच विफल:', 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 वास्तविक देशी घटकों (iOS के लिए UIView, Android के लिए ViewGroup) को रेंडर करता है। 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) का उपयोग करती है — बिना क्रमबद्धता के C++ ऑब्जेक्ट्स के साथ सीधा JS इंटरैक्शन।

// देशी API के साथ React Native घटक
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 इंटरफ़ेस प्रदान करता है।

Ionic और Cordova: WebView कंटेनर

Ionic हाइब्रिड मोबाइल एप्लिकेशन के लिए एक फ्रेमवर्क है जो HTML/CSS/JS को रेंडर करने के लिए WebView का उपयोग करता है। React Native के विपरीत, Ionic देशी घटक नहीं बनाता — एप्लिकेशन iOS (WKWebView) और Android (Android WebView) पर वेब कंटेनर (WebView) के अंदर चलता है। यह वेब कोड का 100% पुन: उपयोग प्रदान करता है लेकिन जटिल एनिमेशन के प्रदर्शन को सीमित करता है।

Apache Cordova Ionic की नींव है, जो JavaScript प्लगइन के माध्यम से देशी API तक पहुँच प्रदान करता है। कैमरा, GPS, संपर्क, फ़ाइल सिस्टम — सब कुछ cordova-plugin-* के माध्यम से उपलब्ध है। Ionic 7+ Capacitor का उपयोग करता है — बेहतर प्रदर्शन, ESM समर्थन और Swift और Kotlin के माध्यम से iOS/Android SDK तक सीधी पहुँच के साथ Cordova का उत्तराधिकारी।

JavaScript डेवलपर उपकरण

मोबाइल एप्लिकेशन के लिए JS डेवलपर उपकरणों में Node.js, npm/yarn, Expo, React Native CLI और Metro बंडलर शामिल हैं। 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 AOT संकलन के साथ मोबाइल उपकरणों के लिए अनुकूलित Meta का JS इंजन है।

// 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 एक स्थैतिक विश्लेषक है जो कोड शैली और संभावित त्रुटियों की जाँच करता है।