JavaScript 연관 배열 설명: 객체, 사용법 및 주요 차이점

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 서론

JavaScript는 웹 개발에서 필수적인 프로그래밍 언어 중 하나입니다. 그 많은 기능 중에서 “연관 배열”은 효율적인 데이터 관리와 처리를 돕는 중요한 구조입니다.

이 기사에서는 JavaScript 연관 배열에 대한 상세한 설명을 제공합니다. 기본 개념부터 고급 사용법까지 다루며, 초보자도 쉽게 이해할 수 있도록 코드 예제가 포함되어 있으니 실무 참고 자료로 활용해 주세요.

2. 연관 배열이란 무엇인가?

2.1 연관 배열의 정의

연관 배열은 “키”와 “값”의 쌍으로 데이터를 관리하는 데이터 구조의 한 유형입니다. 표준 배열은 인덱스 번호(0, 1, 2, …)를 사용하지만, 연관 배열은 임의의 문자열 키를 사용하여 데이터에 접근할 수 있습니다.

2.2 JavaScript에서의 연관 배열

JavaScript에서 연관 배열은 객체를 사용하여 표현됩니다. 객체는 중괄호 {}를 사용하여 정의되며, 키–값 쌍으로 데이터를 저장합니다.

아래는 JavaScript에서 연관 배열의 기본 예제입니다.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 연관 배열과 일반 배열의 차이점

연관 배열과 일반 배열은 다음과 같은 점에서 다릅니다.

2.4 사용 사례

일반 배열은 목록 형태의 데이터를 관리하는 데 적합하며, 연관 배열은 사용자 정보 또는 설정과 같은 특정 속성을 가진 데이터를 처리하는 데 편리합니다.

3. 연관 배열 생성 방법

3.1 객체 리터럴을 사용한 선언

JavaScript에서 연관 배열을 생성하는 가장 일반적인 방법은 객체 리터럴을 사용하는 것입니다.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 new Object()를 사용한 생성

또 다른 방법은 new Object()를 사용하여 객체를 생성하는 것입니다.

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 동적으로 키와 값 추가

대괄호 표기법을 사용하면 변수를 키로 사용할 수도 있습니다.

let key = "color";
let product = {};
product[key] = "red";

4. 연관 배열 조작

4.1 요소 추가

점 표기법을 사용한 추가

let user = {};
user.name = "Tanaka";
user.age = 30;

대괄호 표기법을 사용한 추가

let user = {};
user["email"] = "tanaka@example.com";

4.2 요소 검색

점 표기법을 사용한 검색

console.log(user.name); // "Tanaka"

대괄호 표기법을 사용한 검색

console.log(user["email"]); // "tanaka@example.com"

4.3 요소 업데이트

기존 값에 새로운 값을 동일한 키에 할당하여 업데이트할 수 있습니다.

user.age = 35;
console.log(user.age); // 35

4.4 요소 삭제

delete 키워드를 사용하여 키–값 쌍을 제거합니다.

delete user.phone;
console.log(user.phone); // undefined

5. 연관 배열 반복

5.1 for…in 루프를 사용한 반복

for...in 루프를 사용하면 연관 배열의 키를 반복할 수 있습니다.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Object.keys()와 forEach() 사용

Object.keys()를 사용하여 키 배열을 가져온 후 forEach()로 반복할 수 있습니다.

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Object.entries()와 for…of 사용

Object.entries()를 사용하면 키와 값을 동시에 반복할 수 있습니다.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. 연관 배열 정렬

6.1 키에 따른 정렬

JavaScript 객체 자체는 직접 정렬할 수 없지만, 키를 정렬한 후 정렬된 순서로 값에 접근할 수 있습니다.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 값에 따라 정렬

값에 따라 정렬하려면 Object.entries()를 사용하여 객체를 키‑값 쌍의 배열로 변환합니다.

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 정렬 시 중요한 주의사항

값이 문자열로 저장된 경우, 숫자 정렬을 위해서는 명시적인 변환이 필요합니다.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. 연관 배열 사용 시 중요한 주의사항

7.1 중복 키와 덮어쓰기

같은 키가 여러 번 정의되면, 뒤에 정의된 값이 앞의 값을 덮어씁니다.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined와 키 존재 여부 확인

연관 배열에 키가 존재하는지 확인하려면 in 연산자나 hasOwnProperty()를 사용합니다.

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 push 메서드는 사용할 수 없음

연관 배열(객체)은 push() 메서드를 지원하지 않으며, 이는 일반 배열에서만 사용할 수 있습니다.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 JSON 데이터와의 차이점

JavaScript 객체와 JSON 데이터는 관련이 있지만 동일하지 않습니다. 데이터를 교환하려면 객체를 JSON 문자열로 변환해야 합니다.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. 요약

8.1 연관 배열의 핵심 포인트

• 데이터는 키‑값 쌍을 사용하여 관리됩니다.
• 추가, 조회, 업데이트, 삭제와 같은 유연한 작업이 가능합니다.
• 연관 배열은 내장 메서드를 통해 반복 및 정렬을 지원합니다.

8.2 실용적인 사용 예시

아래는 배열과 연관 배열을 결합하여 여러 사용자 객체를 처리하는 예시입니다.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. FAQ – 자주 묻는 질문

Q1. 연관 배열과 일반 배열의 차이점은 무엇인가요?

일반 배열은 숫자 인덱스를 사용하고, 연관 배열은 문자열 키를 사용해 값을 접근합니다.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. 키가 존재하는지 어떻게 확인할 수 있나요?

in 연산자를 사용하여 키의 존재 여부를 확인할 수 있습니다.

if ("age" in user) {
  console.log(user.age);
}

10. 최종 요약

JavaScript 연관 배열은 데이터를 관리하고 조직하는 데 매우 유용합니다.
이 글에서는 기본 개념부터 고급 사용 패턴까지 모두 다루었습니다.

다음 단계:

• 직접 코드 예제를 실행하여 이해를 심화하세요.
• 연관 배열을 JSON 데이터 및 API 작업과 통합해 보세요.