[JS왕초보] 객체 프로퍼티 접근 질문

Question

안녕하세요. '인사이드 자바스크립트' 책을 통해 객체 프로퍼티 읽기를 공부하다가 궁금증이 생겨서 질문을 올려봅니다.객체 리터럴 방식을 통해 객체를 생성하는데, 대괄호 표기법을 사용했을 경우 ['name'] 이런 식으로 문자열을 대괄호로 감싸는 방식을 통해 접근한다고 배웠습니다.제가 공부중인 예제를 적어보겠습니다. var foo &#61; { name : 'foo', major : 'computer science'}; console.log(foo['name']); 이 경우 출력값 foo console.log(foo[name]); 이 경우 출력값 undefined 이런식으로 대괄호 안에 프로퍼티를 문자열로 만들어 주지 않으면 틀렸다는 것이죠.근데 책에서는 '자바스크립트에서는 대괄호 표기법에서 접근하려는 프로퍼티 이름을 문자열 형태로 만들지 않으면 모든 자바스크립트 객체에서 호출 가능한 toString()이라는 메서드를 자동으로 호출해서 이를 문자열로 바꾸려는 시도를 한다. 만약 객체에 없는 프로퍼티에 접근하는 경우는 undefined 값이 출력된다. 가령 앞 예제 코드에서 foo 객체에 nickname 프로퍼티가 없으므로, console.log(foo.nickname) 앞 코드의 결과는 undefined 값이 출력된다.' 고 하는군요. 여기서 제가 주목한 점은, nickname이 없는 프로퍼티라는 말이죠. 그럼 name은 있는 프로퍼티이죠.따라서 '자바스크립트에서는 대괄호 표기법에서 접근하려는 프로퍼티 이름을 문자열 형태로 만들지 않으면 모든 자바스크립트 객체에서 호출 가능한 toString()이라는 메서드를 자동으로 호출해서 이를 문자열로 바꾸려는 시도를 한다.' 라는 문맥에서 저는&#34;아, 위의 예시에서 name이라는 프로퍼티 이름을 문자열 형태로 만들지 않았기 때문에 toString()이라는 메서드를 자동으로 호출해서 이를 문자열로 바꾸는 시도를 하겠구나 ㅡ> 대괄호 속의 프로퍼티 이름을 문자열로 알아서 바꾸고 undefined 값이 아닌, foo라는 프로퍼티 값이 출력되겠구나. 왜냐면 객체에 없는 프로퍼티인 nickname과는 다르게, name은 객체에 있는 프로퍼티이기 때문이다.&#34;라고 생각했습니다. 제가 무엇을 잘못 이해하고있는지 잘 모르겠습니다.오늘도 초보적인 질문, 초보적인 유추 부끄럽지만 질문해봅니다.

jjmean2 · Accepted Answer

아, 어떤 점이 이상하신 건지 이해가 좀 되네요.foo[name] 처럼 하면 name은 표현식입니다. name 값을 string으로 변환한다는 것은 name이라는 변수의 값을 string으로 변환한다는 것입니다. name이라는 변수의 이름과는 관계가 없습니다. 비슷한 예가 있는데 console.log() 도 인자를 string으로 바꾸어서 출력합니다. 따라서 console.log(name) 하면 출력되는 값이 foo[name]을 할 때 name 자리에 들어갈 값과 같습니다. 그 값이 무엇인지는 저 코드 앞쪽이 어떻게 되어 있냐에 따라 다르겠지요. 그 값이 'name'이나 'major'가 아니면 저 foo 객체에는 없는 프로퍼티입니다.제가 해보면, console.log(foo[name])은 다음과 같은 에러가 났습니다.> console.log(foo[name]) Uncaught ReferenceError: name is not defined아마 wdj0321 님이 하실 때는 name이라는 변수가 어딘가 정의되어 있었나 봅니다. console.log(name) 해보시면 foo[name] 할 때 어떤 값이 프로퍼티로 쓰였는지 알 수 있을 겁니다.

jjmean2 · Answer

let foo &#61; { name : 'foo', major : 'computer science' }이 객체에 foo.name으로 접근하는 것이나 foo['name']으로 접근하는 것은 아무 차이가 없습니다. 애초에 객체 리터럴을 정의할 때 프로퍼티 키를 name으로 쓰든, 'name'으로 쓰든 둘다 똑같이 string 타입 키가 생성됩니다. 즉, 여기서 name은 문자열 형태로 만든 프로퍼티입니다.대괄호 표현을 쓸 때 toString()을 호출해서 문자열로 바꾸려는 시도를 한다는 것은 객체 생성시 프로퍼티를 어떻게 썼냐와는 상관이 없고, foo[expression] 과 같은 형식으로 썼을 때 expression에 들어오는 값이 string이 아닌 경우, 내부적으로 알아서 toString()으로 변환을 하여 foo[expression.toString()] 과 같은 느낌으로 동작한다는 것입니다. 왜냐하면 자바스크립트 객체의 프로퍼티 키는 항상 string 타입이어서 [ ] 안에는 string만 들어와야 하는데 다른 게 들어왔기 때문입니다. 자바스크립트에서는 해당 위치에서 요구하는 타입과 들어온 타입이 다를 경우 암묵적으로 형변환을 하는 일이 흔하기 때문에 익숙한 방식입니다.참고로 자바스크립트 객체의 프로퍼티 키는 string 타입이나 Symbol 타입만 된다고 합니다. (위에서는 편의상 string만 된다고 썼습니다만.. Symbol도 됩니다.) foo[0] &#61; 30 와 같이 number도 되는 것처럼 보이지만, 실제로는 foo['0'] &#61; 30 을 한 것과 같고, '0'이라는 string 타입 키를 갖게 됩니다.

wdj0321 · Answer

&#64;jjrnean2앗, 죄송합니다. 중간에console.log(foo.name);이라고 적어뒀었네요. console.log(foo['name']); 이 경우 출력값 foo console.log(foo[name]); 이 경우 출력값 undefined 라고 본문을 좀 수정했습니다! 대괄호 표현을 쓸 때 toString()을 호출해서 문자열로 바꾸려는 시도를 한다는 것은 객체 생성시 프로퍼티를 어떻게 썼냐와는 상관이 없고, foo[expression] 과 같은 형식으로 썼을 때 expression에 들어오는 값이 string이 아닌 경우, 내부적으로 알아서 toString()으로 변환을 하여 foo[expression.toString()] 과 같은 느낌으로 동작한다는 것입니다. << 그렇다면 내부적으로 알아서 toString()으로 변환하여 console.log(foo[name]); 이 경우 출력값도 마찬가지로 foo가 나와야되는것 아닌가요?제가 이해력이 별로 안좋나봅니다 ㅠㅠ

LichKing · Answer

&#34;name&#34; 은 문자열이고name 은 변수입니다.변수라는건 안에 무언가 값을 담고있다는거고요. name변수가 &#34;name&#34;이 되는건 아니죠.

wdj0321 · Answer

&#64;jjmean2&#64;LichKing두 분 모두 답변 감사합니다! 답변을 잘 해주셨는데, 제가 이해력이 많이 부족한 것 같습니다. ㅠㅠ 이해되지 않은 부분에 대해서 체크를 해놓고, 책 전체내용을 한 번 공부해본 후 그 때 다시 확인해봐야겠어요! 나중을 대비해 현재 의문이 남는 점들을 기록해두겠습니다. (꼭 답변 안해주셔도 됩니다. 감사합니다!)1. 우선 '표현식' 이는 것을 아직 배우지 않아 이해가 미숙하다.2. name 값을 string으로 변환한다는 것은 name이라는 변수의 값을 string으로 변환한다는 것 ㅡ> 책에서는 name을 '프로퍼티 key 또는 프로퍼티 이름' 이라고 칭하고 있는데 name이 '변수' 라는 점에 대해 의문점이 생김.3. '인자' 에 대해 알아볼 것.4. console.log(name) 하면 출력되는 값이 foo[name]을 할 때 name 자리에 들어갈 값과 같습니다 ㅡ> 어떤 값도 출력되지 않음 ( undefined 이라고 뜨지도 않음 ) 5. name이라는 변수가 어딘가 정의되어 있었나 봅니다. console.log(name) 해보시면 foo[name] 할 때 어떤 값이 프로퍼티로 쓰였는지 알 수 있을 겁니다. ㅡ> 위의 코드가 코드의 전부입니다. repl.it 이라는 사이트에서 코드를 쳐보는 중인데, VSC같은 에디터로 해보면 또 다를 수 있을지도 모르니 한 번 해보겠습니다!다시 한 번 두 분 모두 답변 감사드립니다!

LichKing · Answer

하필 변수명이 name이라서 빈문자열이 출력되는겁니다. 브라우저에서 name을 &#34;&#34;로 초기화해놨거든요.name1로 해보세요. var foo &#61; {name1:'foo'}; console.log(name1); console.log(foo['name1']);console.log(foo.[name1]);

wdj0321 · Answer

&#64;LichKing아하 name1 하니까ReferenceError: name1 is not defined at /script.js:5:13 라고 뜨네요. 감사합니다!아직 너무 초보라 상세한 답변을 받아도 제대로 못 받아먹는 입장이네요... 열심히 공부하겠습니다.

[JS왕초보] 객체 프로퍼티 접근 질문

7개의 답변

#property 목록