This question already has answers here:
function.name returns empty string if the function is added to an object by property
(2 answers)
Closed 1 year ago.
So, I'm using freecodecamp and it says that the following function is anonymous:
const myFunc = () => {
const myVar = "value";
return myVar;
}
console.log(myFunc.name);
Well, how come it's anonymous if its name is clearly "myFunc"?
You are setting myFunc to reference an anonymous function. myFunc has a name, the anonymous function it references does not.
const myFunc = () => {
const myVar = "value";
return myVar;
}
// This returns myFunc name
console.log(myFunc.name);
// This returns anonymous function's name which is blank
console.log(
(() => {
const myVar = "value";
return myVar;
}).name
);
Related
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 2 years ago.
About methods to be "called" from outside of objects, can I say these three ways below act the same inside of my code?
Example:
var boat =
{
peter: () => {console.log("a")},
james: function() {console.log("b")},
john() {console.log("c")}
}
These are the ways I know how to apply functions inside of objects/variables, anyway...
I'd like to know if there is any major difference in each form, since all three would be called the same way:
boat.peter();
boat.james();
boat.john();
In your example there is no difference, but if you'll watch this example
const obj = {
someVar: 100,
// this = obj here => the log will print '100' because obj have someVar
functionLog: function () {
console.log(this.someVar);
},
// this = global (widnow) here => the log will print undefined because doesn't have someVar
// this is the same as writing varName: function () {console.log(this.someVar);}.bind(window) or
// function () {console.log(this.someVar);}.bind(this) while this = global (window)
arrowLog: () => console.log(this.someVar),
// this = obj here => the log will print '100' because obj have someVar
// this is a prettier way to write a regular function in es6, when compiled to es5, it'll look just like functionLog
memberFunctionLog() {
console.log(this.someVar); // this = obj here
}
}
obj.arrowLog();
obj.functionLog();
obj.memberFunctionLog();
arrow function is just like a regular function that you bind to specific scope, the scope will be the scope of where you declare it, it's useful mostly in classes
class A {
constructor() {
this.someVar = 100;
this.arrowLog = () => console.log(this.someVar);
}
memberLog() {
console.log(this.someVar);
}
}
const a = new A();
const arrowLog = a.arrowLog;
const unbindedLog = a.memberLog;
const bindedLog = a.memberLog.bind(a); // Just like an arrow function, keeps it's scope
arrowLog(); // will print 100, because the arrow function was declared where this = specific instance of A, and arrow function keeps it's scope
// unbindedLog(); // will print undefined, because unbindedLog was declared where this = global (window) and memberLog is not an arrow function
bindedLog(); // Will print 100, because it was binded with a, so this = a
This question already has answers here:
Why does `obj.foo = function() { };` not assign the name `foo` to the function?
(3 answers)
Closed 4 years ago.
Suppose I have an 2 objects x and y. The details are written in the code below.
let x = {
publish: function() {
console.log(this.publish.name);
}
};
let y = {};
y.publish = function() {
console.log(this.publish.name);
};
x.publish();
y.publish();
I was getting difference in the outputs calling x.publish() and y.publish().
The former returned the name of the function while the latter returned empty. Can anyone explain why is this happening, and is there any other
possible way I can retrieve the function name in latter(WITHOUT HARDCODING). I am using NodeJs version 8.
Since the function in the second case doesn't have any name associated with it so you get empty string.
let x = {
publish: function() {
console.log(this.publish.name);
}
};
let y = {};
y.publish = function() {
console.log(this.publish.name);
};
let z = {};
z.publish = function hello() {
console.log(this.publish.name);
};
x.publish();
y.publish();
z.publish();
In your second case y.publish, you're assigning a variable identifier to the function but not giving it a name. that would be y.publish = function publish()
Basically any time an anonymous function expression appears on the right-hand side of something like an assignment or initialization, like:
var boo = function() { /*...*/ };
(or it could be let or const rather than var), or
var obj = {
boo: function() { /*...*/ }
};
or
doSomething({
boo: function() { /*...*/ }
});
(those last two are really the same thing), the resulting function will have a name (boo, in the examples).
There's an important, and intentional, exception: Assigning to a property on an existing object:
obj.boo = function() { /*...*/ }; // <== Does not get a name
Search for SetFunctionName on the following:
1. Property initializer semantics
2. Assignment Operator Semantics
This question already has an answer here:
Why doesn't my arrow function return a value?
(1 answer)
Closed 5 years ago.
Is there any difference between returning a value in an arrow function, vs adding the body and typing return?
As far as I'm aware they are the same.
Here's a session:
let a = () => 1;
a()
1
let b = () => { return 1; }
b()
1
a
() => 1
b
() => { return 1; }
Is there any situation when these are different?
One difference is that returning object literals using the implicit return syntax requires the object literal to be wrapped in parenthesis.
var foo = () => { bar: "foobar" }; //This function returns undefined
var foo = () => { return { bar: "foobar" }; }; //This function returns an object
var foo = () => ({ bar: "foobar" }); //This function returns object
As far as I'm aware, this is the only difference.
concise body arrow functions implicitly returns value whereas for multi line arrow functions you must explicitly return value.
In your case both will have same net result
This question already has answers here:
Accessing variables from other functions without using global variables
(10 answers)
Closed 5 years ago.
Using the following code how can I access a from inside log2?
(function() {
function log() {
var a = "string";
}
log()
function log2() {
console.log(log.a);
}
console.log(log);
log2();
})()
Variables declared with the var keyword in JavaScript are function-scoped. This means that they cannot be accessed from outside the function they were declared in without returning them. The solution is to declare the variable within your outer immediately-invoked function, which will enclose the variable and make it available to the two inner functions:
(function() {
var a;
function inner1 () {
a = 'string';
}
function inner2 () {
console.log(a);
}
inner1();
inner2(); // => logs 'string'
})()
console.log(a); // => logs undefined, because a is enclosed
This question already has answers here:
JavaScript object functions and `this` when unbound and returned in expression/parens
(2 answers)
Closed 5 years ago.
Consider the following variables:
var obj = {
value : 'from object',
getValue : function() { return this.value; }
};
var value = 'from global';
Now, obj.getValue() evaluates to 'from object'. And if I get a reference to just the getValue function and call it:
var f = obj.getValue;
f();
f evaluates to 'from global'.
My question is why does (obj.getValue)(); return 'from object'?
I would have thought that the first set of parenthesis would evaluate to a plain reference to the getValue function and then when calling that result, this would be the global context. Why does the interpreter assume this is a call on the object?
When you call var f = obj.getValue();, you are running the getValue method from the object. When you call var f = obj.getValue;, you are reassigning the function to f, and then when you call f, it has no ties to obj, it is simply called as a global function.