How to reach parent context in an arrow function? [duplicate] - javascript

This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
arrow function and this
(2 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 7 months ago.
I'm trying to create a helper function. This function needs to reach some variables & objects of the context/class in which it is used. But, I could not achieve to do this. Is it possible to write functions to use like this?
Example:
// ExampleClass.js
const { demoArrowFunc, demoNormalFunction } = require('./MyHelpers')
class ExampleClass {
exampleVar = "EXAMPLE VAR";
constructor() {
this.firstVar = 20
}
logClassVars() {
console.log(this.exampleVar, this.firstVar);
}
tryArrows() {
demoArrowFunc();
}
tryNormal() {
demoNormalFunction()
}
}
let example = new ExampleClass()
example.tryArrows() // Returns -> undefined undefined
example.tryNormal() // Returns -> undefined undefined
// Helpers.js
const demoArrowFunc = () => {
console.log(this.exampleVar, this.firstVar);
}
const demoNormalFunction = function() {
console.log(this.exampleVar, this.firstVar)
}
module.exports = {
demoArrowFunc,
demoNormalFunction
}
Feel free to ask questions if I'm not clear. Thanks!

Related

Why don't anonymous functions change context - Does it have to do with the call stack? [duplicate]

This question already has answers here:
arrow function and this
(2 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 21 days ago.
This code keeps the context in window:
const a = function () {
console.log(this);} //window
And this code changes the context to a2:
const a3 = {
anyFunction: () => { console.log(this) } // window
}
a3.anyFunction();
Why this code keeps the context in window? how does the call stack works with anonymous functions that makes the context stay the same as if the function was not in the context of a4?
const a4 = {
anyFunction: () => console.log(this) // window
}
a4.anyFunction();

Constructor value is not accessible in function [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed last month.
Here I have a very simple class and I have a constructor inside of it and in constructor I am declaring a value donut_count but when I try to access that value in another function it says undefined why it is undefined:
class DonutMaker {
constructor() {
var donut_count = 1;
this.target = document.getElementById("donut_creater");
this.target.addEventListener("click", this.donutCreate);
}
donutCreate() {
console.log(this.donut_count);
}
}
let obj1 = new DonutMaker();

How to call a arrow function using addEventlistenr before initializing the arrow function? [duplicate]

This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 6 months ago.
if I use arrow function instead of normal function flip and do add addeventlistiner to it before initializing the arrow function then I am not able to call the function.
**
Not Working
console.log(cards);
cards.forEach((card) =>
card.addEventListener("click",flip));
var flip = ()=>{
console.log("card flipped");
}
output : on clicking of the card it should give me the output as "card flipped",
but it does not do anything.
Working
var flip = ()=>{
console.log("card flipped"); }
const cards = document.querySelectorAll(".card");
console.log(cards);
cards.forEach((card) =>
card.addEventListener("click",flip));
output : on clicking of the card it is giving me the output as "card flipped",
How do I call the arrow function before initializing it ?
You can't call an expression function before the definition.
However, if you wanted to use a declared function instead of an arrow function with the 'function' tag, you could arrange your code in the way you described.
Example:
function flip() {
console.log('card flipped)
}
Similar question:
why-can-i-use-a-function-before-its-defined-in-javascript

javascript which type of function signature / style is better and we should use in real time? [duplicate]

This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 1 year ago.
So I am confused between all these four styles of declaring and defining a function ? all these work similarly but there must be a subtle difference between them :D
var sayHello = function() {
console.log("hello")
console.log(arugments)//works
console.log(this)//works
}
function sayhello() {
console.log("hello")
console.log(arugments)//works
console.log(this)//work
}
var SayHello = function f() {
console.log("hello")
console.log(arugments)//works
console.log(this)//work
}
var SayHellO = () =>{
console.log(arugments)//doesnt works
console.log(this)//works
}

`this` scope changes on import [duplicate]

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
When should I use arrow functions in ECMAScript 6?
(9 answers)
Closed 1 year ago.
I have such a situation in my NodeJS project:
//utility.js
module.exports = () => {
console.log(this.property1);
}
//main.js
const utilityFunc = require(./utility);
class MyClass {
constructor(name){
this.property1 = name;
}
foo(){
//...
utilityFunc();
}
}
const myObject = new MyClass('A name');
myObject.foo();
What I expect is to output 'A name', but property1 is not defined in the scope of this. This code seems to work if I write the function in main.js instead of importing it. I'm trying to figure out why this happens.

Categories