Revision 1134305 of SyntaxError: "use strict" not allowed in function with "x" parameter

<div>{{jsSidebar("Errors")}}</div>

<h2 id="Message">Message</h2>

<pre class="syntaxbox">
SyntaxError: "use strict" not allowed in function with "x" parameter (Firefox)
SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list (Chrome)
</pre>

<h2 id="Error_type">Error type</h2>

<p>{{jsxref("SyntaxError")}}.</p>

<h2 id="What_went_wrong">What went wrong?</h2>

<p><code>"use strict"</code> directive appears at the top of a function that has one of the follow parameters.</p>

<ul>
 <li>{{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}</li>
 <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}</li>
 <li>{{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}</li>
</ul>

<p><code>"use strict"</code> is not allowed at the top of such function.</p>

<h2 id="Examples">Examples</h2>

<h3 id="Function_statement">Function statement</h3>

<p>In this case, the function "sum" has default parameters "a=1" and "b=2".</p>

<pre class="brush: js example-bad">
function sum(a=1, b=2) {
  // SyntaxError: "use strict" not allowed in function with default parameter
  "use strict";
  return a + b;
}
</pre>

<p>If the function should be in strict mode, and the entire script or enclosing function is also okay to be in strict mode, you can move <code>"use strict"</code> outside.</p>

<pre class="brush: js example-good">
"use strict";
function sum(a=1, b=2) {
  return a + b;
}
</pre>

<h3 id="Function_expression">Function expression</h3>

<p>Function expression can use yet another workaround.</p>

<pre class="brush: js example-bad">
var sum = function sum([a, b]) {
  // SyntaxError: "use strict" not allowed in function with destructuring parameter
  "use strict";
  return a + b;
};
</pre>

<p>This can be converted into following expression.</p>

<pre class="brush: js example-good">
var sum = (function() {
  "use strict";
  return function sum([a, b]) {
    return a + b;
  };
})();
</pre>

<h3 id="Arrow_function">Arrow function</h3>

<p>If it's an arrow function and needs to access <code>this</code> variable, you can use arrow function as the enclosing function.</p>

<pre class="brush: js example-bad">
var callback = (...args) =&gt; {
  // SyntaxError: "use strict" not allowed in function with rest parameter
  "use strict";
  return this.run(args);
};
</pre>

<p>This can be converted into following expression.</p>

<pre class="brush: js example-good">
var callback = (() =&gt; {
  "use strict";
  return (...args) =&gt; {
    return this.run(args);
  };
})();
</pre>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{jsxref("Strict_mode", "Strict mode", "", 1)}}</li>
 <li>{{jsxref("Statements/function", "function statement", "", 1)}}</li>
 <li>{{jsxref("Operators/function", "function expression", "", 1)}}</li>
 <li>{{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}</li>
 <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}</li>
 <li>{{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}</li>
</ul>