为什么JavaScript调用对象方法后控制台会额外输出undefined？

产生额外undefined的核心原因 #

• JavaScript中所有函数如果没有显式声明return返回值，默认会返回undefined，你定义的message、interest两个对象方法都没有写返回值，所以调用后得到的结果就是undefined。
• 你的代码存在两次打印逻辑：
  1. 调用kim.message()时，方法内部先执行console.log(statement)，输出你预期的数组内容
  2. 外层console.log(kim.message())会把kim.message()的返回值（即默认的undefined）再打印一次，这就是多出来的第一行undefined的来源
     kim.interest()的调用逻辑完全一致，所以会出现第二行额外的undefined。

修复方法 #

任选一种即可：

方案1：去掉外层的打印逻辑，直接调用对象方法 #

let statement = ['Kim is a good, kind and smart boy'];
    
let kim = {
  message () {
    console.log(statement);
  },
  interest () {
    console.log('sports');
  }
}
// 直接调用方法，无需再包裹console.log
kim.message();
kim.interest();

方案2：给方法添加返回值，保留外层打印逻辑 #

let statement = ['Kim is a good, kind and smart boy'];
    
let kim = {
  message () {
    // 把要输出的内容返回
    return statement;
  },
  interest () {
    // 把要输出的内容返回
    return 'sports';
  }
}
console.log(kim.message());
console.log(kim.interest());

内容的提问来源于stack exchange，提问作者Kim