배열은 순서가 중요한 데이터를 저장할 때 사용하는 자바스크립트의 데이터 구조다.
하지만 배열은 단순히 여러 데이터를 묶는 데 그치지 않고, 다양한 프로퍼티와 메서드를 제공해 데이터를 유연하게 다룰 수 있다.
배열도 객체?
먼저 배열이 자바스크립트에서 어떤 종류의 데이터인지 살펴보자.
배열을 선언하고, typeof 연산자로 자료형을 확인해보자:
const members = ["프로그래밍", "자바스크립트", "배열"];
console.log(typeof members); // "object"
출력 결과는 "object"다.
배열도 사실 자바스크립트에서 미리 만들어둔 특별한 객체라는 뜻이다.
- 배열의 특징:
- 순서를 유지하며 데이터를 저장.
- 각 요소(Element)는 인덱스(Index)로 접근 가능.
- 배열의 길이는 자동으로 관리됨.
즉, 배열은 객체의 특징을 가지면서도 데이터를 순서대로 관리할 수 있는 고유한 데이터 구조다.
배열의 주요 프로퍼티: length
배열의 length 프로퍼티는 배열이 가지고 있는 요소의 개수를 알려준다.
이 값은 배열을 생성하거나 수정할 때 자동으로 갱신된다.
const members = ["프로그래밍", "자바스크립트", "배열"];
console.log(members.length); // 3
length 활용 예제: 마지막 요소 접근
배열의 인덱스는 0부터 시작한다.
따라서 마지막 요소에 접근하려면 length - 1을 사용하면 된다:
const members = ["프로그래밍", "자바스크립트", "배열"];
console.log(members[members.length - 1]); // "배열"
length를 통한 배열 확장
length는 배열의 길이를 늘리거나 줄이는 데도 사용될 수 있다.
배열의 길이를 직접 변경하면, 배열의 크기가 확장되거나 축소된다:
const members = ["프로그래밍", "자바스크립트"];
members.length = 5;
console.log(members); // ["프로그래밍", "자바스크립트", <3 empty items>]
members.length = 1;
console.log(members); // ["프로그래밍"]
- 주의: 배열 길이를 늘릴 경우, 새로 추가된 요소는
undefined대신<empty>로 표시된다. - 이는 "비어 있는 자리"만 추가된 것이며, 실제 값이 들어간 것은 아님.
배열의 요소 추가와 수정
배열은 객체처럼 존재하지 않는 인덱스에 값을 할당하면 새 요소를 추가할 수 있다.
또한 이미 존재하는 요소에 값을 할당하면 기존 값을 수정한다.
요소 추가
const members = ["프로그래밍", "자바스크립트"];
members[2] = "배열"; // 새로운 요소 추가
console.log(members); // ["프로그래밍", "자바스크립트", "배열"]
요소 수정
members[1] = "웹 개발"; // 기존 요소 수정
console.log(members); // ["프로그래밍", "웹 개발", "배열"]
주의: 인덱스를 건너뛰어 추가할 경우
존재하지 않는 인덱스에 값을 추가할 때, 중간에 비어 있는 요소(<empty>)가 생길 수 있다:
members[5] = "학습";
console.log(members);
// ["프로그래밍", "웹 개발", "배열", <2 empty items>, "학습"]
console.log(members[4]); // undefined
console.log(members.length); // 6
- 빈 요소와
undefined의 차이:undefined: 명시적으로 값을 지정하지 않은 상태.- 빈 요소(
<empty>): 배열에 자리만 있고 값이 없는 상태.
배열의 요소 삭제
1. delete 연산자
delete를 사용하면 요소의 값은 삭제되지만, 자리 자체는 남는다:
delete members[1];
console.log(members);
// ["프로그래밍", <empty>, "배열", <2 empty items>, "학습"]
console.log(members.length); // 6 (길이는 변하지 않음)
2. 완전한 삭제를 위한 메서드 사용
배열의 요소를 완전히 제거하려면 배열의 메서드(splice, pop 등)를 사용하는 것이 더 적합하다.
이 부분은 다음 글에서 다룰 예정이다.
배열과 객체의 차이점
- 객체: 각 데이터가 이름(프로퍼티 네임)으로 구분됨.
- 배열: 데이터가 순서(인덱스)로 구분됨.
객체는 데이터를 구조적으로 관리할 때 유리하고,
배열은 데이터를 순서대로 관리할 때 유리하다.
배열을 사용할 때의 실수 방지
length는 자동으로 갱신되지만, 중간에 비어 있는 요소를 주의해야 함.- 인덱스를 건너뛰어 추가하지 않도록 신경 쓸 것.
- 요소 삭제 시
delete는 완전히 제거되지 않음.
요약
- 배열은 자바스크립트의 특별한 객체로, 순서가 중요한 데이터를 저장할 때 사용한다.
- 배열의
length프로퍼티는 요소의 개수를 알려주며, 배열 크기를 변경할 수도 있다.- 존재하지 않는 인덱스에 값을 할당하면 새 요소가 추가되지만, 중간에 빈 요소(
<empty>)가 생길 수 있다.- 요소를 삭제할 때
delete를 사용할 경우 자리만 남고 완전히 제거되지 않으므로, 배열 메서드를 사용하는 것이 더 적합하다.
배열은 자바스크립트에서 가장 강력한 데이터 구조 중 하나다. 배열의 동작 원리와 특징을 이해하면 더욱 효율적으로 데이터를 다룰 수 있다! 🚀
