I stopped learning React because of bind()

I remember the first time I tried learning React I got to the bind()? function(having never learned about it in JavaScript or the “this” keyword for that matter) and gave up.? I couldn’t wrap my mind around it and the tutorial I was using never cleared up my doubts about it.? I had a feeling that there was something that I was missing from my study of JavaScript.? So, I decided to go back to study it some more.

When I first tried to learn JavaScript. I used freecodecamp.? I think that it’s a great free resource for beginners.? When I first started learning I was using the legacy material before it was called legacy.? After completing the first algorithms section I moved on to start building projects, but this was a mistake and I will explain why.

I think many people make this same error.? They’re in a rush to get a job so they don’t fully master(or learn a sufficient amount to feel comfortable with a framework) JavaScript before moving on to a front-end framework.? I decided to revisit the fundamentals of JavaScript using an udemy course.

In this course I learned about objects with functions and how the aforementioned bind() function is used with those functions to bind the “this” keyword(which refers to the object calling the function) to a certain object.? This is for cases where different objects want to use the same function that makes use of the “this” keyword.??

What was really interesting about the example used was the fact that the function was actually contained in one of the objects.? I will attempt to simplify and generalize the example. So you have object A which has a function called doSomething, which uses variables from the object using the “this” keyword.? Object b can also call that function but you have to remember to bind the “this” keyword to object b like the following:

A beginner understanding

const objectA = {

variableA : 1,

variableB : 2,

doSomething(){

return this.variableA + this.variableB

}

}

const objectB = {

variableA = 1,

variableB = 3,

}

const ds = objectA.doSomething;

//here the “this” keyword is now undefined because the function exists outside of an object.

const obds = ds.bind(objectB);

//now the “this” keyword refers to objectB in obds

objectA.doSomething(); // 3 expected

obds(); //4 expected

You can ofcourse add parameters to the function and send arguments when you call it.? How would that look?

Next level understanding

const objectC = {

variableA: 1,

variableB: 2,

doSomething(variableC){

return this.variableA + this.variableB + variableC;

},

};

console.log(objectC.doSomething(2));//expected 5

const dsC = objectC.doSomething;//

const obdsC = dsC.bind(objectB);

console.log(obdsC(2)); //expect 6

Another case where you would need to use the bind() function is when calling an event listener, because the “this” keyword gets assigned to the element calling the event listener rather than to the object that the function(or method I should say) is contained in.

let objectD = {

counter: 0,

?? incrementer(){

???? this.counter++;

???? console.log('counter is',this.counter);

?? },

};

let btn = document.getElementById('btn');

function updateBTN(){

??btn.innerText = objectD.counter;

}

const updateCounter = objectD.incrementer.bind(objectD);

//notice that if you delete .bind(objectD) from the above line you will get "counter is NaN" in console when you click the button

btn.addEventListener('click',() =>{

??updateCounter();

??updateBTN();

});

Bind can also be used to set other values, not just the value of this.? For example lets say you want to copy a function that has several parameters and you want to set some to default values.

Somewhat advanced level understanding

//use bind to set default values for parameters when copying functions

const employeeDiscount = function(rate, item){

?? console.log('item',item,'rate',rate)

?? return item - (item * rate);

}

//in the following the first argument is for "this" but "this" but it's not being used.? It's? function that we're copying not a method.? So we set it to null. The next argument matches the parameters of the function employeeDiscount

const managerDiscount = employeeDiscount.bind(null, 0.2);

//if you just do employeeDiscount(0.2) you'll get item undefined

console.log('managerDiscount',managerDiscount(10))//expected 8

Link to a codepen of the above code:? https://codepen.io/king-jones-frazier/pen/OJYgBYa?editors=1111

A good stackoverflow question I found that exemplifies the importance of learning Javascript well before jumping into React.? All of the answers mentioned how the poster's misunderstanding has to do with not understanding a certain aspect of JavaScript rather than the problem being with React. https://stackoverflow.com/questions/58933988/reactjs-bind-method-to-class-component

Now how does this relate to bind in React?? That I will save for another article.