Two different lines that define the variable "listItem"?

By the end of the video, this section of code starts with:

//New Task List Item

var createNewTaskElement = function(taskString) {

//Create List Item

var listItem = document.createElement("li");

So the variable listItem is defined with the .createElement method in the last line above, and listItem is also contained within the function createNewTaskElement.

Several lines later, the code asks the browser to:

return listItem;

Okay, so far, so good. But then, under the Add New Task section...

//ADD NEW TASK

var addTask = function() {

console.log("Add task...");

//Create a new list item with the text from #new-task:

var listItem = createNewTaskElement("Some New Task");

I am confused because we have now 1) redefined listItem, and 2) redefined it as calling the function that contained it in the first place!

I don't understand why you would redefine the listItem variable at all, instead of creating a NEW variable here with a NEW name. And I don't understand why you would write code that seems like it would loop back on itself like that. I know I'm a beginner here, but this feels something like...

var car = function(transportation) {

var steeringWheel = document.createElement("steering")

}

var steeringWheel = car("Some New Transportation");

The steeringWheel is inside the car. So how can you later say that same car IS the steeringWheel?

Am I making sense here? Am I looking at this all wrong? Am I missing something? Can anyone help me out?

Thanks, Lance