Why the private property does not have the same scope?

Why the private property does not have the same scope?

I am studying module pattern with javascript and the code below is my
first try, a list of tasks. I have a small issue with variable's scope.
In one of my public methods I can access the tasks variable, in another
one I can't. I will try to give more details.
I have my public method "addItem" which basically does a "push" in an
array tasks.push(values); in this moment it works well, my array gets the
new data.
But when I try to show the same variable in my other public method
"deleteTask", example: console.log('deleteTask: ', tasks);. It returns me
"deleteTask: undefined"
In the second code snippet, I am showing, how I access the methods.
Well, basically I am trying to understand, why am I not able to access the
private variable in "deleteTask"? And why can I in "addItem"? What the
difference? It looks like simple, but I am not getting so far.
var todoModule = (function ($) {
var tasks = [];
function doListOfTasks() {
for(var i=0; i<tasks.length; i++){
$('<li>', {
name : 'liTask',
id : 'liTask'+i,
html : tasks[i].title + ' - '
}).appendTo('#listOfTasks');
$('<input>', {
type : 'button',
name : 'delTask',
id : 'delTask'+i,
value : 'Del'
}).appendTo('#liTask'+i);
$('#delTask'+i).data('idTask', i);
}
}
function clearListTasks(){
$('#listOfTasks').html('');
}
return {
init: function(){
this.getListTasks();
},
getListTasks: doListOfTasks,
addItem: function( values ) {
tasks.push(values);
clearListTasks();
this.getListTasks();
console.log('addItem: ', tasks);
},
deleteTask: function(item) {
console.log('deleteTask: ', tasks);
var tasks = $.grep(tasks, function(value, item) {
//console.log('value: ', value);
//console.log('item: ', item);
return value != item;
});
clearListTasks();
doListOfTasks();
}
};
}(jQuery));
My HTML:
Here I am accessing the public methods through events:
<script type="text/javascript">
$( document ).ready(function() {
todoModule.init();
$( '#btnAdd' ).click(function() {
todoModule.addItem({
title: $('#tarefa').val(),
date: '01/01/1999',
flag: 0
});
});
$('ul').on('click', 'input', function() {
var idTask = $('#'+this.id).data('idTask');
todoModule.deleteTask(idTask);
});
});
</script>
I am studying this pattern through this link below:
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript