[javascript] 함수를 인자로 받을때 질문 , foo()()

Question

[javascript] 함수를 인자로 받을때 질문 , foo()()

조회수 1370회

javascript

function

parameter

0

싫어요

안녕하세요. 클로저를 공부하다가 궁금한게 생겼습니다. 아래의 함수는 원래 foo()()가 없고 주석처리된 부분이 들어가있었는데요. foo()()를 해보니까 출력이 잘 되더라구요.


var color = 'red';
function foo() {
    var color = 'blue'; // 2
    function bar() {
        console.log(color); // 1
    }
    return bar;
}
foo()(); # blue

// var baz = foo(); // 3
// baz(); // 4

질문1. foo함수의 내부함수인 bar함수를 호출하고 싶을때 foo()()와 같은 방식으로 괄호를 붙여서 사용하는것인가요? 그렇다면 bar의 이름을 붙여준건 return 해주기 위해서 이름을 붙여준것인가요.

질문 2. 처음에 foo함수안의 color을 출력하고 싶었는데 foo.color을 하니까 undefinded가 나오더라구요. 아마도 foo()()에서 내부함수가 실행되었던것은 return bar로 내부함수를 return해주어서 가능한것이겠죠..?

bar함수를 불렀던것처럼 color를 혹시 bar baz=foo()와 같이 인스턴스를 생성하면 함수안의 color변수의 값을 가져올 수 있는 방법이 따로 있을까요?

질문 읽어주셔서 감사합니다! :)

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 2 · Accepted Answer

질문1. foo함수의 내부함수인 bar함수를 호출하고 싶을때 foo()()와 같은 방식으로 괄호를 붙여서 사용하는것인가요? 그렇다면 bar의 이름을 붙여준건 return 해주기 위해서 이름을 붙여준것인가요.

아닙니다.
foo 내부의 bar 함수를 호출할 수 있는 것은 단순히 foo가 bar를 반환하기 때문이며 foo()를 baz에 담아 baz()를 하던 foo()()를 하던 똑같은 동작입니다.
foo()()는 foo 함수를 호출하고 반환값을 얻은 후 그것을 또 호출한다.라는 의미일 뿐입니다.

질문 2. 처음에 foo함수안의 color을 출력하고 싶었는데 foo.color을 하니까 undefinded가 나오더라구요. 아마도 foo()()에서 내부함수가 실행되었던것은 return bar로 내부함수를 return해주어서 가능한것이겠죠..?

var color는 지역변수로서 foo.color와 같이 접근할 수 없습니다.

function foo() { ... }
foo.color = "blue";
console.log(foo.color); // "blue"

이렇게 흉내는 낼 수 있지만 올바른 방법은 아닙니다.
단순한 함수의 지역변수 color를 얻기 위한 가장 올바른 방법은 color를 반환하는 것 뿐입니다.

하고싶으신 동작은 흔히 객체지향에서 사용하는 방법으로서 프로토타입으로 구현할 수 있습니다.

function Foo() {
    this.color = "blue";
}
Foo.prototype.bar = function() {
    console.log(this.color);
}

var foo = new Foo();
console.log(foo.color); // "blue"
foo.bar(); // "blue"