Javascript 尝试获取用户输入时未定义

在下面，我试图从输入字段中获取文本。然后，我尝试从该数据创建一个对象。即使在我的事件侦听器中返回userData，我也会得到未定义的userData

class Name {
  constructor(name) {
    this.name = name;
  }
}

const getUserData = (function() {
  
    let userInput = document.getElementById('name').value;

    return { name: userInput};

})();

document.getElementById("btn").addEventListener("click", function (event) {
    event.preventDefault();
    const userData = getUserData();
});

console.log(userData);
const nameObj = new Name(userData);
console.log(nameObj);

类名{
建造师（姓名）{
this.name=名称；
}
}
const getUserData=函数（）{
让userInput=document.getElementById（'name'）.value；
返回{name:userInput}；
};
document.getElementById（“btn”）.addEventListener（“单击”），函数（事件）{
event.preventDefault（）；
const userData=getUserData（）；
console.log（userData）；
const nameObj=新名称（userData）；
console.log（nameObj）；
});
#btn{
高度：30px；
宽度：100px；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边缘顶部：5px；
}
.表格容器{
填充：10px；
}

点击我
为什么不在控制台中读取错误？“未捕获引用错误：未定义userData”无法访问范围外的变量。JS是异步的
console.log（）
不会等待用户输入，例如：在C:）这就是问题所在。如何保存数据以便在事件侦听器回调函数外部使用。我希望能够创建一个对象，以便以后在代码中使用。但是，以后如何在事件侦听器回调函数之外使用新对象？