[부스트코스][BoostCourse] 5. Javascript 제어문(2/2) (배열/ 반복문)

본 게시글은 생활코딩 강의를 듣고 정리한 글입니다

---

배열 (Array)

배열은 여러 개의 원소들을 연속적으로 저장하고 전체를 하나의 단위로 다루는 데이터 구조이다

즉, 서로 연관된 데이터를 정리해서 담아두는 수납상자라고 생각할 수 있다

[ ], 대괄호, 브라켓 안에 값을 넣어 명령한다

 

예시를 들어보자

 

var fruits = ["apple", "banana"];
// fruits[0]은 "apple"
// fruits[1]은 "banana"

var box = new Arrays("apple", "banana");
// 같은 배열 선언문
// "Array 객체"를 이용

 

위와 같이 배열은 선언했다고 하면, 다음과 같이 배열의 값에 접근할 수 있다

 

document.write(fruits[0]);
// apple 출력

 

fruits 배열이 인덱스 [0]~[1]만 존재하는 상태이다

이 때, fruits[2] = "orange"; 를 실행시키면, 인덱스 [2]에  "orange"를 추가할 수 있다

 

---

length 프로퍼티(Property)

배열의 length 프로퍼티는 배열의 크기를 나타낸다

인덱스는 첫 원소가 0부터 시작하지만,

length 프로퍼티는 첫 원소가 1부터 시작함을 유의해야 한다

 

위 fruits 배열로 예시를 들어보면 다음과 같다

 

fruits.length
>> 2  // fruits는 "apple", "banana" 두 개의 원소가 존재한다

 

---

배열의 메소드(Method)

배열에는 다음과 같이 많은 수의 메소드들이 있다

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

Array 객체의 각종 메소드

몇 가지를 살펴보자

 

• push( value )
  • 배열의 맨 뒤에 value 값의 원소를 추가한다
• contcat( arr )
  • 현재 배열에 배열 arr의 원소들을 덧붙여 만든 새 배열을 리턴한다
• join( [구분자] )
  • 배열의 모드 원소들 사이에 구분자를 넣어 하나의 문자열로 리턴한다
  • 구분자가 생략되면 ","사용
• reverse()
  • 원소를 역순으로 재배열하여 새 배열을 리턴한다
• slice( idx1[, idx2] )
  • [idx1 :] 혹은 [idx1 : idx2 - 1] 의 원소들로 구성된 새 배열을 리턴한다
• splice( idx1[, idx2] )
  • [idx1:] 혹은 [idx1 : idx2]의 원소들을 삭제하고,
  • [idx1 : idx2] 의 원소들로 구성된 배열을 리턴한다
• sort()
  • 문자열을 사전 순으로 정렬하고 이를 복사한 새 배열을 리턴한다

---

반복문 (Loop)

코딩을 하며 같은 방식의 계산을 수만번 진행해야 한다고 생각한다면, 정말 끔찍하다

이를 도와주기 위해 다음과 같이 반복문을 이용할 수 있다

 

var i = 0;

// i가 10 미만일 경우 { } 실행
while(i < 10) {
  document.write(i);
  i++;
}

 

조건문 if문과 비슷하게, ( ) 사이의 조건이 True일 경우 { } 를 실행하는 구조이다

이 안에서 break 문과 continue 문도 이용할 수 있다

 

• break; - 반복문을 벗어난다 (반복문이 중첩된 경우 하나만 벗어난다)
• continue; - 다음 반복으로 넘어간다

 

이 이외에도 for문도 많이 쓰이니 따로 공부해보도록 하자

 

---

배열-반복문 활용

다음을 페이지에 출력해보자

1. apple
2. banana
3. coconut

html을 이용한다면, 다음과 같다

 

<ol>
  <li> apple </li>
  <li> banana </li>
  <li> coconut </li>
</ol>

 

이를 JS로 배열-반복문을 사용하여 출력하려면 다음과 같다

 

<ol>
  <script>
    // 배열 선언
    var fruits = ['apple', 'banana', 'coconut'];
    
    var i = 0;
    // i는 3 미만일 때 { } 실행
    while(i < fruits.length){
      // '<li>' '</li>' 로 html 코드 출력
      document.write('<li>'+fruits[i]+'</li>');
      i++;
    }
  </script>
</ol>

 

언뜻 봐서는 더 비효율적인 것처럼 보일 수 있다

하지만 출력해야 할 과일의 양이 방대해지고,

사용자와 상호작용을 하며 과일이 추가/삭제가 된다면,

위 JS는 큰 효과를 볼 것이다

 

---

 

예를 들어, html에 있는 모든 a 태그의 color 속성을 바꿔보자

 

css 선택자를 통해 요소를 배열에 저장해야하므로

"Javascript get element by css selector" 라고 검색한다면 querySelectorAll( "~" ) 를 찾을 수 있다

이를 이용하여 다음과 같이 배열에 저장할 수 있다

 

var alist = document.querySelectorAll('a');

 

그렇다면 alist[idx] 에 a 태그 요소들이 하나씩 저장되어 있으므로

다음 코드를 통해 color 속성을 조정할 수 있는 것을 볼 수 있다

 

var i = 0;
while (i < alist.length) {
  alist[i].style.color = 'powderblue';
  i++;
}

 

---

더 나아가기

• console.log( obj ) - 요소를 HTML과 같은 트리 구조로 출력한다
• console.dir( obj ) - 요소를 JSON과 같은 트리 구조로 출력한다

---