Arrow Function works sometimes even though it is called before declaration

Question

I wanted to implement rock, paper, scissors in JS. updateScore doesn't work in line 13 and it is because function is called before declaration. But the code starts working if line 13 is commented out, even though I call it in line 39 and 44 which are again before declaration. Can someone explain why this happens? Code attached below:

const form = document.querySelector("form");
let userInput = document.querySelector("#userInput");
let computerInput = document.querySelector("#computerInput");
let h1 = document.querySelector("h1");
let p = document.createElement('p');
let score = document.createElement('p');
form.insertAdjacentElement("afterend", score);
let userScore = 0;
let computerScore = 0;



updateScore();
score.insertAdjacentElement("afterend", p);
userInput.addEventListener("change", (evt) => {
    userInput.value = userInput.value.toUpperCase();
    //console.log(userInput.value);
    if ((userInput.value != "ROCK") && (userInput.value != "PAPER") && (userInput.value != "SCISSORS")) {
        alert("Pls enter rock, paper or scissors only!")
        userInput.value = "";
    }
})

form.addEventListener("submit", (evt) => {
    evt.preventDefault();
    if (userInput.value != "") {
        findwinner(form.userInput.value);
    }
    else alert("You can't win without a weapon!");
});
computerInput.addEventListener("change", () => alert("Nice try cheater!"));

const findwinner = (u) => {
    computerInput.value = findInput();
    if (u == computerInput.value) p.innerText = "It's a tie";
    else if (u == 'ROCK' && computerInput.value == "PAPER" || u == 'PAPER' && computerInput.value == "SCISSORS" || u == 'SCISSORS' && computerInput.value == "ROCK") {
        p.innerText = "You Lose :(";
        computerScore++;
        updateScore();
    }
    else {
        userScore++;
        p.innerText = "You Win :)";
        updateScore();
    }
}

const findInput = () => {
    let temp = Math.floor(Math.random() * 3);
    switch (temp) {
        case 0:
            return 'ROCK';
            break;
        case 1:
            return 'PAPER';
            break;
        case 2:
            return "SCISSORS";
            break;
        default:
            break;
    }
}

const updateScore = () => {
    score.innerText = `Score is:- ${userScore}:${computerScore}`;
    // score.append(p);
}

A function can not be called before it definition. Please follow this for more detail https://stackoverflow.com/a/42266568/1964336 — jatinder bhola, May 27 '22 at 16:41
const is not going to be hoisted. This is the case where you need to define everything before you use it. — epascarello, May 27 '22 at 16:44
Functions declared with `var`, `let`, or `const` are not hoisted. Use `function` to define the function and you can call it before the definition. — Barmar, May 27 '22 at 16:44
The difference is that lines 39/44 are wrapped inside a function, so those lines are not executed until the function is called, which is after the declaration happens. However on line 13, the code runs immediately and you get the error. — James, May 27 '22 at 16:46
@James the function is defined in the end, so the function calls from with another function are also before the declaration — bharadwaj, May 27 '22 at 17:09
The code in your question should be reduced to a [MCVE]. The issue you're facing can be reproduced with only a few lines of code. As it stands, your code cannot be run as we lack a corresponding HTML document. — user229044, May 27 '22 at 17:28

score -1 · Answer 1 · answered May 27 '22 at 17:22

-1

I think I figured out what is going on. Although lines 39 and 44 in the source file occur before definition of the function, in execution they only happen after some event has occurred( in this case change/submit). The event occurs only after the compilation of the source file-including function definition. So no error occurs.

Please read this for further clarification- https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

answered May 27 '22 at 17:22

bharadwaj

21
4

Your link has nothing to do with your answer. Hoisting is not involved here. – user229044 May 27 '22 at 17:26
@user229044 Sorry, I should have made it clearer. The reason I included the link is because there it is mentioned order of execution matters and not the order in source. Hoisting isn't involved here. I'll try to be clearer next time – bharadwaj May 27 '22 at 17:41

Arrow Function works sometimes even though it is called before declaration

1 Answers1