# Transpiling Modern Features — Babel & SWC

Source: https://www.geekswithgeeks.com/en/babel-swc/bs-es-features

> Learn what async/await, classes, and destructuring become after transpilation.

## Arrow functions to function expressions

Arrow functions are convenient, but older browsers don't support them. Babel converts them to regular functions.

```javascript
// Input (ES6)
const square = (x) => x * x;
const greet = name => `Hello, ${name}`;

// Output (ES5)
var square = function(x) {
  return x * x;
};
var greet = function(name) {
  return "Hello, " + name;
};
```

## Async/await to promises

Async/await is syntactic sugar for promises. Babel converts `async () => { await ... }` into promise chains.

```javascript
// Input (async/await)
async function fetchData() {
  const data = await fetch('/api');
  return data.json();
}

// Output (promise-based)
function fetchData() {
  return __awaiter(this, void 0, void 0, function*() {
    const data = yield fetch('/api');
    return data.json();
  });
}
```

## Syntax vs runtime features

Babel can transpile syntax (arrow functions, destructuring) but cannot add runtime features that don't exist (Array.prototype.at()). Use polyfills for runtime features.