What Is "Function*" in JavaScript

Check if a variable is of function type

Sure underscore's way is more efficient, but the best way to check, when efficiency isn't an issue, is written on underscore's page linked by @Paul Rosania.

Inspired by underscore, the final isFunction function is as follows:

function isFunction(functionToCheck) {
 return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
}

Note: This solution doesn't work for async functions, generators or proxied functions. Please see other answers for more up to date solutions.

What is function* in JavaScript?

It's a Generator function.

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

Calling a generator function does not execute its body immediately; an iterator object for the function is returned instead. When the iterator's next() method is called, the generator function's body is executed until the first yield expression, which specifies the value to be returned from the iterator or, with yield*, delegates to another generator function.

---

Historical note:

It's a proposed syntax for EcmaScript.next.

Dave Herman of Mozilla gave a talk about EcmaScript.next. At 30:15 he talks about generators.

Earlier, he explains how Mozilla is experimentally implementing proposed language changes to help steer the committee. Dave works closely with Brendan Eich, Mozilla's CTO (I think), and the original JavaScript designer.

You can find more detail on the EcmaScript working group wiki: http://wiki.ecmascript.org/doku.php?id=harmony:generators

The working group (TC-39) has general agreement that EcmaScript.next should have some kind of generator iterator proposal, but this is not final.

You shouldn't rely on this showing up without changes in the next version of the language, and even if it doesn't change, it probably won't show up widely in other browsers for a while.

Overview

First-class coroutines, represented as objects encapsulating suspended execution contexts (i.e., function activations). Prior art: Python, Icon, Lua, Scheme, Smalltalk.

Examples

The “infinite” sequence of Fibonacci numbers (notwithstanding behavior around 2⁵³):

function* fibonacci() {
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

Generators can be iterated over in loops:

for (n of fibonacci()) {
    // truncate the sequence at 1000
    if (n > 1000)
        break;
    print(n);
}

Generators are iterators:

let seq = fibonacci();
print(seq.next()); // 1
print(seq.next()); // 2
print(seq.next()); // 3
print(seq.next()); // 5
print(seq.next()); // 8

What does this symbol mean in JavaScript?

See the documentation on MDN about expressions and operators and statements.

Basic keywords and general expressions

this keyword:

• How does the "this" keyword work, and when should it be used?

var x = function() vs. function x()  —  Function declaration syntax

• var functionName = function() {} vs function functionName() {}

(function(){…})()  —  IIFE (Immediately Invoked Function Expression)

• What is the purpose?, How is it called?
• Why does (function(){…})(); work but function(){…}(); doesn't?
• (function(){…})(); vs (function(){…}());
• shorter alternatives:
  
  • !function(){…}(); - What does the exclamation mark do before the function?
  • +function(){…}(); - JavaScript plus sign in front of function expression
  • !function(){ }() vs (function(){ })(), ! vs leading semicolon
• (function(window, undefined){…}(window));

someFunction()()  —  Functions which return other functions

• Two sets of parentheses after function call

=>  —  Equal sign, greater than: arrow function expression syntax

• What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?

|>  —  Pipe, greater than: Pipeline operator

• What does the "|>" operator do in JavaScript?

function*, yield, yield*  —  Star after function or yield: generator functions

• What is "function*" in JavaScript?
• What's the yield keyword in JavaScript?
• Delegated yield (yield star, yield *) in generator functions

[…], [ value ], Array()  —  Square brackets: array notation

• What’s the difference between "Array()" and "[]" while declaring a JavaScript array?
• What is array literal notation in javascript and when should you use it?

If the square brackets appear on the left side of an assignment ([a] = ...), or inside a function's parameters, it's a destructuring assignment.

{…}, { key: value }, { [key]: value }  —  Curly brackets: object literal syntax (not to be confused with blocks)

• What do curly braces in JavaScript mean?
• Javascript object literal: what exactly is {a, b, c}?
• What do square brackets around a property name in an object literal mean?
• How does this object method definition work without the "function" keyword? (ES2015 Method definitions)

If the curly brackets appear on the left side of an assignment ({ a } = ...) or inside a function's parameters, it's a destructuring assignment.

`…${…}…`  —  Backticks, dollar sign with curly brackets: template literals

• What does this `…${…}…` code from the node docs mean?
• Usage of the backtick character (`) in JavaScript?
  
• What is the purpose of template literals (backticks) following a function in ES6?

/…/  —  Slashes: regular expression literals

• Meaning of javascript text between two slashes

$  —  Dollar sign in regex replace patterns: $$, $&, $`, $', $n

• JavaScript replace() method dollar signs

()  —  Parentheses: grouping operator

• MDN: Grouping operator

---

Property-related expressions

obj.prop, obj[prop], obj["prop"]  —  Square brackets or dot: property accessors

• JavaScript property access: dot notation vs. brackets?

?., ?.[], ?.()  —  Question mark, dot: optional chaining operator

• Question mark after parameter
• Null-safe property access (and conditional assignment) in ES6/2015
• Optional Chaining in JavaScript
• Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
• Is there a "null coalescing" operator in JavaScript?

::  —  Double colon: bind operator

• JavaScript double colon (bind operator)

new operator

• What is the 'new' keyword in JavaScript?
• What is "new.target"?

...iter  —  Three dots: spread syntax; rest parameters

• (...rest) => {}  —  What is the meaning of “…args” (three dots) in a function definition?
• fn(...args)  —  What is the meaning of “foo(…arg)” (three dots in a function call)?
• [...iter]  —  javascript es6 array feature […data, 0] “spread operator”
• {...props}  —  Javascript Property with three dots (…), What does the '…rest' stand for in this object destructuring?

---

Increment and decrement

++, --  —  Double plus or minus: pre- / post-increment / -decrement operators

• ++someVariable vs someVariable++ in Javascript

---

Unary and binary (arithmetic, logical, bitwise) operators

delete operator

• What is the purpose of the delete operator in Javascript?

void operator

• What does `void 0` mean?

+, -  —  Plus and minus: addition or concatenation, and subtraction operators; unary sign operators

• What does = +_ mean in JavaScript, Single plus operator in javascript
• What's the significant use of unary plus and minus operators?
• Why is [1,2] + [3,4] = "1,23,4" in JavaScript?
• Why does JavaScript handle the plus and minus operators between strings and numbers differently?

|, &, ^, ~  —  Single pipe, ampersand, circumflex, tilde: bitwise OR, AND, XOR, & NOT operators

• What do these JavaScript bitwise operators do?
• How to: The ~ operator?
• Is there a & logical operator in Javascript
• What does the "|" (single pipe) do in JavaScript?
• What does the operator |= do in JavaScript?
• What does the ^ (caret) symbol do in JavaScript?
• Using bitwise OR 0 to floor a number, How does x|0 floor the number in JavaScript?
• Why does ~1 equal -2?
• What does ~~ ("double tilde") do in Javascript?
• How does !!~ (not not tilde/bang bang tilde) alter the result of a 'contains/included' Array method call? (also here and here)

%  —  Percent sign: remainder operator

• What does % do in JavaScript?

&&, ||, !  —  Double ampersand, double pipe, exclamation point: logical operators

• Logical operators in JavaScript — how do you use them?
• Logical operator || in javascript, 0 stands for Boolean false?
• What does "var FOO = FOO || {}" (assign a variable or an empty object to that variable) mean in Javascript?, JavaScript OR (||) variable assignment explanation, What does the construct x = x || y mean?
• Javascript AND operator within assignment
• What is "x && foo()"? (also here and here)
• What is the !! (not not) operator in JavaScript?
• What is an exclamation point in JavaScript?

??  —  Double question mark: nullish-coalescing operator

• How is the nullish coalescing operator (??) different from the logical OR operator (||) in ECMAScript?
• Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
• Is there a "null coalescing" operator in JavaScript?

**  —  Double star: power operator (exponentiation)

• x ** 2 is equivalent to Math.pow(x, 2)
• Is the double asterisk ** a valid JavaScript operator?
• MDN documentation

---

Equality operators

==, ===  —  Equal signs: equality operators

• Which equals operator (== vs ===) should be used in JavaScript comparisons?
• How does JS type coercion work?
• In Javascript, <int-value> == "<int-value>" evaluates to true. Why is it so?
• [] == ![] evaluates to true
• Why does "undefined equals false" return false?
• Why does !new Boolean(false) equals false in JavaScript?
• Javascript 0 == '0'. Explain this example
• Why false == "false" is false?

!=, !==  —  Exclamation point and equal signs: inequality operators

• != vs. !==
• What is the difference between != and !== operators in JavaScript?

---

Bit shift operators

<<, >>, >>>  —  Two or three angle brackets: bit shift operators

• What do these JavaScript bitwise operators do?
• Double more-than symbol in JavaScript
• What is the JavaScript >>> operator and how do you use it?

---

Conditional operator

…?…:…  —  Question mark and colon: conditional (ternary) operator

• Question mark and colon in JavaScript
• Operator precedence with JavaScript's ternary operator
• How do you use the ? : (conditional) operator in JavaScript?

---

Assignment operators

=  —  Equal sign: assignment operator

• What is the difference between the `=` and `==` operators and what is `===`? (Single, double, and triple equals)

This symbol is also used for default parameters or default values in a destructuring assignment:

• what does (state = {}) => state means
• What does ({"key": "value"} = {}) syntax mean inside a JavaScript function

%=  —  Percent equals: remainder assignment

• Having Confusion with Modulo operator

+=  —  Plus equals: addition assignment operator

• How does += (plus equal) work?

&&=, ||=, ??=  —  Double ampersand, pipe, or question mark, followed by equal sign: logical assignments

• What purpose do &&=, ||= and ??= serve?
• Replace a value if null or undefined in JavaScript
• Set a variable if undefined
• Ruby’s ||= (or equals) in JavaScript?
• Original proposal
• Specification

<<=, >>=, >>>=, &=, ^=, |= — Double less than, double greater than, triple greater than, ampersand, caret, or pipe followed by equal sign: bitwise assignments

• What do these JavaScript bitwise operators do?

Destructuring

• of function parameters: Where can I get info on the object parameter syntax for JavaScript functions?
• of arrays: Multiple assignment in JavaScript? What does `[ a, b, c ] = [ 1, 2, 3 ]` mean?
• of objects/imports: Javascript object bracket notation ({ Navigation } =) on left side of assign

---

Comma operator

,  —  Comma operator (not to be confused with the comma used in variable declarations)

• What does the comma operator do in JavaScript?
• Comma operator returns first value instead of second in argument list?
• When is the comma operator useful?

---

Control flow

{…}  — Curly brackets: blocks (not to be confused with object literal syntax)

• JavaScript curly braces with no function or json

Declarations

var, let, const  —  Declaring variables

• What is the difference between "let" and "var"?
• Are there constants in JavaScript?
• What is the temporal dead zone?
• var a, b;  —  Comma used in variable declarations (not to be confused with the comma operator): JavaScript variable definition: Commas vs. Semicolons

---

Label

label:  —  Colon: labels

• What does the JavaScript syntax foo: mean?
• What does ':' (colon) do in JavaScript?

---

Other

123n  —  n after integer: BigInt

• What does character 'n' after numeric literal mean in JavaScript?

#  —  Hash (number sign): Private methods or private fields

• What does the # symbol do in JavaScript?

_  —  Underscore: separator in numeric literals

• Javascript numeric separators?
• Is there a Javascript equivalent to the Ruby syntax using underscores (e.g. 10_000 = 10000) to make larger integers human readable?

What does the $() function do in JavaScript?

That's not part of ECMAScript (JavaScript). It's just a function defined by some library of yours. Usually jQuery or PrototypeJS.

JavaScript function redefinition

Yes, you can redefine a function that way.

Running This:

function never_called_again(args) {
    console.log('Func 1', args);

    never_called_again = function (new_args, x) {
        console.log('Func 2', new_args, x);
    }
}

never_called_again('arg A', 'arg B');

never_called_again('arg A', 'arg B');

---

Yields this:

Func 1 arg A
Func 2 arg A arg B

What does (function () { })();mean?

It creates a closure, a private scope hiding the variables from the global object

// Somewhere...
var x = 2;

...
...
// Your code
var x = "foo" // you override the x defined before.

alert(x); // "foo"

But when you use a closure:

var x = 2;
// Doesn't change the global x
(function (){ var x = "foo";})();

alert(x); // 2

Regarding to the syntax, it's just a self executed function, you declare it and then execute it.

Why does my JavaScript code receive a No 'Access-Control-Allow-Origin' header is present on the requested resource error, while Postman does not?

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

When you are using Postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

This answer covers a lot of ground, so it’s divided into three parts:

• How to use a CORS proxy to avoid “No Access-Control-Allow-Origin header” problems
• How to avoid the CORS preflight
• How to fix “Access-Control-Allow-Origin header must not be the wildcard” problems

---

How to use a CORS proxy to avoid “No Access-Control-Allow-Origin header” problems

If you don’t control the server your frontend code is sending a request to, and the problem with the response from that server is just the lack of the necessary Access-Control-Allow-Origin header, you can still get things to work—by making the request through a CORS proxy.

You can easily run your own proxy with code from https://github.com/Rob--W/cors-anywhere/.

You can also easily deploy your own proxy to Heroku in just 2-3 minutes, with 5 commands:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

After running those commands, you’ll end up with your own CORS Anywhere server running at, e.g., https://cryptic-headland-94862.herokuapp.com/.

Now, prefix your request URL with the URL for your proxy:

https://cryptic-headland-94862.herokuapp.com/https://example.com

Adding the proxy URL as a prefix causes the request to get made through your proxy, which:

1. Forwards the request to https://example.com.
2. Receives the response from https://example.com.
3. Adds the Access-Control-Allow-Origin header to the response.
4. Passes that response, with that added header, back to the requesting frontend code.

The browser then allows the frontend code to access the response, because that response with the Access-Control-Allow-Origin response header is what the browser sees.

This works even if the request is one that triggers browsers to do a CORS preflight OPTIONS request, because in that case, the proxy also sends the Access-Control-Allow-Headers and Access-Control-Allow-Methods headers needed to make the preflight succeed.

---

How to avoid the CORS preflight

The code in the question triggers a CORS preflight—since it sends an Authorization header.

https://developer.mozilla.org/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

Even without that, the Content-Type: application/json header will also trigger a preflight.

What “preflight” means: before the browser tries the POST in the code in the question, it first sends an OPTIONS request to the server, to determine if the server is opting-in to receiving a cross-origin POST that has Authorization and Content-Type: application/json headers.

It works pretty well with a small curl script - I get my data.

To properly test with curl, you must emulate the preflight OPTIONS the browser sends:

curl -i -X OPTIONS -H "Origin: http://127.0.0.1:3000" \
    -H 'Access-Control-Request-Method: POST' \
    -H 'Access-Control-Request-Headers: Content-Type, Authorization' \
    "https://the.sign_in.url"

…with https://the.sign_in.url replaced by whatever your actual sign_in URL is.

The response the browser needs from that OPTIONS request must have headers like this:

Access-Control-Allow-Origin:  http://127.0.0.1:3000
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type, Authorization

If the OPTIONS response doesn’t include those headers, the browser will stop right there and never attempt to send the POST request. Also, the HTTP status code for the response must be a 2xx—typically 200 or 204. If it’s any other status code, the browser will stop right there.

The server in the question responds to the OPTIONS request with a 501 status code, which apparently means it’s trying to indicate it doesn’t implement support for OPTIONS requests. Other servers typically respond with a 405 “Method not allowed” status code in this case.

So you’ll never be able to make POST requests directly to that server from your frontend JavaScript code if the server responds to that OPTIONS request with a 405 or 501 or anything other than a 200 or 204 or if doesn’t respond with those necessary response headers.

The way to avoid triggering a preflight for the case in the question would be:

• if the server didn’t require an Authorization request header but instead, e.g., relied on authentication data embedded in the body of the POST request or as a query param
• if the server didn’t require the POST body to have a Content-Type: application/json media type but instead accepted the POST body as application/x-www-form-urlencoded with a parameter named json (or whatever) whose value is the JSON data

---

How to fix “Access-Control-Allow-Origin header must not be the wildcard” problems

_{I am getting another error message:}

_{The value of the 'Access-Control-Allow-Origin' header in the response
must not be the wildcard '*' when the request's credentials mode is
'include'. Origin 'http://127.0.0.1:3000' is therefore not allowed
access. The credentials mode of requests initiated by the
XMLHttpRequest is controlled by the withCredentials attribute.}

For requests that have credentials, browsers won’t let your frontend JavaScript code access the response if the value of the Access-Control-Allow-Origin header is *. Instead the value in that case must exactly match your frontend code’s origin, http://127.0.0.1:3000.

See Credentialed requests and wildcards in the MDN HTTP access control (CORS) article.

If you control the server you’re sending the request to, a common way to deal with this case is to configure the server to take the value of the Origin request header, and echo/reflect that back into the value of the Access-Control-Allow-Origin response header; e.g., with nginx:

add_header Access-Control-Allow-Origin $http_origin

But that’s just an example; other (web) server systems have similar ways to echo origin values.

---

I am using Chrome. I also tried using that Chrome CORS Plugin

That Chrome CORS plugin apparently just simplemindedly injects an Access-Control-Allow-Origin: * header into the response the browser sees. If the plugin were smarter, what it would be doing is setting the value of that fake Access-Control-Allow-Origin response header to the actual origin of your frontend JavaScript code, http://127.0.0.1:3000.

So avoid using that plugin, even for testing. It’s just a distraction. To test what responses you get from the server with no browser filtering them, you’re better off using curl -H as above.

---

As far as the frontend JavaScript code for the fetch(…) request in the question:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

Remove those lines. The Access-Control-Allow-* headers are response headers. You never want to send them in requests. The only effect of that is to trigger a browser to do a preflight.

What is the (function() { } )() construct in JavaScript?

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created.

It has nothing to do with any event-handler for any events (such as document.onload).

Consider the part within the first pair of parentheses: (function(){})();....it is a regular function expression. Then look at the last pair (function(){})();, this is normally added to an expression to call a function; in this case, our prior expression.

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.

This is why, maybe, you confused this construction with an event-handler for window.onload, because it’s often used as this:

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Correction suggested by Guffa:

The function is executed right after it's created, not after it is parsed. The entire script block is parsed before any code in it is executed. Also, parsing code doesn't automatically mean that it's executed, if for example the IIFE is inside a function then it won't be executed until the function is called.

Update
Since this is a pretty popular topic, it's worth mentioning that IIFE's can also be written with ES6's arrow function (like Gajus has pointed out in a comment) :

((foo) => {
 // do something with foo here foo
})('foo value')

---

Related Topics