@babel/plugin-transform-for-of

What is @babel/plugin-transform-for-of?

The @babel/plugin-transform-for-of package is a plugin for Babel, a JavaScript compiler, that transforms for...of loops into more compatible ES5 syntax. This is particularly useful for ensuring that your JavaScript code can run in environments that do not support the latest ECMAScript features, such as older browsers. The transformation helps in converting iterable objects in a way that can be understood by environments without native support for the for...of loop.

What are @babel/plugin-transform-for-of's main functionalities?

Transform for...of loops to ES5

This feature automatically converts for...of loops into a compatible ES5 syntax using simple iteration over arrays. This is useful for ensuring compatibility with older JavaScript environments.

"use strict";

var _arr = [1, 2, 3];

for (var _i = 0; _i < _arr.length; _i++) {
  var i = _arr[_i];
  console.log(i);
}

Optionally use loose mode for simpler output

In loose mode, the transformation is even simpler, avoiding the use of iterators altogether and directly accessing array elements by index. This results in faster code but assumes the iterated object is an array.

"use strict";

var _arr = [1, 2, 3];

for (var i = 0; i < _arr.length; i++) {
  console.log(_arr[i]);
}

Other packages similar to @babel/plugin-transform-for-of

@babel/plugin-transform-spread

Similar to @babel/plugin-transform-for-of, this plugin transforms spread syntax (e.g., ...arr) into a form that can be understood by older JavaScript engines. While it focuses on spread syntax rather than for...of loops, it similarly aims to enhance compatibility with older environments.

@babel/plugin-transform-block-scoping

This package transforms ES6 block scoping (let and const) into ES5 syntax. It's similar to @babel/plugin-transform-for-of in that it targets a specific ES6 feature for transformation to ensure compatibility with older JavaScript engines.

README

@babel/plugin-transform-for-of

Compile ES2015 for...of to ES5

See our website @babel/plugin-transform-for-of for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-for-of

or using yarn:

yarn add @babel/plugin-transform-for-of --dev

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)