DEV Community

kambala yashwanth
kambala yashwanth

Posted on

Why function deceleration overrides

#help #javascript 
 var myName = "Richard"; function myName () { console.log ("Rich"); } console.log(typeof myName) ////output is string
Enter fullscreen mode Exit fullscreen mode

but when i code function in other way like in above code, giving different output

var myName = "Richard"; myName = function() { console.log ("Rich"); } console.log(typeof myName) ////output is function
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
canderson93 profile image
Carl Anderson • • Edited

What's happening here is that you've hit the difference between a function expression and function declaration.

function myName () { console.log ("Rich"); }

This is a function declaration, and it is subject to a javascript feature called hoisting, which moves it to the top of the scope it's declared in. This means that when you set var myName = "Richard", it actually comes afterwards in the order of execution and overwrites the function.

By contrast, myName = function() { ... } is a function expression, and it is evaluated in place, and behaves as you'd expect with your code laid out as it is.

I actually just wrote a post on this exact thing -- carlanderson.xyz/function-declarat...

Collapse
 
lysofdev profile image
Esteban Hernández •

Great answer!

Collapse
 
yashwanth2804 profile image
kambala yashwanth •

Thank you for educating ! CAP

Collapse
 
larsklopstra profile image
Lars Klopstra ⚡ •

It's already explained but you are re-assigning your name variable (the string) to the function.

I'd do this:

// Good :D const myName = 'Richard'; const logMyName = () => { console.log(myName); } /* This example below will throw an error because you can't re-assign a constant variable so use the one I wrote above :) */ // Bad :( myName = () => { console.log(myName); }