자바스크립트 배열과 객체의 차이점

자바스크립트에서 배열과 객체는 둘 다 데이터를 저장하고 다루는 데 사용되는 자료 구조입니다. 하지만 배열과 객체는 성격과 사용 방법에서 차이가 있습니다. 이번 글에서는 자바스크립트 배열과 객체의 주요 차이점을 살펴보겠습니다.

1. 구조와 정의

1.1 배열 (Array)

자바스크립트 배열은 순서가 있는 값의 목록으로 표현됩니다. 배열은 대괄호 []를 사용하여 정의하며, 각 값은 쉼표로 구분됩니다. 배열 내의 각 값은 인덱스를 가지고 있으며, 순서대로 접근할 수 있습니다.

let fruits = ['apple', 'banana', 'orange'];

1.2 객체 (Object)

자바스크립트 객체는 키와 값의 쌍으로 구성됩니다. 객체는 중괄호 {}를 사용하여 정의하며, 각 쌍은 쉼표로 구분됩니다. 객체 내의 각 항목은 고유한 키로 식별됩니다. 객체는 키를 통해 값을 접근할 수 있습니다.

let person = { name: 'John', age: 30, occupation: 'developer' };

2. 사용법

2.1 배열 (Array)

배열은 순차적인 데이터를 다루는 데 적합합니다. 배열에서는 인덱스를 통해 접근할 수 있으며, 배열에 포함된 값의 위치를 변경하거나 추가/삭제할 수 있습니다. 또한 배열의 크기를 동적으로 조정할 수 있습니다.

let colors = ['red', 'green', 'blue'];

console.log(colors[0]); // 'red'

colors.push('yellow');
console.log(colors); // ['red', 'green', 'blue', 'yellow']

colors.splice(1, 1);
console.log(colors); // ['red', 'blue']

2.2 객체 (Object)

객체는 키-값 쌍을 다루는 데 적합합니다. 객체에서는 키를 통해 접근하며, 키를 기반으로 값을 수정하거나 추가할 수 있습니다. 객체는 특정 값을 조회하기 위해 키를 사용할 수 있으며, 키의 유일성을 보장합니다.

let person = { name: 'John', age: 30, occupation: 'developer' };

console.log(person.name); // 'John'

person.age = 31;
console.log(person); // { name: 'John', age: 31, occupation: 'developer' }

person.location = 'New York';
console.log(person); // { name: 'John', age: 31, occupation: 'developer', location: 'New York' }

3. 주요 차이점

3.1 데이터의 성격

배열은 순서가 있는 값의 목록이며, 같은 성격이지만 다른 값을 가질 수 있습니다. 예를 들어, 숫자 배열에서 한 인덱스는 숫자이고 다른 인덱스는 문자열일 수 있습니다.

객체는 키-값 쌍으로 이루어진 구조이며, 서로 다른 성격의 데이터를 가질 수 있습니다. 예를 들어, 한 객체에서는 이름(name)과 나이(age) 속성을 가지고 있고, 다른 객체에서는 이름(name)과 주소(address) 속성을 가질 수 있습니다.

3.2 사용 방법

배열은 순차적인 데이터를 처리하는 데 용이하며, 반복문을 통해 값을 처리하고 수정할 수 있습니다. 배열은 순서를 유지하므로 값의 순서가 중요한 경우에 사용됩니다.

객체는 키-값 쌍으로 데이터를 다루는 데 용이하며, 객체에 포함된 키를 이용하여 값을 조회하고 수정할 수 있습니다. 객체는 속성의 이름이 중요한 경우에 사용됩니다.

결론

자바스크립트에서 배열과 객체는 데이터를 다루는 두 가지 주요한 자료 구조입니다. 배열은 순서가 있는 값의 목록이며, 객체는 키-값 쌍으로 구성됩니다. 각각의 자료 구조는 자신만의 장점과 사용 방법을 가지고 있으므로, 데이터의 성격과 다루어야 할 작업에 따라 적절히 선택하여 사용해야 합니다.