자바스크립트 객체와 배열: 데이터 구조의 핵심 개념과 활용법

자바스크립트에서 데이터를 효율적으로 저장하고 조작하려면 객체(Object) 와 배열(Array) 을 반드시 이해해야 합니다. 객체는 키-값 쌍을 기반으로 데이터를 논리적으로 그룹화하는 데 사용되며, 배열은 순서가 있는 리스트 형태로 여러 값을 저장하는 데 활용됩니다.

이 블로그에서는 객체와 배열의 생성 방법, 속성 접근 및 조작법, 그리고 객체와 배열을 함께 사용하는 방법 을 심층적으로 분석해 보겠습니다.

---

🔹 객체(Object): 키-값 쌍 기반의 데이터 구조

객체는 키-값(Key-Value) 쌍으로 구성된 데이터 구조로, 하나의 개체(Entity)에 대한 다양한 정보를 저장할 때 사용됩니다. 예를 들어, 사용자의 이름, 나이, 이메일 주소 등을 하나의 객체로 관리할 수 있습니다.

1️⃣ 객체 생성 방법

자바스크립트에서 객체를 생성하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 객체 리터럴(Object Literal) 방식을 사용하는 것입니다.

▶ 객체 리터럴을 이용한 생성

// 빈 객체 생성
let person = {};

// 속성 추가
person.name = "홍길동";
person.age = 30;
person.job = "프론트엔드 개발자";

// 객체 출력
console.log(person);
// 결과: { name: '홍길동', age: 30, job: '프론트엔드 개발자' }

▶ 객체를 선언할 때 속성을 미리 지정하는 방법

let person2 = {
    name: "이영희",
    age: 28,
    job: "UI/UX 디자이너"
};

console.log(person2);
// 결과: { name: '이영희', age: 28, job: 'UI/UX 디자이너' }

객체 리터럴을 사용하면 코드가 간결하고 가독성이 뛰어나며, 가장 많이 사용하는 방식입니다.

---

2️⃣ 객체 속성 접근 방법

객체의 속성 값을 가져오거나 수정하는 방법은 점 표기법(dot notation) 과 대괄호 표기법(bracket notation) 두 가지가 있습니다.

▶ 점 표기법(Dot Notation)

console.log(person.name);  // 홍길동

▶ 대괄호 표기법(Bracket Notation)

console.log(person["age"]);  // 30

대괄호 표기법은 동적으로 속성을 참조할 때 유용합니다.

let key = "name";
console.log(person[key]);  // 홍길동

---

3️⃣ 객체 속성 추가, 수정 및 삭제

객체의 속성은 동적으로 추가, 수정, 삭제할 수 있습니다.

▶ 속성 추가 및 수정

person.age = 35; // 나이 변경
person.city = "서울"; // 새로운 속성 추가

console.log(person);
// 결과: { name: '홍길동', age: 35, job: '프론트엔드 개발자', city: '서울' }

▶ 속성 삭제

delete person.city;
console.log(person);
// 결과: { name: '홍길동', age: 35, job: '프론트엔드 개발자' }

---

🔹 배열(Array): 순서가 있는 데이터 저장 구조

배열은 여러 개의 데이터를 순서대로 저장할 수 있는 데이터 구조입니다. 배열은 [] 대괄호를 사용하여 생성하며, 각 요소는 인덱스(0부터 시작)를 통해 접근할 수 있습니다.

1️⃣ 배열 생성 및 요소 추가

// 빈 배열 생성
let fruits = [];

// 요소 추가
fruits.push("사과");
fruits.push("바나나");

console.log(fruits); 
// 결과: ['사과', '바나나']

배열을 생성할 때 초기값을 미리 지정할 수도 있습니다.

let colors = ["빨강", "파랑", "초록"];
console.log(colors); 
// 결과: ['빨강', '파랑', '초록']

---

2️⃣ 배열 요소 접근 및 수정

배열의 각 요소는 인덱스(번호) 를 통해 접근하며, 인덱스는 항상 0부터 시작합니다.

let fruits = ["사과", "바나나", "오렌지"];

// 첫 번째 요소 접근
console.log(fruits[0]); // 사과

// 요소 수정
fruits[1] = "포도";
console.log(fruits); 
// 결과: ['사과', '포도', '오렌지']

---

3️⃣ 배열 메서드 활용 (push, pop, shift, unshift)

배열은 다양한 메서드를 제공하여 데이터를 쉽게 조작할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];

// 마지막 요소 제거 (pop)
numbers.pop();
console.log(numbers); 
// 결과: [1, 2, 3, 4]

// 첫 번째 요소 제거 (shift)
numbers.shift();
console.log(numbers); 
// 결과: [2, 3, 4]

// 새로운 요소 추가 (push, unshift)
numbers.push(6);
console.log(numbers); 
// 결과: [2, 3, 4, 6]

numbers.unshift(0);
console.log(numbers); 
// 결과: [0, 2, 3, 4, 6]

---

🔹 객체와 배열 함께 사용하기

객체와 배열을 함께 사용하면 더 복잡한 데이터 구조를 표현할 수 있습니다. 예를 들어, 학생들의 정보를 배열 안의 객체 형태로 저장할 수 있습니다.

let students = [
    { name: "김철수", age: 22, major: "컴퓨터공학" },
    { name: "이영희", age: 25, major: "디자인" }
];

// 학생 정보 출력
students.forEach(student => {
    console.log(`이름: ${student.name}, 나이: ${student.age}, 전공: ${student.major}`);
});

/*
결과:
이름: 김철수, 나이: 22, 전공: 컴퓨터공학
이름: 이영희, 나이: 25, 전공: 디자인
*/

이처럼 객체와 배열을 함께 활용하면 복잡한 데이터 관리가 쉬워지고 다양한 상황에서 유용하게 사용할 수 있습니다.

---

🔹 결론

자바스크립트에서 객체와 배열은 데이터를 효율적으로 저장하고 조작하는 데 필수적인 요소입니다.

• 객체(Object): 키-값 쌍 형태의 데이터 구조. 데이터를 논리적으로 그룹화할 때 유용.
• 배열(Array): 순서가 있는 데이터 리스트. 여러 개의 값을 효율적으로 저장 및 조작 가능.
• 객체와 배열 결합: 배열 안에 객체를 넣거나, 객체 속성으로 배열을 포함하여 더 복잡한 데이터 구조를 표현할 수 있음.

이러한 개념을 잘 이해하면 자바스크립트의 데이터 처리 능력을 한층 더 강화할 수 있습니다.