[자바스크립트의 시작] 6번째: 배열과 반복문

Lofo·2021년 1월 22일

반복문 부스트코스 생활코딩 이고잉 자바스크립트

Javascript

목록 보기

7/14

오늘의 정리

반복문 예고
배열
반복문
배열과 반복문
배열과 반복문 활용

배열

배열은 서로 연관된 데이터를 정리해서 담아두는 수납상자입니다. 자바스크립트에서 배열을 다음과 같이 작성합니다.

var fruits = ["apple", "banana"]; // 대괄호로 배열을 표시해주고, ,(콤마)로 각 항목을 구분해줍니다.

배열의 값에 접근하는 방법은 다음과 같습니다.

document.write(fruits[0]); //()안에 있는 fruits[]가 배열에 접근하는 방법입니다.

배열의 0번째 항목이 apple이어서 코드를 실행시키면 apple이 나옵니다. []안에 1을 넣으면 banana가 출력됩니다.

배열의 길이를 알아내는 방법은 다음과 같습니다.

document.write(fruits.length);//()안에 있는 fruits.length가 배열에 접근하는 방법입니다.

항목이 두개가 있기 때문에 2가 출력됩니다.

배열에 값 추가하는 방법은 다음과 같습니다.

fruits.push("coconut"); // 배열의 이름인 fruits다음에 .push를 하는 것입니다.

이렇게 하면 fruits은 ["apple", "banana", "coconut"]이 됩니다.

배열에서 값 삭제하는 방법은 다음과 같습니다.

animals.splice(1,1); //.splice(1,1)은 1번째 항목부터 1개의 항목을 지운다는 것입니다.

실행결과는 banana가 빠진 fruits가 될 것입니다. 즉, ["apple", "coconut"]가 되겠죠.

앞선 배열의 내용을 종합하면 다음과 같습니다.

<script>
        var fruits = ["apple", "banana"]; //배열 만들기
        fruits.push("coconut"); // 값 추가하기
        document.write(fruits[1]); // 배열값에 접근해서 출력하기
        fruits.splice(1,1); //값 삭제하기
        document.write(fruits);
    </script>

배열의 추가적인 기능이 필요하게 느껴질 때는 javascript array ???(필요한 기능)라고 검색하며 찾아보면 됩니다.

반복문

반복문이란 같은 작업을 반복적으로 실행시켜주는 문법입니다. 프로그래밍을 하다보면 반복해야하는 코드가 생긴다고 합니다. 이런 반복되는 코드가 1억개!!가 있다고 가정하면 너무 골치가 아프겠죠. 코드의 길이도 줄이고, 수정하기도 용이하게 만들어주는 것이 바로 반복문이라고 합니다. 반복문은 조건문과 함께 프로그램 실행의 흐름을 제어하기 때문에 제어문입니다.

while 반복문을 이용해서 우리는 javascript에서 반복문을 작성할 수 있습니다. while은 ~~동안이라는 뜻이지요. 뜻처럼 while문을 작성할 때 같이 쓰는 ()안에 있는 조건이 만족되는 동안만 반복되도록 하는 것입니다. 이때 ()안에는 불리언 데이터 타입이 들어갑니다. while 반복문은 다음과 같이 작성합니다.

document.write('<li>1</li>');
var i = 0;
//여기서부터 while문 시작입니다.
while (i < 3) { //i가 3보다 작을 때만 {}안에 있는 코드를 작동합니다.
  document.write('<li>2</li>');
  document.write('<li>3</li>');
  i = i + 1;
} //여기에서 while문이 끝납니다.
document.write('<li>4</li>');

이 코드는 반복문 없이 작성한 아래의 코드와 같은 코드입니다.

document.write('<li>1</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>4</li>');

두 코드를 비교해보면 반복문을 사용한 코드가 조금 더 가독성이 좋고, 좀더 간결하게 작성된 것을 볼 수 있습니다.

배열과 반복문

배열과 반복문을 같이 사용하면 좋은 시너지를 낼 수 있습니다. 아래의 코드를 통해 알아보도록 해요.

fruits = ["apple", "banana", "coconut"];
var i = 0;
while (i < fruits.length) { // 주어진 배열의 크기만큼만 반복문을 실행하게 됩니다.
  document.write((i+1)+'.'+fruits[i]); //배열의 항목이 하나씩 출력되는 코드입니다.
  i = i + 1;
}

이 코드를 실행하면 아래와 같은 결과가 나옵니다.

반복적으로 출력하고 싶은 데이터가 있을 때, 하나하나 출력하는 코드를 작성하는 것이 아니라 배열로 만들고 반복문을 이용해서 간결하게 코드를 작성할 수 있습니다.

강의 내용을 적용한 페이지

오늘 내용에서 배운 배열과 반복문 문법을 적용하여 페이지에 반복적으로 나타나는 하이퍼링크들의 색을 낮과 밤 모드 버튼을 누를 때 마다 바뀌도록 적용했습니다.

if(document.querySelector('#night_day').value === 'night') {
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        document.querySelector('#night_day').value = 'day';
  
        var alist = document.querySelectorAll('a'); //이 부분에서 하이퍼링크에 대한 배열을 만듭니다.
        var i = 0;
        while(i<alist.length){ // 이 부분에서 색을 하나하나 반복을 통해 적용합니다.
            alist[i].style.color = 'powderblue';
            i = i+1;
        }
    } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night';

        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i<alist.length){
            alist[i].style.color = 'blue';
            i = i+1;
        }
    }