JavaScript: dasar-dasar bahasa, React Native dan pengembangan aplikasi seluler

Apa itu JavaScript?

JavaScript (JS) — bahasa pemrograman tingkat tinggi dengan pengetikan dinamis, pewarisan prototipal, dan fungsi sebagai objek kelas satu. Dibuat oleh Brendan Eich pada tahun 1995 dalam 10 hari. Merupakan salah satu dari tiga bahasa utama teknologi web (HTML, CSS, JS) dan dasar platform server Node.js (2009), yang memungkinkan JS keluar dari peramban.

Dalam pengembangan seluler, JavaScript digunakan dalam tiga paradigma: kompilasi native (React Native dengan Hermes/JSC), wadah WebView (Ionic, Cordova), dan JS server (Node.js + Express untuk backend aplikasi seluler). React Native — teknologi dominan: menurut Statista (2025), 38% proyek lintas platform menggunakan React Native, hanya kalah dari Flutter (46%).

Fitur utama JavaScript — model eksekusi utas tunggal dengan I/O non-blocking. Event loop memungkinkan pemrosesan ribuan operasi asinkron dalam satu utas tanpa membuat utas sistem operasi. Ini membuat JS efisien untuk aplikasi dengan beban I/O tinggi (permintaan jaringan, pekerjaan database), tetapi memerlukan kehati-hatian untuk komputasi intensif CPU.

Standar JavaScript: ES5, ES6, ES2025

Standar ECMAScript (ES) mendefinisikan spesifikasi JavaScript. ES6 (2015) memperkenalkan let/const, fungsi panah, kelas, modul, Promise. ES2020 — Optional Chaining (?.), Nullish Coalescing (??). ES2023 — Array findLast, Hashbang Grammar. Mesin modern Hermes (React Native) dan V8 (Node.js) mendukung ES2022+. React Native Hermes mendukung ES2020+ dengan batasan tertentu pada Proxy dan Symbol.

Sintaks JavaScript: tipe, fungsi, dan prototipe

Sintaks JavaScript — mirip C, dengan pengetikan dinamis. Tipe variabel ditentukan oleh nilai dan dapat berubah saat runtime. let dan const (ES6) menggantikan var untuk cakupan blok. Tipe primitif: string, number, boolean, null, undefined, symbol, bigint. Semua yang lain adalah objek (object, array, function, date, regexp).

Fungsi sebagai objek kelas satu

JavaScript — bahasa dengan fungsi tingkat tinggi. Fungsi dapat ditugaskan ke variabel, diteruskan sebagai argumen, dikembalikan dari fungsi lain. Fungsi panah (=>) tidak memiliki this sendiri — mereka mewarisi this dari konteks eksternal. Penutupan (closure) — fungsi yang mengingat variabel dari lingkup tempat ia dibuat.

// Tipe data dan fungsi dalam JavaScript
// Tipe primitif
const name = 'React Native';
let version = 0.71;
var isActive = true; // var usang

// Objek dan array
const app = {
  platform: 'iOS',
  version: 15,
  getInfo() {
    return `${this.platform} ${this.version}`;
  }
};

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

// Fungsi tingkat tinggi
function filterByVersion(apps, minVersion) {
  return apps.filter(app => app.version >= minVersion);
}

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

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

// Operator spread untuk menyalin objek
const newApp = { ...app, version: 16 };

Operator spread ... membuat salinan objek secara dangkal. Destrukturisasi (const { platform, version } = app) mengekstrak bidang ke variabel. Fungsi panah dalam filterByVersion lebih pendek dari ekspresi function dan tidak membuat this sendiri — ini penting dalam komponen React Native di mana this merujuk ke kelas komponen.

Pewarisan prototipal

JavaScript menggunakan pewarisan prototipal, bukan berbasis kelas seperti Java atau C#. Kelas (ES6) — gula sintaksis di atas prototipe. Setiap objek memiliki referensi internal [[Prototype]] ke objek lain. Saat mengakses properti yang tidak ada dalam objek, JS mencarinya di rantai prototipe. Sintaks kelas (extends, super) membuat kode lebih mudah dibaca, tetapi di bawahnya tetap prototipe.

// Kelas dalam JavaScript — gula sintaksis
class PlatformService {
  // Bidang privat (ES2022)
  #apiKey;

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

  // Metode statis
  static getPlatforms() {
    return ['iOS', 'Android'];
  }

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

  // Metode asinkron
  async initialize() {
    return await this.#validateKey();
  }

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

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

Bidang privat #apiKey (ES2022) memberikan enkapsulasi nyata, tidak dapat diakses dengan konvensi _underscore. Metode statis getPlatforms milik kelas, bukan instance. Getter info dihitung saat diakses. async/await membuat kode asinkron menjadi linier. React Native Hermes mendukung bidang privat sejak versi 0.71.

Asinkronisitas dalam JavaScript: Event Loop dan Promise

Asinkronisitas JavaScript didasarkan pada event loop — loop tak terbatas yang memeriksa call stack dan antrian tugas. Call stack — kode sinkron, microtask queue — Promise.then/catch/finally, macrotask queue — setTimeout, setInterval, I/O. Event loop mengambil tugas dari microtask terlebih dahulu, lalu dari macrotask. Pemblokiran call stack (loop tak terbatas) menghentikan seluruh UI.

Promise — objek yang mewakili nilai masa depan. Promise bisa pending (menunggu), fulfilled (sukses), rejected (kesalahan). Rantai .then().catch().finally() memproses hasil asinkron. async/await (ES8) — gula sintaksis: fungsi async mengembalikan Promise, await menjeda eksekusi hingga promise selesai, tanpa memblokir utas.

// Pemuatan data asinkron dalam 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>
  );
}

Hook useEffect dengan fungsi async fetchUser melakukan permintaan HTTP saat komumen dipasang. Bendera cancelled mencegah setState setelah pelepasan — masalah umum di React Native. Optional Chaining user?.name dan Nullish Coalescing ?? menangani undefined tanpa kesalahan. ActivityIndicator ditampilkan selama pemuatan — pola asinkron yang akrab bagi setiap pengembang JS.

React Native: JavaScript di platform seluler

React Native — framework dari Meta (Facebook) untuk membuat aplikasi seluler native dalam JavaScript. Tidak seperti pendekatan WebView, React Native merender komponen native asli (UIView untuk iOS, ViewGroup untuk Android). Kode JS dijalankan dalam utas terpisah (Hermes atau JSC) dan berkomunikasi dengan utas UI native melalui Bridge (arsitektur lama) atau JSI (arsitektur Fabric baru).

Arsitektur React Native

React Native terdiri dari utas JS (kode Anda), utas native (UI), dan Bridge/JSI untuk interaksi mereka. Dalam arsitektur lama (Bridge) pesan JSON diserialisasi dan dikirim secara asinkron — ini menyebabkan penundaan pada animasi cepat. Arsitektur Fabric baru (React Native 0.68+) menggunakan JSI (JavaScript Interface) — interaksi langsung JS dengan objek C++ tanpa serialisasi.

// Komponen React Native dengan API 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>
  );
}

Komponen LocationTracker mendemonstrasikan kerja dengan API geolokasi native. Platform.OS membedakan Android dan iOS. PermissionsAndroid.request — dialog izin native Android. Geolocation.getCurrentPosition — modul @react-native-community/geolocation, dihubungkan melalui npm. React Native menyediakan antarmuka JS untuk kamera, Bluetooth, akselerometer, dan sensor lainnya.

Ionic dan Cordova: wadah WebView

Ionic — framework untuk aplikasi seluler hibrida, yang menggunakan WebView untuk merender HTML/CSS/JS. Tidak seperti React Native, Ionic tidak membuat komponen native — aplikasi berjalan di dalam wadah web (WebView) di iOS (WKWebView) dan Android (Android WebView). Ini memberikan penggunaan ulang kode web 100%, tetapi membatasi kinerja animasi kompleks.

Apache Cordova — dasar Ionic, yang menyediakan akses ke API native melalui plugin JavaScript. Kamera, GPS, kontak, sistem file — semuanya dapat diakses melalui cordova-plugin-*. Ionic 7+ menggunakan Capacitor — penerus Cordova dengan kinerja lebih baik, dukungan ESM, dan akses langsung ke iOS/Android SDK melalui Swift dan Kotlin.

Alat pengembang JavaScript

Alat pengembang JS untuk aplikasi seluler meliputi Node.js, npm/yarn, Expo, React Native CLI, dan Metro bundler. Node.js — lingkungan eksekusi JS di luar peramban, dasar ekosistem. npm (Node Package Manager) — manajer paket dengan 2+ juta pustaka. npx — utilitas untuk menjalankan paket npm tanpa instalasi.

Ekosistem alat

Expo — lapisan di atas React Native yang menyederhanakan pengembangan: tidak memerlukan Xcode/Android Studio untuk memulai, menyediakan Managed Workflow dengan pustaka terinstal. Expo Application Services (EAS) — pembangunan dan publikasi di cloud. Metro — bundler React Native yang mengumpulkan kode JS dan dependensi dalam satu file. Hermes — mesin JS dari Meta, dioptimalkan untuk perangkat seluler dengan kompilasi AOT.

// package.json — konfigurasi proyek 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"
  }
}

File package.json — dasar setiap proyek JS. Skrip start, android, ios menjalankan bundler Metro dan pembangunan. Dependensi dibagi menjadi dependencies (runtime) dan devDependencies (tes, linter). React Navigation — router standar. Jest — framework pengujian. ESLint — penganalisis statis yang memeriksa gaya kode dan potensi kesalahan.