[Javascript/ES6] for ( ) 문 & NodeList

javascript 2019. 5. 5. 18:46

안녕하세요, Jerry입니다 :)

계속해서 스코프에 대해 이야기를 하고 있습니다. 블록 스코프에 특히 많은 얘기를 하고 있는데요. 이번 포스팅도 블록 스코프에 관련된 내용을 포스팅하려고 합니다.

우리가 블록 스코프에서 빼먹으면 안 될 구문이 있죠? 네, 바로 for( ) 문과 if( ) 문이죠. if( ) 문과 for( )의 차이점은 조건절에 변수 선언 여부겠죠. for( ) 문도 미리 선언돼있는 변수를 사용할 수 있겠지만 조건절 안에서 선언할 수 있습니다. 그러다 보니 키워드에 따라 스코프가 달라집니다.

var 키워드와 let 키워드가 for( ) 문에서 어떻게 다른 스코프를 갖는지 알아보겠습니다!

for.html

<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
  <div>
    <ul>
      <li>1~10</li>
      <li>11~20</li>
      <li>21~30</li>
    </ul>
  </div>
  <script src='for.js'></script>
</body>
</html>

for.js


var nodes = document.querySelector('ul');

for(var k = 0; k < nodes.children.length; k++){
  var el = nodes.children[k];
  el.onclick = function(event){
    event.target.style.backgroundColor = 'yellow';
    console.log(k);
  }
}

HTML을 파일을 브라우저로 열어보겠습니다. 아래 캡처를 볼까요?

JS 소스(for.js)를 보세요. nodes라는 변수에 querySelector('ul')을 담습니다.

· Document.querySelector( ) : Document는 선택자 혹은 선택자 뭉치로 보시면 됩니다. querySelector('element, id, class명') 소괄호에는 element, id, class명이 들어올 수 있고, element나 class명이 여럿일 경우 가장 처음 element, class명이 변수에 담깁니다.

위 for.js 소스의 경우 querySelector( )로 <ul>을 담으면서 html에 작성된 3개의 (자식 element인)<li>도 전부 담기는데 이것을 DOM(Document Object Model)에서 NodeList라고 합니다. console.log로 찍어서 어떻게 담겼는지 확인해보겠습니다.

NodeList


var nodes = document.querySelector('ul');
console.log(nodes); // +추가) NodeList를 확인하기 위해 console.log( ) 작성

NodeList를 확인하기 위해서 소스에 console.log(nodes)를 추가하였습니다. 결과는 아래 캡처로 확인해볼까요?

querySelector('ul')로 담은 nodes 변수를 console.log(nodes)로 console에 출력한 모습이다. 3개의 <li>가 담겨있고 이를 NodeList라고 한다.

nodes.children.length는 NodeList의 엘리먼트 수로 3이 나옵니다. 반복문에서 조건절에 세 번만큼 루프를 돌겠다는 것입니다.

다시 for.js 소스로 돌아가서,


var el = nodes.children[k];
el.onclick = function(event){
  event.target.style.backgroundColor = 'yellow';
  console.log(k);
}

for( ) 문을 반복하며 <li> 엘리먼트마다 onclick 이벤트를 설정해줍니다. 해당 <li> 엘리먼트를 클릭할 때마다 배경색이 노란색('yellow')으로 바뀌게 했죠.

중요한 건 console.log(k)입니다. <li> 엘리먼트를 클릭할 때마다 k이 값이 찍히는데 항상 3이 찍힙니다. 이제 아주 조금 복잡해집니다.(필자의 주관적인 의견입니다. 전 조금 헷갈리고 복잡했거든요...)

움짤의 하단부에 console.log(k)가 console창에 어떤 값으로 찍히는지 확인해주세요.

Console창에는 루프를 전부 돌고 난 이후의 값인 3이 찍힙니다. 0부터 시작해서 length가 3 미만으로 루프를 돌라고 했는데 왜 0, 1, 2로 돌고 3이 찍히냐 물으신다면 for( ) 문이 어떻게 동작하는지 그 프로세스(?)를 알고 계셔야 합니다.

0인 상태로 0 < 3이 true이기 때문에 for( ) 문 내로 들어가 로직을 돌고 난 이후엔 증감 연산자(k++)로 갑니다.

아래 그림을 보고 다시 설명하겠습니다.

알고 계시는 분들은 이 부분을 넘어가셔도 괜찮습니다. 그림을 보고 이해가 가시나요?

즉,

1. ① k = 0으로 시작해서

2. ② 0 < 3 이 true이기 때문에

3. ③ 로직을 다 돌고

4. ④ 증감 연산자(k++)로 가서 k의 값을 하나 증가시킵니다.

5. 다시 ② 1 < 3 이 true이기 때문에

6. ③ 로직을 다 돌고

7. 다시 ④ 증감연산자(k++)로 가서 k의 값을 하나 증가시킵니다.

8. ② 2 < 3 이 true이기 때문에

9. ③ 로직을 다 돌고

10. 다시 ④ 증감연산자(k++)로 가서 k의 값을 하나 증가시킵니다.

11. k는 3이 되었습니다.

12. ② 3 < 3 이 false이기 때문에

13. for( ) 문으로 들어가지 않습니다. ③ 로직을 실행하지 않는 거죠.

이것을 설명한 이유가 있습니다.

아래에 let 키워드의 결과의 경우, 클릭한 엘리먼트마다 값이 다른데 0과 1, 그리고 2 만 나오기 때문에 이 포스팅을 읽는 분이 헷갈려하실까 봐 설명했습니다 :)

만약, 내가 클릭한 element의 순번을 알고 싶다면?

첫 번째를 클릭했을 때는 1이 Console에 나오고 두 번째를 클릭했을 땐 2, 그리고 세 번째는 3이 나오게 한다면 var 키워드를 let 키워드로 수정해주면 됩니다.

소스를 변경해보겠습니다.


for(let k = 0; k < nodes.children.length; k++){

바뀌는 것은 for( ) 문 조건부 내에 var 키워드로 선언했던 k 변수를 let 키워드뿐입니다. 수정 이후에 어떻게 결과가 바뀌었는지 궁금해집니다! 같이 아래의 캡처(움짤)를 확인해보시죠.

직접 코딩하셔서 키워드마다 결과가 다르게 출력되는 것을 눈으로 확인해보세요!

포스팅을 마무리하면서,

카공족이 많은 분들에게 욕을 먹고 있는 기사를 봤습니다. 공부하는 곳이 아닌 곳에서 공부하시는 분들이 수다 떠는 분들에게 찌릿찌릿 눈치를 주는 건 문제가 있다고 봅니다만, 카공족한테 카공 놈들, 등 험한 말을 글에 담고 거지니, 허영충들이니 심한 댓글들이 99%였습니다. 속상하더군요. (응, 내가 카공족이라) 일하면서 주말엔 노트북을 들고 카페 가서 공부하거나 포스팅하거나 합니다. 집 근처 도서관을 가려면 20~30분은 버스를 타고 나가야 하고, 도서관도 열람실이 협소하다 보면 잘 가지 않게 되죠. 그마저도 조금만 늦으면 자리도 없고, 요샌 자녀분들 데리고 나오시는 부모님들도 계셔서 도서관도 만만치 않게 시끄럽습니다. 여러 상황을 고려하면 카페가 좋죠. 혼자 가서 4인석 차지하는 사람들 보면 저도 눈살 찌푸리게 되고 웬만하면 많은 자리를 차지해서 민폐 주기 싫습니다. 그리고 커피 한 잔 시키고 2~3시간만 지나도 괜히 죄송해져서 한 잔 더 시키거나 합니다. 기사 내용인즉슨 별다방의 몇 개 매장에서 콘센트를 아예 없앴다는 내용이었고 댓글에선 카공족을 엄청나게 까더군요. '그러니 공부만 하지 사람부터 돼라', '집에서 해라', '도서관 가서 공부해라', '허영심만 가득 차서 카페에서 공부하는 놈들 보면 공부하는 꼴 못 봤다' 등.. 와.. 얼마나 대단하신 분들이길래, 얼마나 공부 많이 해서 잘 먹고 잘 사시는 분들이길래 그런 댓글을 막 써 내려가시는지 부럽더라고요. 사람부터 되라니, 그런 험한 댓글들 다시는 분들이 분명 카페에서 본 특정인을 상상하며 댓글을 쓰셨을 거를 생각하면 소름 돋습니다. 카페에서 공부하다 맞는 세상이 올까 무섭네요. (투덜투덜..)

Jerry 였습니다 :)

'javascript' 카테고리의 다른 글

[JavaScript/ES6] Arrow(화살표) 함수 - 구문편 (0)	2019.05.10
[JavaScript/ES6] const 키워드 (0)	2019.05.07
[Javascript/ES6] try - catch 와 switch - case (0)	2019.05.04
[JavaScript/ES6] let 과 this 키워드 (0)	2019.04.29
[JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 번외편(feat. ES6) (1)	2019.04.28

ABOUT ME

JERRY의 공부방🔥 JERRY의 공부방🔥

'javascript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'javascript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바