collapsing function and variables name

Question

Here is the fact in Head first js,

when the browser evaluates a function declaration, it creates a function as well as a variable with the same name as the function, and stores the function reference in the variable.

my question is, what if we also created a variable named just as same as the function.

I really confused, also some one please can suggest me a text book to understand these type of things?!

I tried this,

var sayHello = 2;
function sayHello() {
    console.log("Hello");
};

sayHello();

I expect that at first it makes a reference for "2", after declaring a function, it reassign it to the function, though, it raised and error saying that

"sayHello" is not a function

is there any priority or something?!