By the end of this tutorial, you’ll use Lodash’s _.noConflict() to free the global _ variable while keeping Lodash available under a local name.
const lodash = _.noConflict()
Give global _ back.
Use the returned reference.
Classic browser use case.
Coexist with other libs.
When you skip noConflict.
_.noConflict()?When Lodash loads via a <script> tag in the browser, it typically assigns itself to the global _ (and often window._). If another library—commonly Underscore.js—already uses _, the last script wins and one library breaks.
Call const lodash = _.noConflict() in a single step. That restores the previous global _ and hands you the Lodash function. Do not call _.noConflict() twice—the old tutorial pattern loses Lodash or throws after the first call.
_.noConflict() is a global-namespace fix for legacy script loading. Bundled apps that import lodash from 'lodash' usually never need it—each module gets its own binding without fighting over window._.
Restore the previous _ and receive the Lodash function:
_.noConflict()noConflict takes nothing._)._ currently points to Lodash, it reverts to the pre-Lodash value._ to be Lodash.window in browsers).// Lodash loaded; _ currently references Lodash
const lodash = _.noConflict();
// Global _ is restored (e.g. to Underscore or undefined)
lodash.map([1, 2, 3], (n) => n * 2);
// [2, 4, 6]| Task | Code pattern | Notes |
|---|---|---|
| Correct usage | const lodash = _.noConflict() | One call, assign return |
| Custom name | const _lodash = _.noConflict() | Any identifier |
| After noConflict | lodash.chunk(arr, 2) | Use local variable |
| Global _ freed | window._ restored | Other lib can use _ |
| npm / ESM | import _ from 'lodash' | Usually skip noConflict |
| Isolation alt | _.runInContext() | Separate _ copy |
FunctionLodash itself
global _Restores previous
UnderscoreSame _ name
UtilIntegration
_.noConflict() accepts no parameters—behavior is entirely about globals and the return value.
(none) No argsInvoke on the Lodash function before global _ is overwritten by another consumer.
_.noConflict()return value Required captureThe Lodash function reference. Assign to lodash, _lodash, or similar.
const lodash = _.noConflict()global _ Side effectReverts to whatever owned _ before Lodash loaded—often Underscore or undefined.
window._ !== lodashrepeat calls Safe but pointlessFurther calls still return Lodash if invoked on the saved reference, but only the first call restores global _.
lodash.noConflict()Load order matters: include Lodash, call noConflict, then load the library that needs global _—or vice versa depending on which should own _.
Practical _.noConflict() patterns with copy-ready code, sample output, and interactive Try It Yourself labs.
The correct one-line pattern and a simulated library clash.
The safe pattern: assign the return value immediately.
// _ currently points to Lodash (script tag just loaded)
const lodash = _.noConflict();
console.log(lodash.map([1, 2, 3], (n) => n * 2));
// [2, 4, 6]
// Global _ is no longer Lodash — use the lodash variable from here onLodash saves the old global _ at load time. noConflict() puts that value back and returns Lodash so you do not lose access.
_ userSimulate a legacy library that already owns global _.
// 1. Another library used _ first (simplified stand-in)
window._ = {
library: "legacy",
greet() { return "from legacy"; },
};
// 2. Lodash script loads → _ becomes Lodash temporarily
// 3. Free _ for the legacy library again
const lodash = _.noConflict();
console.log(_.greet());
console.log(lodash.sum([1, 2, 3]));
// "from legacy"
// 6Both libraries coexist: legacy code keeps using _; your code uses lodash. This is the classic Underscore + Lodash scenario.
Naming, legacy migration, and modern alternatives.
Pick a name your team recognizes—avoid vague globals.
const _lodash = _.noConflict();
_lodash.forEach([1, 2, 3], (n) => console.log(n * 2));
// 2, 4, 6 logged
// Clear name: _lodash is Lodash, _ belongs to someone elseThe variable name is yours—lodash, _lodash, or myLodash. What matters is consistency across the codebase after noConflict.
Introduce Lodash without breaking scripts that still expect the old _.
// Old app code (unchanged) — uses global _ for something else
function legacyHelper() {
return typeof _ !== "undefined" ? _.version : "none";
}
const lodash = _.noConflict();
// New features use lodash.*
const ids = lodash.map([{ id: 1 }, { id: 2 }], "id");
// legacyHelper() still sees the restored global _Call noConflict as early as possible after Lodash loads, then route new code through the captured variable.
Modern bundlers and script load order.
With modules, Lodash never hijacks window._ unless you assign it yourself.
import lodash from "lodash";
// No noConflict needed — lodash is a module binding
console.log(lodash.chunk([1, 2, 3, 4], 2));
// [[1, 2], [3, 4]]
// Per-method imports work too:
import map from "lodash/map";
map([1, 2, 3], (n) => n * 2);Prefer ESM/npm for new projects. Reserve noConflict for CDN script tags, WordPress-style globals, or pages mixing several legacy libraries.
Correct ordering prevents a flash where _ is wrong.
<!-- 1. Library that needs global _ (e.g. Underscore) -->
<script src="underscore.js"></script>
<!-- 2. Lodash (temporarily takes over _) -->
<script src="lodash.js"></script>
<!-- 3. Immediately release _ -->
<script>
const lodash = _.noConflict();
// Underscore owns _ again; use lodash.* in your app
</script>Document this order in HTML comments or your build docs so future script additions do not re-break global _.
_.noConflict() WorksLodash stores the previous global _ in an internal variable and assigns itself to _.
If global _ still points to Lodash, it is swapped back to the saved previous value.
The method returns the Lodash function so your code keeps full API access under a local name.
Global _ belongs to the other library; lodash.* serves your utilities.
const lodash = _.noConflict()—never the old double-call pattern.noConflict, global _ is not Lodash—update snippets and docs to use your local variable._.noConflict._._.noConflict() solves a specific problem: two libraries fighting over global _. Capture the return value once, let the other library keep _, and use Lodash through your chosen local name.
For new work, module imports are simpler. Keep noConflict in your toolkit for legacy script-tag pages and mixed-library environments.
const lodash = _.noConflict()lodash, _lodash)_.noConflict() without storing the return value_ to still be Lodash_ is Lodash after noConflict in new code__ first_.noConflict()Use these points when integrating Lodash on legacy pages.
Capture return.
BasicsFree global.
MechanicsKeep using API.
UsageMain use case.
ContextOften skip it.
ModernLodash inherited the noConflict pattern from Underscore.js and jQuery—libraries that popularized owning a short global name (_ or $) before modular JavaScript was common.
Simulate a global _ clash, release it safely, and verify Lodash still works locally.
6 people found this page helpful