JavaScript: Language Basics, React Native and Mobile Development

What is JavaScript?

JavaScript (JS) is a high-level programming language with dynamic typing, prototypal inheritance and functions as first-class objects. It was created by Brendan Eich in 1995 in 10 days. It is one of the three core languages of web technologies (HTML, CSS, JS) and the foundation for the Node.js server platform (2009), which allowed JS to go beyond the browser.

In mobile development, JavaScript is used in three paradigms: native compilation (React Native with Hermes/JSC), WebView containers (Ionic, Cordova) and server-side JS (Node.js + Express for mobile app backends). React Native is the dominant technology: according to Statista (2025), 38% of cross-platform projects use React Native, second only to Flutter (46%).

The key feature of JavaScript is the single-threaded execution model with non-blocking I/O. The event loop allows processing thousands of asynchronous operations in a single thread without creating OS threads. This makes JS efficient for I/O-intensive applications (network requests, database operations), but requires caution with CPU-intensive computations.

JavaScript Standards: ES5, ES6, ES2025

The ECMAScript (ES) standard defines the JavaScript specification. ES6 (2015) introduced let/const, arrow functions, classes, modules, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Modern engines Hermes (React Native) and V8 (Node.js) support ES2022+. React Native Hermes supports ES2020+ with certain limitations on Proxy and Symbol.

JavaScript Syntax: Types, Functions and Prototypes

JavaScript syntax is C-like, dynamically typed. The variable type is determined by the value and can change at runtime. let and const (ES6) replaced var for block scope. Primitive types: string, number, boolean, null, undefined, symbol, bigint. Everything else is an object (object, array, function, date, regexp).

Functions as First-Class Objects

JavaScript is a language with higher-order functions. Functions can be assigned to variables, passed as arguments, returned from other functions. Arrow functions (=>) do not have their own this — they inherit this from the outer context. A closure is a function that remembers variables from the scope where it was created.

// Data types and functions in JavaScript
// Primitive types
const name = 'React Native';
let version = 0.71;
var isActive = true; // deprecated var

// Objects and arrays
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Higher-order function
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 operator for copying objects
const newApp = { ...app, version: 16 };

The spread operator ... creates a shallow copy of an object. Destructuring (const { platform, version } = app) extracts fields into variables. The arrow function in filterByVersion is shorter than a function expression and does not create its own this — this is critical in React Native components where this refers to the component class.

Prototypal Inheritance

JavaScript uses prototypal inheritance, not classical like Java or C#. Classes (ES6) are syntactic sugar over prototypes. Every object has an internal [[Prototype]] reference to another object. When accessing a property that does not exist on the object, JS looks for it in the prototype chain. The class syntax (extends, super) makes code more readable, but under the hood prototypes remain.

// Classes in JavaScript — syntactic sugar
class PlatformService {
  // Private field (ES2022)
  #apiKey;

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

  // Static method
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Async method
  async initialize() {
    return await this.#validateKey();
  }

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

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

Private fields #apiKey (ES2022) provide true encapsulation, unavailable with _underscore conventions. The static method getPlatforms belongs to the class, not the instance. The getter info is computed on access. async/await makes asynchronous code linear. React Native Hermes supports private fields since version 0.71.

Asynchronicity in JavaScript: Event Loop and Promise

JavaScript asynchronicity is based on the event loop — an infinite loop that checks the call stack and task queues. The call stack handles synchronous code, microtask queue handles Promise.then/catch/finally, macrotask queue handles setTimeout, setInterval, I/O. The event loop takes tasks from microtask first, then from macrotask. Blocking the call stack (infinite loop) stops the entire UI.

Promise is an object representing a future value. A promise can be pending, fulfilled, or rejected. The .then().catch().finally() chain handles the asynchronous result. async/await (ES8) is syntactic sugar: an async function returns a Promise, await pauses execution until the promise resolves without blocking the thread.

// Asynchronous data loading in 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>
  );
}

The useEffect hook with the async fetchUser function performs an HTTP request when the component mounts. The cancelled flag prevents setState after unmounting — a common React Native issue. Optional Chaining user?.name and Nullish Coalescing ?? handle undefined without errors. ActivityIndicator displays during loading — an async pattern familiar to every JS developer.

React Native: JavaScript on Mobile Platforms

React Native is a framework from Meta (Facebook) for creating native mobile applications in JavaScript. Unlike the WebView approach, React Native renders real native components (UIView for iOS, ViewGroup for Android). JS code runs in a separate thread (Hermes or JSC) and communicates with the native UI thread via Bridge (old architecture) or JSI (new Fabric architecture).

React Native Architecture

React Native consists of the JS thread (your code), the native thread (UI) and Bridge/JSI for their interaction. In the old architecture (Bridge), JSON messages are serialized and transmitted asynchronously — this creates delays during fast animations. The new Fabric architecture (React Native 0.68+) uses JSI (JavaScript Interface) — direct JS interaction with C++ objects without serialization.

// React Native component with 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>
  );
}

The LocationTracker component demonstrates working with the native geolocation API. Platform.OS distinguishes between Android and iOS. PermissionsAndroid.request is the native Android permissions dialog. Geolocation.getCurrentPosition — a module from @react-native-community/geolocation, installed via npm. React Native provides JS interfaces for camera, Bluetooth, accelerometer and other sensors.

Ionic and Cordova: WebView Containers

Ionic is a framework for hybrid mobile applications that uses WebView for rendering HTML/CSS/JS. Unlike React Native, Ionic does not create native components — the application runs inside a web container (WebView) on iOS (WKWebView) and Android (Android WebView). This provides 100% reuse of web code but limits the performance of complex animations.

Apache Cordova is the foundation of Ionic, providing access to native APIs through JavaScript plugins. Camera, GPS, contacts, file system — everything is available via cordova-plugin-*. Ionic 7+ uses Capacitor — Cordova's successor with better performance, ESM support and direct access to iOS/Android SDK via Swift and Kotlin.

JavaScript Developer Tools

JS developer tools for mobile applications include Node.js, npm/yarn, Expo, React Native CLI and Metro bundler. Node.js is a JS runtime outside the browser, the foundation of the ecosystem. npm (Node Package Manager) is a package manager with 2+ million libraries. npx is a utility for running npm packages without installation.

Tool Ecosystem

Expo is an overlay on React Native that simplifies development: it does not require Xcode/Android Studio to start, provides Managed Workflow with pre-installed libraries. Expo Application Services (EAS) — build and publish in the cloud. Metro is the React Native bundler that assembles JS code and dependencies into one file. Hermes is a JS engine from Meta optimized for mobile devices with AOT compilation.

// package.json — React Native project configuration
{
  "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"
  }
}

The package.json file is the foundation of any JS project. The start, android, ios scripts launch the Metro bundler and build. Dependencies are split into dependencies (runtime) and devDependencies (tests, linters). React Navigation is the standard router. Jest is a testing framework. ESLint is a static analyzer that checks code style and potential errors.