이해가 안되는 부분..

[코드캠프] 훈훈한 Javascript

반복문을 활용한 날짜 데이터 리팩토링

해결된 질문

작성

332

헷갈려서 질문이 조금 많은데요ㅠㅠ

[1] 5:29 대에서

숫자 0이 i에 들어가고

0 번째 인덱스 값을 가진 요소 1을 갖고 올 수 있고,

코드 실행해주고 i(0)이 1 증가되니

arr.length = 길이가 5 니까

i < 5 를 조건식으로 해석해서

i[0] ~ i[4] 까지 인덱스를 기준으로 출력하므로

1,2,3,4,5 가 출력 되는게 제가 맞게 이해한 걸까요?

[2]

for ( let i = 0; i < timeKeys.length; i = i + 1 ) {

console.log (timeKeys[i])

} 에서

timekeys도 배열이고 똑같이 길이(length) 갖고 있으니까,

길이만큼 반복 하는 거니까 ( 길이 =4 ),

timeKeys[0]

timeKeys[1]

timeKeys[2]

timeKeys[3]

이렇게 돼서 인덱스 0 부터 인덱스 3까지 출력되는거니까

배열의 요소인 remainingDate (인덱스 0) ~ remainingSec (인덱스3) 까지 출력되는게 맞나요? 살짝 헷갈리니 제대로 이해했는지 모르겠어요..ㅠㅠ

[3] 객체 접근할 때 쓰는 브라켓 노테이션 원리는 알겠는데

console.log(documentObj[docKeys[i]]);

이 부분이 잘 이해가 안돼요

documentObj 라는 객체를 출력하기 위해 브라켓 노테이션을 사용해서 태그를 접근한 것 같은데,

[docKeys[i]] 를 사용한 원리와,

documentObj[docKeys[i]] 자체가 태그가 되는 이유를 모르겠어요..

자세하고 쉽게 알려주시면 감사하겠습니다!

javascript

답변 2

노원두

지식공유자

안녕하세요! juice님!

제대로 이해하고 계십니다!
제대로 이해하고 계십니다!
아래의 설명을 참고하세요!^^

const documentObj = {
   days: document.getElementById('days'),
   hours: document.getElementById('hours'),
   min: document.getElementById('min'),
   sec: document.getElementById('sec'),
};

const docKeys = Object.keys(documentObj);

위의 코드를 보시면 Object.keys() 라는 구문이 나오는데요! 이것은 객체의 키들만 뽑아서 배열로 만들어줘! 라는 뜻이에요!

const documentObj = {
   days: document.getElementById('days'),
   hours: document.getElementById('hours'),
   min: document.getElementById('min'),
   sec: document.getElementById('sec'),
};

위 객체에서 키만 뽑아서 배열로 만들면 아래와 같은 결과를 확인할 수 있어요!

 const docKeys = Object.keys(documentObj); // ['days', 'hours', 'min', 'sec']

이제 docKeys의 값에 위와 같은 배열이 들어가 있으므로, 우리는 아래의 결과를 알 수 있어요!

docKeys[0] // 'days'
docKeys[1] // 'hours'
docKeys[2] // 'min'
docKeys[3] // 'sec'

그러면, 다시 처음으로 돌아가서 우리가 어려웠던 내용들을 하나씩 알아볼까요?

const documentObj = {
   days: document.getElementById('days'),
   hours: document.getElementById('hours'),
   min: document.getElementById('min'),
   sec: document.getElementById('sec'),
};

documentObj[docKeys[0]] // documentObj['days']   
                           =>  document.getElementById('days')

documentObj[docKeys[1]] // documentObj['hours']  
                           =>  document.getElementById('hours')

documentObj[docKeys[2]] // documentObj['min']    
                           =>  document.getElementById('min')

documentObj[docKeys[3]] // documentObj['sec']    
                           =>  document.getElementById('sec')

이러한 과정으로 태그의 결과를 받아올 수 있다는 사실을 확인할 수 있겠죠?!^^

juice

질문자

와,,이 태그(document.getElementById()) 를 갖고 오는 부분에서

계속 이해가 안됐는데 눈으로 보이게 자세히 설명해주셔서 감사합니다 ㅠㅠ !!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

[1] 첫 번째 질문에 대해서 말씀드리겠습니다. 올바르게 이해하셨습니다. for문에서 i가 0부터 시작하여 5보다 작은 동안 반복하게 되므로, i의 값은 0, 1, 2, 3, 4의 순서로 증가합니다. 따라서 arr[i]는 arr[0], arr[1], arr[2], arr[3], arr[4]를 차례대로 가리키게 됩니다. arr의 요소로는 [1, 2, 3, 4, 5]가 있으므로, 순서대로 출력되는 것이 맞습니다.

[2] 두 번째 질문에 대해서도 맞게 이해하셨습니다. timeKeys 배열의 길이가 4이므로 for문은 0부터 3까지의 인덱스를 참조하면서 반복됩니다. 따라서 timeKeys[i]는 timeKeys[0], timeKeys[1], timeKeys[2], timeKeys[3]을 차례대로 가리키게 되므로, 해당 배열의 요소인 remainingDate부터 remainingSec까지 출력됩니다.

[3] 세 번째 질문에 대해서는 조금 더 설명드릴게요. documentObj[docKeys[i]]는 bracket notation(브라켓 노테이션)을 사용하여 객체의 속성에 접근하는 방법입니다. docKeys[i]는 i에 해당하는 인덱스 값을 가지는 docKeys 배열의 요소를 의미합니다. 이렇게 객체의 속성에 접근할 때는 그 속성 이름이 변수로 들어오기 때문에 브라켓 노테이션을 사용합니다. 예를 들어, 만약 docKeys[i]의 값이 “tag1”이면, documentObj[“tag1”]은 동일한 결과를 반환합니다.

프로그래밍에서 동적으로 객체의 속성을 접근할 때 브라켓 노테이션을 사용하는 것이 유용한 경우가 많습니다. 따라서 documentObj[docKeys[i]]는 객체 documentObj에서 변수 docKeys[i]의 값을 속성 이름으로 가지는 속성을 참조하게 됩니다. 이때, documentObj[docKeys[i]] 자체가 태그가 되는 것은 아니고, 해당 태그에 대한 정보를 가져오는 것입니다.

더 자세한 설명을 원하시거나 다른 질문이 있으시면 언제든지 물어보세요!

juice

질문자

상세한 답변 감사합니다 !

인프런 커뮤니티 질문&답변

이해가 안되는 부분..