[부스트코스] 4. 자바스크립트 기초 (자바스크립트 제어문 part 2. " 배여열과 반복문" )

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다.

1. 배열

1) 자바스크립에서 배열의 정의

• 자바스크립트(js)에서 배열은 변수의 타입처럼 쓰이는 것 같다.
• 먼저 변수를 설정해주고 값을 배열로 주면, 배열이 선언 된다.

2) 배열 선언

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

 

3) 배열의 값에 접근하기(Get)

document.write(fruits[0]);

 

4) 배열의 길이

document.write(fruits.length);

 

5) 배열에 값 추가하기(Push)

fruits.push("coconut");

---

2. JS 배열 메소드

JS 배열 메소드는 크게 3가지로 구분되어집니다.

1. 원본 배열을 변경하는 메소드
2. 원본 배열은 변경하지 않고 참조만 하는 메소드
3. 원본 배열을 반복적으로 참조하는 메소드

1) 원본 배열을 변경하는 메소드

1. push() : 배열의 가장 마지막에 데이터 추가합니다.
2. pop() :  배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환합니다.
3. shift() : 첫 요소를 제거하고, 그 제거된 요소를 반환
4. unshift() : 하나 이상의 요소를 배열의 가장 앞에 추가
5. reverse() :  배열 요소의 순서를 전부 반대로 교체합니다.
6. sort() : 알파벳 순서에 따라 정렬합니다.
7. splice() : 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경

[splice() 예제]

var arr = [1, true, "JavaScript", "자바스크립트"];

// 인덱스 1의 요소부터 2개의 요소를 제거한 후, false와 "C언어"를 그 자리에 삽입함.

var removedElement = arr.splice(1, 2, false, "C언어");

arr;            // [1,false,C언어,자바스크립트]

removedElement; // [true,JavaScript]

자바스크립트 Array.prototype 메소드

push()	하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환함.
pop()	배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환함.
shift()	배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환함.
unshift()	하나 이상의 요소를 배열의 가장 앞에 추가하고, 배열의 총 길이를 반환함.
reverse()	배열 요소의 순서를 전부 반대로 교체함.
sort()	해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬함.
splice()	기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경함.
copyWithin()	해당 배열에서 일련의 요소들을 복사하여, 명시된 위치의 요소들을 교체함.
fill()	시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 특정 값으로 교체함.

---

2) 원본 배열은 변경하지 않고 참조만 하는 메소드

join()	배열의 모든 요소를 하나의 문자열로 반환함.
slice()	전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환함.
concat()	해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환함.
toString()	해당 배열의 모든 요소를 하나의 문자열로 반환함.
toLocaleString()	해당 배열의 모든 요소를 하나의 문자열로 반환함.
indexOf()	전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환함.
lastIndexOf()	전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환함.

---

3) 원본 배열을 반복적으로 참조하는 메소드

forEach()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행함.
map()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환함.
filter()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환함.
every()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 모두 true일 때에만 true를 반환함.
some()	해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환함.
reduce()	해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함. (배열의 첫 번째 요소부터 시작함.)
reduceRight()	해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행함. (배열의 마지막 요소부터 시작함.)
entries()	배열 요소별로 키와 값의 한 쌍으로 이루어진 새로운 배열 반복자 객체(Array Iterator Object)를 배열 형태로 반환함.
keys()	배열 요소별로 키(key)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
values()	배열 요소별로 값(value)만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환함.
find()	검사를 위해 전달받은 함수를 만족하는 배열 요소의 값을 반환함. 만족하는 값이 없으면 undefined를 반환함.
findIndex()	검사를 위해 전달받은 함수를 만족하는 배열 요소의 인덱스를 반환함. 만족하는 값이 없으면 -1을 반환함.

---

3. 반복문과 배열의 활용

 

반복문을 이용하여 스크립트의 색깔을 바꿔보자

 

성질을 바꿀 모든 태그를 배열로 저장한다.

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

 

반복문을 돌면서 배열안에 존재하는 요소들의 성질을 바꿔주면 끝

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