이해가 안되는 부분..

안녕하세요! juice님!

1. 제대로 이해하고 계십니다!

    

2. 제대로 이해하고 계십니다!

    

3. 아래의 설명을 참고하세요!^^

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')

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

안녕하세요, 인프런 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]] 자체가 태그가 되는 것은 아니고, 해당 태그에 대한 정보를 가져오는 것입니다.

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