📚 [JavaScript] 배열

📕 배열

1. 배열(array)

이름과 인덱스로 참조되는 정렬된 값의 집합

2. 배열 요소(element)

배열을 구성하는 각각의 값

3. 인덱스(index)

배열에서의 위치를 가리키는 숫자

📙 배열의 생성

🎁 문법

1. 배열 리터럴을 이용하는 방법
var arr = [배열요소1, 배열요소2, ...]; 

2. Array 객체의 생성자를 이용하는 방법
var arr = Array(배열요소1, 배열요소2, ...);

3. new 연산자를 이용한 Array 객체 생성 방법
var arr = new Array(배열요소1, 배열요소2, ...);

🎈 예제

<scrpit>
var arrLit = ["이가뿡", 21, true]; // 배열 리터럴을 이용하는 방법
var arrObj = Array("이가뿡", 21, true); // Array 객체의 생성자를 이용하는 방법
var arrNewObj = new Array("이가뿡", 21, true); // new 연산자를 이용한 Array 객체 생성 방법

document.write(arrLit); //이가뿡,21,true
document.write(arrObj); //이가뿡,21,true
document.write(arrNewObj); //이가뿡,21,true
</scrpit>

✔ 모두 같은 결과의 배열이 생성된다

📒 배열의 참조

배열의 각 요소를 참조하고 싶을 때는 [] 연산자를 사용한다

🎁 문법

배열이름[인덱스]

🎈 예제

<script>
var arr = ["one", "two", "three"];

for(i = 0; i < arr.length; i++) {
	document.write(arr[i]); //onetwothree
}
</script>

✔ 인덱스는 0부터 시작한다
✔ length 프로퍼티를 사용하여 배열 요소의 개수를 알 수 있다

📗 배열 요소의 추가

🎁 문법

1. push() 메소드를 이용하는 방법
array.push(추가할 요소);

2. length 프로퍼티를 이용하는 방법
array[array.length] = 추가할 요소;

3. 특정 인덱스를 지정하여 추가하는 방법
array[특정인덱스] = 추가할 요소;

🎈 예제

<script>
var num = ["one", "two", "three"];

num.push("four"); //push() 메소드를 이용하는 방법
document.write(num); //one,two,three,four

num[num.length] = "five"; //length 프로퍼티를 이용하는 방법
document.write(num); //one,two,three,four,five

num[10] = "eleven"; //특정 인덱스를 지정하여 추가하는 방법
document.write(num); //one,two,three,four,five,,,,,,eleven
document.write(num[7]); //undefined
</script>

📘 Array 메소드

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

1. push() : 하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환한다

2. pop() : 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환한다

3. shift() : 배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환한다

4. unshift() : 하나 이상의 요소를 배열의 가장 앞에 추가하고, 배열의 총 길이를 반환한다

5. reverse() : 배열 요소의 순서를 전부 반대로 교체한다

6. sort() : 해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬한다

7. splice() : 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경한다

8. copyWithin() : 해당 배열에서 일련의 요소들을 복사하여, 명시된 위치의 요소들을 교체한다

9. fill() : 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 특정 값으로 교체한다

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

1. join() : 배열의 모든 요소를 하나의 문자열로 반환한다

2. slice() : 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 추출하여 만든 새로운 배열을 반환한다

3. concat() : 해당 배열의 뒤에 인수로 전달받은 배열을 합쳐서 만든 새로운 배열을 반환한다

4. toString() : 해당 배열의 모든 요소를 하나의 문자열로 반환한다

5. toLocaleString() : 해당 배열의 모든 요소를 하나의 문자열로 반환한다

6. indexOf() : 전달받은 값과 동일한 배열 요소가 처음으로 등장하는 위치의 인덱스를 반환한다

7. lastIndexOf() : 전달받은 값과 동일한 배열 요소가 마지막으로 등장하는 위치의 인덱스를 반환한다

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

1. forEach() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한다

2. map() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열로 반환한다

3. filter() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환한다

4. every() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 모두 true일 때에만 true를 반환한다

5. some() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 하나라도 true이면 true를 반환한다

6. reduce() : 배열의 첫 번째 요소부터 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행한다

7. reduceRight() : 배열의 마지막 요소부터 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행한다

8. entries() : 배열 요소별로 키와 값의 한 쌍으로 이루어진 새로운 배열 반복자 객체를 배열 형태로 반환한다

9. keys() : 배열 요소별로 키만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환한다

10. values() : 배열 요소별로 값만 포함하는 새로운 배열 반복자 객체를 배열 형태로 반환한다

11. find() : 검사를 위해 전달받은 함수를 만족하는 배열 요소의 값을 반환한다 / 만족하는 값이 없으면 undefined를 반환한다

12. findIndex() : 검사를 위해 전달받은 함수를 만족하는 배열 요소의 인덱스를 반환한다 / 만족하는 값이 없으면 -1을 반환한다