자바스크립트 리터럴 객체 내부에서의 참조

조회수 2453회

정말 간단한 질문입니다만.. 리터럴 객체를 활용해서 자바스크립트를 좀더 간결하게 하고 있습니다. 그런데 객체 내 프로퍼티가 메서드일때에는 this나 상위 객체명을 통해서 다른 프로퍼티를 참조할 수 있는데 그렇지 않을때는 안되더군요.. 예를 들면 이런식입니다.

//메서드 없이 선언했을 때
> var lit = {
             a: 'a',
             b: lit.a+'b'
             }
TypeError: lit is undefined

//메서드를 사용했을 때
> var lit = {
             a: 'a',
             b: function(){return lit.a+'b'}
             }
unrefined
> lit.b()
"ab"
> lit.a
"a"

물론 참조가 필요할 때마다 익명함수를 동원해서 리턴시키면 되겠지만 그러면 쓸데없이 코드가 늘어나는것 같기도 하네요. 다른 방법은 없나요? 방법이 이것뿐이라면 왜 그런지도 궁금합니다.

  • this를 사용하면 될 것같고, 콜백 함수(마우스 클릭, settimeout)인 경우 this가 해당 오브젝트가 아닌 경우가 있습니다. call(), apply(), bind() 으로 해당 오브젝트를 명시해주면 this가 상위 객체명을 참조하게 할 수 있을거예요. 알 수 없는 사용자 2016.7.18 05:50
  • 그런 방법도 있었군요 좋은 정보 감사합니다 Snark 2016.7.19 19:52

2 답변

  • 좋아요

    3

    싫어요
    채택 취소하기

    문제가 발생하는 원인은 값이 평가되는 시점 때문입니다.

    먼저 말씀드리면 리터럴을 사용한 객체 생성으로는 자신을 참조하는 값에 대한 원하시는 값을 얻을 수 없습니다.

    아래 코드에서 에러가 발생하는 이유는 b: lit.a+'b'를 수행하는 시점에 아직 lit가 존재하지 않기 때문입니다.

    var lit = {
                 a: 'a',
                 b: lit.a+'b'
                 }
    TypeError: lit is undefined
    

    반대로 아래 코드가 동작하는 이유는 b의 값이 function이기 때문에 함수 안쪽에 존재하는 lit.a+'b'의 평가 시점이 늦춰지기(함수 호출시 평가) 때문입니다.

    인터프리터가 lit.b()를 평가할 때 b()함수 안에서 참조하는 lit객체는 존재하며 이 경우에 lit에는 a프로퍼티 값이 존재하기 때문에 위 코드가 정상적으로 동작하는 것입니다.

    var lit = {
                 a: 'a',
                 b: function(){return lit.a+'b'}
                 }
    unrefined
    > lit.b()
    "ab"
    > lit.a
    "a"
    
    • (•́ ✖ •̀)
      알 수 없는 사용자
  • getter를 이용하는 방법이 있긴 합니다.

    var lit = {
      a: "a",
      get b() {
        return this.a + "b";
      },
    };
    
    console.log(lit.b);
    
    

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

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)