[JavaScript] 배열

1. 배열

배열은 여러 개의 값을 저장할 수 있는 자료의 묶음입니다.

1) 배열 생성

배열을 만들 때에는 변수 선언 후 [ ]안에 변수의 요소의 값을 넣을 수 있습니다.

const itemsA = ["사과", "배", "바나나"]

2) 배열 사용

배열의 내용을 사용할 때는 배열[인덱스]로 값을 불러올 수 있습니다.

배열명[인덱스값]

itemsA[1] // 사과

3) 배열 요소 개수 확인

배열의 개수를 확인할 때는 .length 를 사용하여 확인할 수 있습니다.

배열명.length

litemsA.length // 3

4) 배열 요소 추가

자바스크립트 배열은 값을 추가하여 사용이 가능합니다.

(1) push

배열 뒷 부분에 요소를 추가할 때는 push() 메서드를 사용할 수 있습니다.

배열.push(요소)

const todos = ["기상", "공부", "운동"];
todos.push("장보기");
todos.push("저녁준비");

console.log(todos);
// ["기상", "공부", "운동", "장보기", "저녁준비"]

✔ 배열은 참조변수이기 때문에 const로 선언되었어도 값 수정이 가능합니다.
※ 값의 전체를 재할당하는 것은 불가능합니다.

(2) 인덱스 값으로 추가

자바스크립트의 배열은 길이가 고정되어 있지 않기 때문에 인덱스 번호를 사용해 요소를 추가할 수 있습니다.

const fruits = ["사과", "배", "바나나"];
fruits[4] = "귤"; // 인덱스 값으로 지정
fruits.length = "포도"; // length로 지정

console.log(fruits);
// ["사과", "배", "바나나", "귤", "포도"]

(3) 특정 위치에 추가

배열의 특정 위치에 요소를 추가할 때는 splice() 메서드를 사용할 수 있습니다.

배열.splice(인덱스, 0, 요소)
(추가하고자하는 위치, 0, 추가하고자하는 요소) 로 사용합니다.
2번째 매개변수에 0을 입력하면 요소를 삭제하지않고, 3번째 매개변수에 있는 요소를 추가합니다.

const items = ["사과", "귤", "바나나", "오렌지"];
console.log(items); 
// ["사과", "귤", "바나나", "오렌지"]

items.splice(1, 0, "양파"); // 1번 인덱스에 요소 추가
console.log(items); 
// ["사과", "양파", "귤", "바나나", "오렌지"]

5) 배열 요소 제거

(1) 인덱스 기반으로 제거

배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메서드를 사용합니다.

배열.splice(인덱스, 제거할 요소의 개수)

const fruits = ["사과", "배", "바나나"];
fruits.splice(2, 1); 
// 배열의 2번째 인덱스로 부터 1개 요소를 제거
console.log(fruits); // ["사과", "배"]

(2) 값을 기반으로 제거

배열 내부에서 특정 값의 위치를 찾는 indexOf() 메서드를 사용해서 값의 위치를 추출한 후, splice() 메서드를 사용해서 제거합니다.

indexOf()

const 인덱스 = 배열.indexOf(요소);
배열.splice(인덱스, 1);

// 사용 예제
const fruitsB = ['사과', '배', '바나나'];

const index = fruitsB.indexOf('바나나'); // 바나나를 값으로 가지는 인덱스 구함
console.log(index); // 2
// 배열에 값이 없는 경우는 -1을 출력
console.log(fruitsB.indexOf('포도')); // -1

// indexOf를 활용해 조건문에 사용 가능
if (fruitsB.indexOf('바나나') >= 0) { // 요소가 있을 경우
	fruitsB.splice()
}