JavaScript: språkgrunder, React Native och mobilapputveckling

Vad är JavaScript?

JavaScript (JS) — ett högnivå programmeringsspråk med dynamisk typning, prototypbaserat arv och funktioner som förstklassiga objekt. Skapat av Brendan Eich 1995 på 10 dagar. Det är ett av de tre huvudspråken för webbteknologier (HTML, CSS, JS) och grunden för serverplattformen Node.js (2009), som gjorde det möjligt för JS att lämna webbläsaren.

Inom mobilutveckling används JavaScript i tre paradigm: inbyggd kompilering (React Native med Hermes/JSC), WebView-behållare (Ionic, Cordova) och server-JS (Node.js + Express för backend till mobilappar). React Native — den dominerande teknologin: enligt Statista (2025) använder 38% av cross-platform-projekten React Native, endast efter Flutter (46%).

Nyckelegenskapen hos JavaScript — enkeltrådig exekveringsmodell med icke-blockerande I/O. Event loop gör det möjligt att bearbeta tusentals asynkrona operationer i en enda tråd utan att skapa OS-trådar. Detta gör JS effektivt för I/O-intensiva applikationer (nätverksförfrågningar, databasarbete), men kräver försiktighet vid CPU-intensiva beräkningar.

JavaScript-standarder: ES5, ES6, ES2025

ECMAScript (ES)-standarden definierar JavaScript-specifikationen. ES6 (2015) introducerade let/const, pilfunktioner, klasser, moduler, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Moderna motorer Hermes (React Native) och V8 (Node.js) stöder ES2022+. React Native Hermes stöder ES2020+ med särskilda begränsningar för Proxy och Symbol.

JavaScript-syntax: typer, funktioner och prototyper

JavaScript-syntax — C-liknande, dynamiskt typad. Variabelns typ bestäms av värdet och kan ändras under körning. let och const (ES6) ersatte var för blockomfattande synlighet. Primitiva typer: string, number, boolean, null, undefined, symbol, bigint. Allt annat är ett objekt (object, array, function, date, regexp).

Funktioner som förstklassiga objekt

JavaScript — ett språk med högre ordningens funktioner. Funktioner kan tilldelas variabler, skickas som argument, returneras från andra funktioner. Pilfunktioner (=>) har inte sitt eget this — de ärver this från den yttre kontexten. Slutning (closure) — en funktion som kommer ihåg variabler från det omfång där den skapades.

// Datatyper och funktioner i JavaScript
// Primitiva typer
const name = 'React Native';
let version = 0.71;
var isActive = true; // föråldrad var

// Objekt och arrayer
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Funktion av högre ordning
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

// Slutning (closure)
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

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

// Spread-operator för kopiering av objekt
const newApp = { ...app, version: 16 };

Spread-operatorn ... skapar en ytlig kopia av ett objekt. Destrukturering (const { platform, version } = app) extraherar fält till variabler. Pilfunktionen i filterByVersion är kortare än function-uttryck och skapar inte sitt eget this — detta är kritiskt i React Native-komponenter där this refererar till komponentklassen.

Prototypbaserat arv

JavaScript använder prototypbaserat arv, inte klassbaserat som Java eller C#. Klasser (ES6) — syntaktiskt socker ovanpå prototyper. Varje objekt har en intern [[Prototype]]-referens till ett annat objekt. När man kommer åt en egenskap som inte finns i objektet, söker JS efter den i prototypkedjan. Klassyntax (extends, super) gör koden mer läsbar, men under huven förblir prototyper.

// Klasser i JavaScript — syntaktiskt socker
class PlatformService {
  // Privat fält (ES2022)
  #apiKey;

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

  // Statisk metod
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Asynkron metod
  async initialize() {
    return await this.#validateKey();
  }

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

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

Privata fält #apiKey (ES2022) säkerställer äkta inkapsling, otillgänglig med _underscore-konventioner. Den statiska metoden getPlatforms tillhör klassen, inte instansen. Gettern info beräknas vid åtkomst. async/await gör asynkron kod linjär. React Native Hermes stöder privata fält från version 0.71.

Asynkronicitet i JavaScript: Event Loop och Promise

JavaScript-asynkronicitet är baserad på event loop — en oändlig loop som kontrollerar anropsstacken (call stack) och uppgiftsköer. Call stack — synkron kod, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop hämtar uppgifter först från microtask, sedan från macrotask. Blockering av call stack (oändlig loop) stoppar hela UI.

Promise — ett objekt som representerar ett framtida värde. Promise kan vara pending (väntande), fulfilled (lyckad), rejected (fel). Kedjan .then().catch().finally() bearbetar det asynkrona resultatet. async/await (ES8) — syntaktiskt socker: async-funktion returnerar ett Promise, await pausar exekveringen tills promise är löst, utan att blockera tråden.

// Asynkron dataladdning i 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>
  );
}

Hooken useEffect med async-funktionen fetchUser utför en HTTP-förfrågan vid montering av komponenten. Flaggans cancelled förhindrar setState efter avmontering — ett vanligt problem i React Native. Optional Chaining user?.name och Nullish Coalescing ?? hanterar undefined utan fel. ActivityIndicator visas under laddning — ett asynkront mönster bekant för varje JS-utvecklare.

React Native: JavaScript på mobila plattformar

React Native — ett ramverk från Meta (Facebook) för att skapa inbyggda mobilappar i JavaScript. Till skillnad från WebView-metoden renderar React Native riktiga inbyggda komponenter (UIView för iOS, ViewGroup för Android). JS-kod exekveras i en separat tråd (Hermes eller JSC) och kommunicerar med den inbyggda UI-tråden via Bridge (gammal arkitektur) eller JSI (ny Fabric-arkitektur).

React Native-arkitektur

React Native består av JS-tråd (din kod), inbyggd tråd (UI) och Bridge/JSI för deras interaktion. I den gamla arkitekturen (Bridge) serialiseras JSON-meddelanden och skickas asynkront — detta skapar förseningar vid snabba animationer. Den nya Fabric-arkitekturen (React Native 0.68+) använder JSI (JavaScript Interface) — direkt interaktion mellan JS och C++-objekt utan serialisering.

// React Native-komponent med inbyggt 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>
  );
}

Komponenten LocationTracker demonstrerar arbete med det inbyggda geolokaliserings-API:et. Platform.OS skiljer mellan Android och iOS. PermissionsAndroid.request — inbyggd behörighetsdialog för Android. Geolocation.getCurrentPosition — modulen @react-native-community/geolocation, ansluten via npm. React Native tillhandahåller JS-gränssnitt för kamera, Bluetooth, accelerometer och andra sensorer.

Ionic och Cordova: WebView-behållare

Ionic — ett ramverk för hybrida mobilappar som använder WebView för rendering av HTML/CSS/JS. Till skillnad från React Native skapar Ionic inga inbyggda komponenter — appen körs inuti en webbbehållare (WebView) på iOS (WKWebView) och Android (Android WebView). Detta ger 100% återanvändning av webbkod, men begränsar prestandan för komplexa animationer.

Apache Cordova — grunden för Ionic, som ger tillgång till inbyggda API:er via JavaScript-pluginmoduler. Kamera, GPS, kontakter, filsystem — allt tillgängligt via cordova-plugin-*. Ionic 7+ använder Capacitor — efterträdaren till Cordova med bättre prestanda, ESM-stöd och direkt åtkomst till iOS/Android SDK via Swift och Kotlin.

JavaScript-utvecklarverktyg

JS-utvecklarverktyg för mobilappar inkluderar Node.js, npm/yarn, Expo, React Native CLI och Metro bundler. Node.js — JS-körtid utanför webbläsaren, grunden för ekosystemet. npm (Node Package Manager) — pakethanterare med 2+ miljoner bibliotek. npx — verktyg för att köra npm-paket utan installation.

Verktygsekosystem

Expo — ett lager ovanpå React Native som förenklar utvecklingen: kräver inte Xcode/Android Studio för att börja, tillhandahåller Managed Workflow med förinstallerade bibliotek. Expo Application Services (EAS) — bygg och publicera i molnet. Metro — React Native-bundlern som samlar JS-kod och beroenden i en fil. Hermes — JS-motorn från Meta, optimerad för mobila enheter med AOT-kompilering.

// package.json — konfiguration av React Native-projekt
{
  "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"
  }
}

Fil package.json — grunden för varje JS-projekt. Skript start, android, ios startar Metro-bundlern och bygget. Beroenden är uppdelade i dependencies (runtime) och devDependencies (tester, linters). React Navigation — standardrouter. Jest — testramverk. ESLint — statisk analysator som kontrollerar kodstil och potentiella fel.