Unlocking iOS Power: Mastering JavaScriptCore for Seamless JS Integration

1. JavaScript

Before diving into JavaScriptCore, we need a brief overview of JavaScript. It is a prototype‑based, function‑first, high‑level language that is interpreted, dynamically typed, and supports multiple paradigms such as object‑oriented, imperative, and functional programming. In practice it powers dynamic web pages, manipulates the DOM, handles events, and can even be used for simple tasks like button clicks.

2. Origin and History of JavaScript

In 1990 Tim Berners‑Lee invented the World Wide Web. Netscape released Navigator 1.0 in 1994, and in 1995 Brendan Eich created a scripting language initially called Mocha, later LiveScript, and finally JavaScript after a partnership with Sun.

3. JavaScript and ECMAScript

JavaScript is a trademark of Sun (now Oracle). The language specification is called ECMAScript; JavaScript is essentially an implementation of that standard.

4. Java vs. JavaScript

Despite the similar names, Java and JavaScript are completely different languages. The "Java" prefix was used for marketing purposes when the language was first released.

2. JavaScriptCore

1. Browser Evolution

WebKit split into Safari and Chromium. Chromium later gave rise to the Blink engine.

2. WebKit Rendering Engine

WebKit provides the layout engine for Safari and Chrome. Its architecture includes the Embedding API, Platform API, WebCore, and JSCore (the JavaScript engine).

3. JavaScript Engines

JavaScriptCore is a JavaScript engine that runs inside browsers and, from iOS 7 onward, can be used directly in native apps.

4. Components of JavaScriptCore

JavaScriptCore consists of:

Lexer – tokenizes source code.

Parser – builds an abstract syntax tree.

LLInt – low‑level interpreter for bytecode.

Baseline JIT – just‑in‑time compilation.

DFG – low‑latency optimizing JIT.

FTL – high‑throughput optimizing JIT.

5. Using JavaScriptCore in iOS

JavaScriptCore is a C++ open‑source project. By importing JavaScriptCore/JavaScriptCore.h, you can execute JavaScript from Objective‑C or pure C, and expose custom objects to the JavaScript environment. The main classes are JSContext , JSValue , JSManagedValue , JSVirtualMachine , and JSExport .

6. Hello World Example

The following code shows how to evaluate a script, retrieve the result, and print it in Objective‑C.

3. JSVirtualMachine

A JSVirtualMachine instance provides an isolated JavaScript execution environment with its own heap and garbage collector.

It is used for two main purposes:

Running JavaScript concurrently.

Managing memory for bridged objects between JavaScript and Objective‑C.

Thread‑Safe Execution

All JavaScriptCore APIs are thread‑safe. You can create JSValue objects or evaluate scripts on any thread, but only one thread may use a given virtual machine at a time. To achieve true concurrency, create separate JSVirtualMachine instances for each thread.

4. JSContext

A JSContext represents a JavaScript execution environment. You evaluate scripts with evaluateScript, which returns the value of the last expression. The context also exposes a global object that can be used to add functions and objects.

Accessing JavaScript Objects

You can retrieve or set properties on the global object via subscript syntax, objectForKeyedSubscript, or directly on JSContext.globalObject.

5. JSValue

JSValue

is a wrapper for a JavaScript value. It holds a strong reference to its owning JSContext, ensuring the context stays alive as long as any JSValue exists.

1. Type Conversion

JSValue

provides methods to convert between native Objective‑C types and JavaScript types, including numbers, strings, booleans, arrays, and dictionaries.

2. NSDictionary ↔ JS Object

NSDictionary keys map to JavaScript object properties, and values are recursively converted.

3. NSArray ↔ JS Array

NSArray elements are recursively converted to JavaScript array elements.

4. Blocks ↔ Functions

Objective‑C blocks can be exported as JavaScript functions, with arguments and return types converted automatically.

5. OC Objects ↔ JS Objects

Non‑primitive Objective‑C objects are wrapped in a JavaScript object that mirrors the native inheritance hierarchy. Exported properties and methods are declared via the JSExport protocol.

6. JSExport

The JSExport protocol lets you declaratively expose Objective‑C classes, methods, and properties to JavaScript.

1. Calling Native Code from JavaScript

Two approaches are supported: passing a block directly, or defining a protocol that inherits from JSExport and implementing it in Objective‑C.

2. Exporting Methods and Properties

Only methods and properties declared in a JSExport ‑derived protocol are exposed. The runtime creates accessor properties for exported instance methods and constructor functions for exported class methods.

3. Custom Function Names

You can customize the JavaScript name of an exported method using JSExportAs.

7. Memory Management

1. Circular References

Each JSValue strongly references its JSContext. Exporting a native object to JavaScript creates a reference from the JavaScript global object back to the native object, which can lead to retain cycles if the native side also retains the JSContext or JSValue.

2. Avoid Direct Context Use

Use [JSContext currentContext] inside exported blocks to prevent cycles.

3. Avoid Direct JSValue Use

Store JSValue references in a JSManagedValue instead of retaining them directly.

8. JSManagedValue

JSManagedValue

holds a JSValue with conditional retention: the value is kept alive as long as it is reachable from either the JavaScript object graph or a native owner you register with addManagedReference:withOwner:. Otherwise it is cleared, preventing memory leaks.

9. Exception Handling

The exceptionHandler property of JSContext receives uncaught JavaScript exceptions. By default the exception is stored in context.exception, which re‑throws it back to JavaScript if not cleared. Setting the property to nil signals that the exception has been handled.