可以缩短此箭头功能吗？ 这些都一样吗？

Question

If I start with this:

const obj1 = {
    doSomething: () => {
        console.log('hello world 1');
    },
};

Can it safely be shortened? Are these the same?

const obj2 = {
    doSomething: () => console.log('hello world 2'),
};

Why is this one so strange?

const obj3 = {
    doSomething: console.log('hello world 3'),
};

I noticed obj3 runs itself and can't do obj3.doSomething() .

https://repl.it/JEGD/1

Answer 1

1 and 2 are almost the same.

When you provide a statement (instead of a block) on the RHS of the arrow, the function returns the result of evaluating that statement.

In the first example, the function returns undefined because there is no return statement.

In the second example, the function returns undefined because console.log returns undefined .

There isn't a practical difference here, but there could be in similar cases.

---

As for the third example…

In case 1, you create a function with a function expression.

In case 2, you create a function with an arrow function.

In case 3, you don't create a function at all.

You call console.log immediately and assign its return value (which, as I mentioned above, is undefined ) to doSomething .

Answer 2

The reason that obj3.doSomething() is inoperable is because you are assigning the doSomething property of the object to the returned value of console.log(...) . Since console.log does not return anything, it simply executes and leaves doSomething empty.

obj1 and obj2 however are essentially the same thing. If you were to replace console.log in obj2 with (x) => x * x , then the return is implied and not required, however surrounding the function body in {} like you have in obj1 would then still require the use of the return keyword.