본문 바로가기

Web/JavaScript

Array&Loop

array 예시 코드

<Array>

1) 변수 fruits에 배열 만들어 원소 저장

     var fruits = ["apple", "banana"];

 

2) 배열의 길이 측정

     fruits.lenth

 

3) 인덱스를 이용해 배열의 원소 선택

     fruits[0]     fruits[fruits.length-1]: 배열은 0번째부터 시작하기 때문에 마지막 원소는 (length-1)번째에 위치한다.                                                 따라서 fruits의 (fruits.length-1)번째 원소는 배열의 가장 마지막 원소를 뜻한다.

 

4) 배열의 끝에 원소 추가

     fruits.push("orange");

 

5) 배열의 부터 원소 삭제 (마지막 원소 삭제)

     fruits.pop();

     배열의 부터 원소 삭제 (첫번째 원소 삭제)

     fruits.shift();

 

+) document.write: 열린 문서에 텍스트 스트링 작성

 

 

 

<Loop>

- while문

- while(조건문)

      실행문

- 조건문이 참이기만 하면 실행문을 반복해서 수행

- 무한 루프에 빠지지 않도록 조건문을 잘 설정할 필요가 있다.

 

 

 

<Array+Loop>

loop와 array의 결합

만약 배열의 원소 개수를 세서 while문의 i값, 즉 반복 횟수를 직접 조절하려고 한다면 (ex. while(i < 4)) 배열의 원소가    바뀔 때마다 직접 바꿔줘야 할 것이다.

 

이런 비효율적인 일을 피하기 위해 배열의 길이를 측정하는 메소드를 넣어주자.

 

→ fruits 배열에 원소를 몇 개를 추가하거나 삭제해 원소의 개수가 바뀌더라도 while문의 i값을 fruits.length로

     조절하고 있기 때문에 원소의 개수가 바뀔 때마다 while문을 수정해줄 필요가 없다. (logic이 탄력적으로 조절된다)

 

 

 

 

<array와 loop 적용>

array, loop 예시 코드

- night ver에서는 모든 a태그들의 폰트 색을 powderblue로, day ver에서는 모든 a태그들의 폰트 색을 blue로 설정

 

- alist라는 변수 선언해 querySelectorAll로 모든 a 태그들을 찾아 저장해준다.

     cf) querySelector는 해당 결과값이 여러 개면 가장 앞에 있는 것을 찾는다.

           querySelectorAll은 해당하는 모든 결과값을 찾는다.

 

- while문의 조건문을 i < alist.length로 설정해 나중에 배열의 원소 개수가 변경되더라도 탄력적으로 반응할 수 있도록     한다.

 

- alist[i].style.color = 'powderblue'; : alist의 모든 원소들의 color값을 powderblue로 설정 (반복문을 사용해

   배열의 모든 원소들, 즉 모든 a 태그들에 적용)