DEV Community

kambala yashwanth
kambala yashwanth

Posted on

Why function deceleration overrides


var myName = "Richard"; 

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

console.log(typeof myName)

////output is string

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


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
 
yashwanth2804 profile image
kambala yashwanth

Thank you for educating ! CAP

Collapse
 
lysofdev profile image
Esteban Hernández

Great answer!

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);
}