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

조회수 227회

안녕하세요. 클로저를 공부하다가 궁금한게 생겼습니다. 아래의 함수는 원래 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변수의 값을 가져올 수 있는 방법이 따로 있을까요?

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

1 답변

  • 좋아요

    2

    싫어요
    채택 취소하기

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

    아닙니다.
    foo 내부의 bar 함수를 호출할 수 있는 것은 단순히 foobar를 반환하기 때문이며 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"
    
    • 안녕하세요. 답변해주셔서 감사합니다. 질문1에 답변해주신것을 보고 리턴을 바꾸어보았습니다. 제가 질문에 작성한 함수에서 return bar를 해주지 않고 return bar()라고 한 후에 foo();를 실행하니 처음의 코드와 동일하게 작동하더라구요. 내부함수를 작성하고 리턴할때 괄호를 빼고 작성하는 이유가 있나요? 아니면 관행인가요? wo0kgod 2019.2.10 11:32
    • 두번쨰로 function Foo() 로 작성하신 코드에서 this.color를 사용하기 위해 객체로 만드신것이지요? 객체를 생성하는 방법중에 생성자 패턴이 있다는것만 알고있는데요. ( 아직 JS 개념을 잘 몰라서 ... 이것저것 찾아가며 공부중입니다 ㅠㅠ ). stackoverflow를 찾아보니 기본자료형이 아닌 변수는 모두 객체이기에 함수또한 객체이다. 라고 설명이 되어있더라구요. https://stackoverflow.com/questions/3449596/every-object-is-a-function-and-every-function-is-object-which-is-correct wo0kgod 2019.2.10 11:38
    • function foo(){} foo.color = "blue"; console.log(foo.color); 로 흉내를 낼 수 있지만 올바른 방법이 아니라 하신 말씀이 foo.color를 사용하기위해 foo함수를 foo객체로 변경하여 사용하였다고 이해하면 될까요? wo0kgod 2019.2.10 11:49
    • bar와 bar()는 완전히 다릅니다. return bar는 bar함수를 반환한다는 것이고 return bar()는 bar함수의 호출 결과를 반환한다는 말입니다. NeuroWhAI 2019.2.10 15:40
    • 두번째 질문은 js를 공부하시다가 `new` 키워드와 프로토타입이 나왔을 때 하시는 게 나을 것 같습니다. NeuroWhAI 2019.2.10 15:41
    • foo 함수를 객체처럼 사용한 것은 맞지만 변경한 것은 아닙니다. NeuroWhAI 2019.2.10 15:42
    • 아아 네.. 감사합니다!! wo0kgod 2019.2.10 15:49

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.