JavaScript의 배열

배열

연관된 데이터를 연속적인 형태로 저장
배열 안 원소는 순서대로 index(번호)가 붙음
출석부에 비유할 수 있음

배열 생성 방법

// 일반적인 배열 생성 방법
const arr1 = new Array();

// 빈 배열도 생성 가능
const arr2 = [];
const arr3 = [1, 2, 3, 4, 5];

// 배열 요소 갯수 설정 가능
const arr4 = new Array(5);
// 각 요소의 값도 동시 설정 가능
const arr5 = new Array(5).fill(5);
// from으로 조건에 맞게 요소 설정 가능
const arr6 = Array.from(Array(5), function (value, index) {
  return index + 1;
});

console.log(arr1); // []
console.log(arr2); // []
console.log(arr3); // [1, 2, 3, 4, 5]
console.log(arr4); // [ <5 empty items> ]
console.log(arr5); // [ 5, 5, 5, 5, 5 ]
console.log(arr6); // [ 1, 2, 3, 4, 5 ]

• 배열 길이는 length 메서드

let arr = [1, 2, 3];
console.log(arr.length); // 3

// 배열 길이 추가
arr.length += 3;
console.log(arr); // [ 1, 2, 3, <3 empty items> ]

// 배열 길이를 감소시키면 범위 밖 요소는 삭제됨
arr.length -= 5;
console.log(arr); // [ 1 ]

• 배열 요소 합쳐서 문자열로 표현 : join(요소 사이 포함될 문자)

const arr = [1, 2, 3, 4, 5];
console.log(arr.join(', ')); // 1, 2, 3, 4, 5

• 배열 요소 순서 뒤집기 : reverse()
  단, 원본 배열이 바뀌므로 원본 배열 깊은 복사 필요할 수도 있음

const arr = [1, 2, 3, 4, 5];

console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]
console.log(arr); // [ 5, 4, 3, 2, 1 ]

• 배열끼리 합치기 : 배열1.concat(배열2)

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8];

console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

• 배열 요소 추가 삭제

1. 배열 오른쪽 끝부분 추가 / 삭제 : push / pop
pop은 삭제할 요소를 반환함

const arr = [1, 2, 3, 4, 5];

arr.push(6);
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

console.log(arr.pop()); // 6 (삭제할 요소를 반환함)
console.log(arr); // [ 1, 2, 3, 4, 5 ]

2. 배열 왼쪽 끝부분 추가 / 삭제 : unshift, shift
shift 역시 삭제할 요소 반환함

const arr = [1, 2, 3, 4, 5];

arr.unshift(6);
console.log(arr); // [ 6, 1, 2, 3, 4, 5 ]

console.log(arr.shift()); // 6 (삭제할 요소를 반환함)
console.log(arr); // [ 1, 2, 3, 4, 5 ]

• 배열 슬라이싱 : slice(시작 index, 끝 index)
  시작 index 부터 끝 index 바로 전 요소까지 슬라이싱
  원본 배열 유지

const arr = [1, 2, 3, 4, 5];

console.log(arr.slice(2, 4)); // [ 3, 4 ]
console.log(arr); // [ 1, 2, 3, 4, 5 ]

• 배열 슬라이싱 추출 : splice(시작 index, 갯수)
  원본 배열 변화

const arr = [1, 2, 3, 4, 5];

console.log(arr.splice(2, 2)); // [ 3, 4 ]
console.log(arr); // [ 1, 2, 5 ]

• 배열 순회

1. 일반적 배열 순회 : for 문
2. for of feat. ES6

const arr = [1, 2, 3, 4, 5, 6];

for (const item of arr) {
  console.log(item);
}

// 1 2 3 4 5 6

• 배열은 타입이 객체와 동일 (이 때까지 다른 것이라고 알고 있었다...)
  하지만 길이는 변하지 않음

const arr = [1, 2, 3, 4, 5, 6];

arr['key'] = 'value';
console.log(arr); // [ 1, 2, 3, 4, 5, 6, key: 'value' ]
console.log(arr.length); // 6

이것은 배열을 올바르게 사용하는 방법은 아니므로 추천하지 않음

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.

관련 레퍼런스

[MDN 공식문서] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
[poiemaweb]
https://poiemaweb.com/js-array