자바스크립트 즉시 실행 화살표 함수 구조 질문입니다.

Question

1

싫어요

안녕하세요, 만나서 반갑습니다.

ES6 의 화살표 함수에 대해서 공부하고 있는데요.

"화살표 함수도 즉시 실행 함수로 사용할 수 있다." 라고 하면서 아래와 같은 코드 예제가 있었습니다.

const person = ( name => ({
    sayHi() { return `Hi? My name is ${name}.`; }
}))('Lee');

console.log(person.sayHi());  // Hi? My name is Lee.

위의 코드에서 name 매개변수 왼쪽에 있는 소괄호는 즉시 실행함수를 시작하는 소괄호인 것은 알겠는데, 화살표 오른쪽의, 함수 본문을 또 다시 소괄호로 감싸는 이유는 무엇인가요?

검색해보니 화살표 함수에서 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 () 로 감싸주어야 한다. 라고 하는데...

읽어 주셔서 감사합니다!

score 2 · Accepted Answer

예로 들어주신 코드를 풀어보면 이렇게 돼요.

const person = (function(name) {
    return {
        sayHi: function() {
            return `Hi? My name is ${name}`;
        }
    };
})('Lee');

즉, 즉시 실행 함수의 반환값은 sayHi 함수가 아니라 sayHi 함수를 프로퍼티로 갖는 객체에요.

함수를 반환하려면 아래 처럼 되어야해요.

const sayHi = (name => () => `Hi? My name is ${name}`)('Lee');
console.log(sayHi());

참고로 함수를 반환하는 함수는 고차함수(high-order function)라고 하고 많이 사용되는 패턴이에요.