TIL#05 배열과 반복문

 

 

20강 배열

 

데이터가 많아짐에 따라서 

그 많은 데이터를 그냥 둘 수 없기 때문에

그 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아 두는 

일종의 수납상자를 배열이라고 생각하면 된다.

 

See the Pen 배열 by egoing (@egoing) on CodePen.

배열은 대괄호로 시작해서 대괄호로 끝난다. 

ex) ["egoing", "leezche"]

 

var coworkers = ["egoing", "leezche"];

 

coworkers라는 변수에 배열이라는 새로운 데이터 타입을 담았다.

 

데이터 타입에  cowerkers라는 이름을 붙인 거라고도 얘기 할 수 있다.

 

지금 우리는 새로운 수납상자를 집에 갖다 놓고서 그 안에 물건을 2개 넣은 것과 같은 상황인 것이다.

 

//////////////////////////////////////////////////

 

수납상자를 만들었으니 물건을 꺼내는 방법을 알아보자.

 

<script>
  document.write(coworkers[0]); // egoing
  document.write(coworkers[1]); // leezche
</script>

이렇게 하면 0번은 egoing 1번은 leezhe가 나온다.

즉, 첫번째 자리는 0번째이다.

 

egoing이나 leezhe를 인덱스(index)라고 하는데 egoing은 index 0번째 leezhe는 index 1번째라고 하는 것이다.

 

//(추가) 21강 //배열에서 각각의 항목들을 원소(element)라고 부른다.

 

 

///////////////////////////////////////////////////

 

들어가 있는 값이 몇 개인가를 확인하는 방법

 

<script>
  document.write(coworkers.length);    // 2
</script>

우리가 인덱스를 정할 때는 0은 첫 번째고, 1은 두 번째가 된다.

 

그런데 개수를 셀 때는 1부터 세기 때문에 length의 값은 2가 된다.

 

///////////////////////////////////////////////////

 

데이터를 추가하는 방법.

<script>
  coworkers.push('duru');
  coworkers.push('taeho');
  
  document.write(coworkers.length); // 4
</script>

push를 이용해서 duru,taeho를 추가한 후 lenght값을 확인하니 4가 되어있다.

 

 

 

21강 반복문

 

반복문은 영어로 루프(Loop)라고 부른다.

 

See the Pen 반복문 by egoing (@egoing) on CodePen.

while이라고 하는 것은 반복문의 키워드다.

for문 같은 것이 있는데 여기서는 while만 다룬다.

 

while의 괄호( ) 안에는 if문처럼 불이언 데이터 타입인 true나 false가 들어간다.

 

true인 동안은 중괄호{ } 안에 있는 코드들이 반복적으로 실행되고 

false가 되면 멈춘다.

 

false가 되면 while문 바깥쪽에 있는 코드가 그때서야 실행되는 것이다.

 

즉, 반복문 이라는 것은 순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문이라고 할 수 있다.

 

+if문... 조건문도 제어문이다.

 

/////////////////////////////////////////////////////////

 

코드가 몇 번 실행됐는지 어딘가에 적어 놓을 필요가 있다.

 

그걸 하기 좋은 것은 변수인데 

 

관습적으로 i라는 변수에 그런 역할을 시킨다.

 

 var i = 0;
    while(i < 3){
      document.write('<li>2</li>');
      document.write('<li>3</li>');
      i = i + 1;
    }

i = i +1; 이라는 것은 반복문이 실행될 때마다

 

'기존의 i의 값에 1을 더한 결과를 i의 새로운 값으로 준다'라는 뜻이다.

 

그러면 i가 0부터 시작해서 이 코드가 실행될 때마다 값이 1씩 증가한다.

 

만약 반복문을 3번 실행시키고 싶다면 i < 3 라고 하면 되는 것이다.

 

 

 

21강 배열과 반복문

 

See the Pen 반복문과 배열 by egoing (@egoing) on CodePen.

배열에서 각각의 항목들을 원소(element)라고 부른다.

 

   <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li>'+coworkers[i]+'</li>');
          i = i + 1;
        }
   </script>

다음과 같은 결과가 나온다.

 

 

 

22강 배열과 반복문의 활용

 

 

See the Pen 배열과 반복문의 활용 by egoing (@egoing) on CodePen.

 

querySelector라고 하는 저 메소드, 함수, 명령(다 같은 말이다)은 a태그에 해당되는 태그 중 

첫 번째 등장하는 것 하나만 가져오는 특성을 가지고 있다.

 

그래서 

 

querySelectorAll을 사용하는데 그럼 대괄호 안에 a태그를 모두 가져온다.

 

대괄호는? 배열이다.

 

물론, 정확한 배열은 아니고 노드 리스트라는 걸 출력하긴 하지만 배열이라고 생각하면 된다.