This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 2 years ago.
$('#title').keyup( () => {
const title_val = $(this).val();
console.log('before');
if (title_val.length >= 20){
console.log(title_val);
}
console.log('after');
});
console.log('before') and console.log('after') works. If-statement only works if I use function() instead of () => {...}, even if the condition is satisfied. Why does it behave like this?
There is no this operator in arrow functions, only in function functions..
when using this in an arrow function, it doesn't refer to the function scope; rather, to the parent scope (usually window)
Related
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
What is the difference between "let" and "var"?
(39 answers)
Closed 3 months ago.
I want to be able to define a function (either regular or arrow) globally in the js window like this:
function myRegularFunction(){
console.log("hello from the regular function");
}
const myArrowFunction = () => {
console.log("hello from the arrow function");
}
and then be able to invoke it elsewhere like this:
window['myRegularFunction']();
window['myArrowFunction']();
When I define functions as stated above, I am then able to inovke the regular function, but the arrow funcion is not appearing in the js window, and thus I cannot invoke it.
From the console, I get:
window['myArrowFunction']
undefined
Can anyone help me with this issue?
This question already has answers here:
Arrow Functions and This [duplicate]
(5 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 1 year ago.
Why is $(this) returning undefined instead of the clicked element?
I've replaced $(this) with event.target and it works fine but would like to understand the issue with $(this), thank you!
$('.nav-search-options').on('click', (event) => {
console.log($(this))
})
#JamesJavascript.
It is partially right what Justinas said in the comment about arrow function - although there are more things to add.
Arrow functions do not have their own "this", instead they bind one from their parent scope.
To see what I mean, try this and see that it returns you the window object:
const myFunction = () => {
console.log(this);
};
// call it
myFunction();
Read more about it here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I have es6 class with constructor and validation method.
class Popups {
constructor(selector) {
this.app = selector;
}
validate() {
$.validator.addMethod('atLeastOneLowercaseLetter', (value, element) => {
return this.optional(element) || /[a-z]+/.test(value);
// how to replace `this` ??
},
'Must have at least one lowercase letter'
);
}
}
My this refers to my Class, but I need get $.validator with my validate form. How i can replace this?
If i write $.validator.optional(element) || /[a-z]+/.test(value) I get error $.validator.optional is not a function
In that case don't use an arrow function as it does not have it's own this. Use a normal function expression as the callback instead.
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
i have this object literal
let p = {
name : 'Amir',
say: () => {
console.log(this.name)
console.log(this)
}
}
and I want the say function works using this
p.say();
but the arrow function obviously gets the window object as 'this'. I know I could use a regular function for 'say' instead of arrow and it will work fine.
BUT
I would like to ONLY change the call to say function to make it work, but the binding won't work.
I mean something like p.say.bind(p)() or p.say.call(p) aint gonna work as desired.
Is it possible to change the call to function ONLY and not the say function?
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I prefer do function declaration
doSomething() //still works
function doSomething() {}
over
var doSomething = function() = {}
doSomething()
because with the function declaration, I don't have to worry about the order, it just got hoisted at the top. Now when it come to es6, my coworker like to do const doSomething = () => {} because for them they dislike the word 'function'. I lost the hoisting how can I fix it?
I hope I can do this
abc()
abc() => {}
but I have to use babel so that the word function can be ignore to make a function in es6/es7?
No you can't:
abc();
abc() => {console.log('test');}
Moreover, arrow functions do now have their own this context and cannot be used as constructors. Which means they are not only for people who do not want to use the function keyword.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions