Callback function cannot access variable within parent function's scope

Question

In the below code, variable text is not accessible in the findTextToDelete function (it generates an error)

array = ['a', 'b', 'removeThis', 'c'];
removeText("removeThis");

function removeText(text) {
    array.splice(array.findIndex(findTextToDelete),1);
}

function findTextToDelete(element) {
    return element === text;
}

I am able to get around this by creating a global variable 'globalText':

var globalText = "";
array = ['a', 'b', 'removeThis', 'c'];
removeText("removeThis");

function removeText(text) {
    globalText = text;
    array.splice(array.findIndex(findTextToDelete),1);
}

function findTextToDelete(element) {
    return element === globalText;
}

console.log(array)

However I am trying to understand why the first method does not work.

It seems there must be a better way to do this. Is there a way to pass 'text' into the callback function?

Any help would be appreciated.

Nina Scholz · Accepted Answer · 2018-07-29 14:55:14Z

4

You could use a closure over text for finding the element.

function removeText(text) {
    array.splice(array.findIndex(findTextToDelete(text)), 1);
}

function findTextToDelete(text) {
    return function (element) {
        return element === text;
    }
}

var array = ['a', 'b', 'removeThis', 'c'];

removeText("removeThis");
console.log(array)

edited Jul 29, 2018 at 14:55

answered Jul 29, 2018 at 14:39

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

n8o · Accepted Answer · 2018-07-29 14:40:11Z

1

Yes, I think you are confused with closure.

Callback function doesn't have caller's scope. So you can't access the variable text in findTextToDelete.

If you want to access the variable, pass it to the callback function as an argument.

answered Jul 29, 2018 at 14:40

n8o

1,9533 gold badges24 silver badges44 bronze badges

Comments

Richard · Accepted Answer · 2018-07-29 14:42:19Z

Locals defined in one function are only available to other functions that are defined within the first function. The scope of locals defined in a function is limited to that function. This is generally known as lexical scoping. (Other languages have different rules, but lexical is common in imperative languages.)

So you need to define a function inside removeText to access text.

One way is to just use a function literal rather than a named function:

function removeText(text) {
    globalText = text;
    array.splice(array.findIndex(function (element) {
        return element === globalText;
    }, 1);
}

Another way is to forward the extra value:

function removeText(text) {
    globalText = text;
    array.splice(array.findIndex(function (el) { returnfindTextToDelete(el, text); }, 1);
}

function findTextToDelete(element, text) {
    return element === globalText;
}

(If you're not stuck with backward compatibility then arrow functions make both easier to write.)

Collectives™ on Stack Overflow

Callback function cannot access variable within parent function's scope

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related