▶ 배열

배열을 왜 사용할까? 연관된 데이터를 정리정돈해서 단순화시키기 위해 배열을 사용한다.

▷ 인덱스와 요소

• 프로그래밍에선 자릿수를 인덱스라고 한다. (첫 번째 index는 0부터 시작)
• 배열 내부에 든 값을 요소라고 한다.
• 아래 코드 배열 value에서 smile의 인덱스는 2이고, 배열의 요소의 개수는 4이다.

첫 번째 데이터인 sieun을 꺼내보자

const value = ["sieun", "Happy", "smile", "good"];
console.log(value[0]); // sieun출력

▷ 배열의 길이 구하기

배열은 배열의 길이(요소의 개수)를 나타내는.length 프로퍼티를 갖는다.

const value = ["sieun", "Happy", "smile", "good"];
console.log(value.length); // 4출력

▶ 배열의 생성

new Array()와 Array.of()는 주로 새로운 배열을 생성할 때 사용되고,
Array.from()은 기존 객체를 배열로 변환할 때 주로 사용된다.

▷ 배열 리터럴 대괄호([ ])를 사용

빈 배열 생성

const arr = [];
arr[0] = "sieun";
arr[1] = "happy";
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // sieun, happy 출력
}

초기 값할당하여 배열 생성

const arr = ["sieun", "happy"];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // sieun, happy 출력
}

▷ new array()

new Array() 함수를 사용하여 빈 배열이나 지정한 길이의 배열을 생성할 수 있다.

빈 배열 생성

const arr = new Array("sieun", "happy");
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // sieun, happy 출력
}

지정한 길이의 배열 생성

const arr = new Array(3);

▷ array.of()

전달한 인자들(파라미터들)을 사용하여 새로운 배열을 생성하는 메서드이다.
즉, 이 메서드는 인자 값을 배열의 요소로 만든다.

const arr = Array.of("sieun", "happy");
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // sieun, happy 출력
}

▷ array.from()

▶ 배열 요소 찾기

▷ 배열의 특정 요소 찾기(includes())

• 주어진 값이 배열 내부에 존재하면 true, 아니면 false 반환

const arr = ["행", "복", "한", "하", "루"];

const result1 = arr.includes("행");
const result2 = arr.includes("훙");

console.log(result1);
console.log(result2);

▷ 특정 요소가 몇 번째 인덱스에 위치하는지 찾기(indexOf(), lastIndexOf())

const arr = ["행", "복", "한", "하", "루"];

const result1 = arr.lastIndexOf("행");
const result2 = arr.indexOf("한");

console.log(result1);
console.log(result2);

▷ 배열의 마지막 요소 찾기

• 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 된다.

const value = ["sieun", "Happy", "smile", "good"];
const last_value = value[value.length - 1];
console.log(last_value); // good 출력

lenght-1을 하는 이유 : 배열의 인덱스가 0부터 시작하기 때문이다

예를 들어 ["A", "B", "C", "D"]라는 배열이 있다면, 이 배열의 길이는 4이며 각 요소의 인덱스는 0부터 시작한다. 따라서 배열의 마지막 요소의 인덱스는 배열의 길이에서 1을 뺀 값인 것이다.

위를 참고하여 value 배열의 마지막에서 세 번째 요소(Happy)를 찾아보자

const value = ["sieun", "Happy", "smile", "good"];
const last_value = value[value.length - 3];
console.log(last_value); // Happy 출력

▶ 배열 요소 추가

▷ 배열 맨 앞에 요소 추가(unshift())

const arr = ["나", "다", "라"];
arr.unshift("가");
console.log(arr);

▷ 배열 마지막에 요소 추가(push())

방법1

const arr = ["나는", "매우", "해피"];
arr[3] = "하다";
console.log(arr);

방법2

• 배열의 마지막 요소 인덱스가 배열.length - 1이므로 다음 요소를 추가하려면 배열.lenght에 값을 넣으면 된다.

const arr = ["나는", "매우", "해피"];
arr[arr.length] = "하다";
console.log(arr);

⭐방법3

• push() 사용

const arr = ["시", "은", "행"];
arr.push("복");
console.log(arr);

▶ 배열 요소 제거

▷ 배열 첫 번째 요소 제거(shift())

const arr = ["바보", "시", "은"];
arr.shift();
console.log(arr);

▷ 배열 중간 요소 제거(splice())

const arr = ["시", "은", "바", "보", "입", "니", "다"];
arr.splice(2, 2, "천", "사");
console.log(arr);

❗splice로 값을 지우기만 하는 것이 아닌, 지워진 자리에 다른 값을 넣을 수도 있다.

const arr = ["시", "은", "바", "보", "입", "니", "다"];
arr.splice(2, 2, "천", "사");
console.log(arr);

❗또한 값을 지우지 않고 중간에 값을 추가할 수 있다.

const arr = ["시", "은", "바", "보", "니", "다"];
arr.splice(4, 0, "아", "닙");
console.log(arr);

⚠️단, 숫자 하나만 쓸 때는 뒤에 것을 다 지워버린다.

const arr = ["시", "은", "바", "보", "입", "니", "다"];
arr.splice(2);
console.log(arr);

▷ 배열 마지막 요소 제거하기(pop())

const arr = ["시", "은", "바보"];
arr.pop();
console.log(arr);

▶ 배열 요소 수정

const arr = ["자", "장", "면"];
arr[0] = "짜";
console.log(arr);

---

📎참조

mozilla 배열
자바스크립트 배열(Array) 생성 및 사용법 쉽게 정리