자바스크립트의 고급 데이터 구조 (Set과 Map ,중첩 객체와 배열, JSON 데이터 다루기)
6. 자바스크립트의 고급 데이터 구조
자바스크립트는 기본적인 데이터 구조 외에도 더 복잡한 데이터를 처리할 수 있는 다양한 고급 데이터 구조를 제공합니다. 이 장에서는 Set과 Map, 중첩 객체와 배열, 그리고 JSON 데이터를 다루는 방법에 대해 알아보겠습니다.
6.1 Set과 Map
ES6(ECMAScript 2015)에서 추가된 Set과 Map은 자바스크립트에서 매우 유용한 데이터 구조입니다. 이들은 배열과 객체보다 특정 상황에서 더 적합한 성능과 기능을 제공할 수 있습니다.
6.1.1 Set
Set은 중복되지 않는 고유한 값들의 집합을 저장하는 데이터 구조입니다. 배열과 달리, Set은 동일한 값을 중복해서 저장하지 않으며, 빠르게 요소를 추가하거나 삭제할 수 있습니다.
6.1.1.1 Set의 주요 메서드
add(value): 새로운 값을Set에 추가합니다.delete(value): 특정 값을Set에서 삭제합니다.has(value):Set에 특정 값이 존재하는지 여부를 확인합니다.clear():Set의 모든 값을 삭제합니다.size:Set의 요소 개수를 반환합니다.
6.1.1.2 Set 사용 예시
javascriptconst mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // 중복 요소는 무시됨
mySet.add(3);
console.log(mySet); // Set { 1, 2, 3 }
console.log(mySet.size); // 3
mySet.delete(2);
console.log(mySet.has(2)); // false (삭제됨)
mySet.clear();
console.log(mySet.size); // 0 (모두 삭제됨)
위 코드에서 Set은 고유한 값만을 저장하며, 중복된 값이 무시된 것을 볼 수 있습니다.
6.1.2 Map
Map은 키-값 쌍을 저장하는 데이터 구조로, 객체와 유사하지만 몇 가지 중요한 차이점이 있습니다. Map은 키의 타입이 제한되지 않으며, 객체, 함수, 원시 값 등 다양한 타입의 키를 가질 수 있습니다.
6.1.2.1 Map의 주요 메서드
set(key, value): 새로운 키-값 쌍을Map에 추가합니다.get(key): 특정 키에 대한 값을 반환합니다.has(key):Map에 특정 키가 존재하는지 여부를 확인합니다.delete(key): 특정 키를Map에서 삭제합니다.clear():Map의 모든 키-값 쌍을 삭제합니다.size:Map의 요소 개수를 반환합니다.
6.1.2.2 Map 사용 예시
javascriptconst myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 25);
myMap.set({ hobby: "reading" }, "Hobby object");
console.log(myMap.get("name")); // Alice
console.log(myMap.get("age")); // 25
const hobbyObj = { hobby: "reading" };
console.log(myMap.get(hobbyObj)); // undefined (다른 객체로 인식됨)
myMap.delete("age");
console.log(myMap.has("age")); // false (삭제됨)
myMap.clear();
console.log(myMap.size); // 0 (모두 삭제됨)
Map은 객체를 키로 가질 수 있고, 원시 값뿐만 아니라 다양한 타입의 값을 저장하는 데 유용합니다.
6.2 중첩 객체와 배열
자바스크립트에서 객체와 배열은 자유롭게 중첩될 수 있습니다. 즉, 객체 안에 배열, 배열 안에 객체 등을 담아 복잡한 데이터 구조를 만들 수 있습니다. 이러한 구조는 여러 수준의 데이터를 관리하고, 계층적 데이터를 저장할 때 매우 유용합니다.
6.2.1 중첩 객체와 배열의 사용
중첩 객체와 배열은 종종 실세계 데이터를 모델링할 때 사용됩니다. 예를 들어, 한 사용자의 여러 개의 연락처 정보를 저장하거나, 하나의 객체 안에 여러 개의 하위 데이터를 포함하는 구조를 가질 수 있습니다.
6.2.1.1 중첩 객체와 배열 예시
javascriptconst user = {
name: "Alice",
age: 25,
contact: {
email: "alice@example.com",
phone: "010-1234-5678"
},
hobbies: ["reading", "gaming", "hiking"]
};
console.log(user.contact.email); // alice@example.com
console.log(user.hobbies[1]); // gaming
위 예제에서 user 객체는 contact라는 객체를 속성으로 가지고 있으며, hobbies라는 배열도 속성으로 포함하고 있습니다.
6.2.2 중첩된 배열
배열은 객체와 마찬가지로 중첩될 수 있습니다. 이러한 배열은 2차원 배열, 다차원 배열을 처리할 때 유용하게 사용됩니다.
6.2.2.1 중첩된 배열 예시
javascriptconst matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[0][0]); // 1
console.log(matrix[1][1]); // 5
console.log(matrix[2][2]); // 9
위 예제는 2차원 배열을 나타내며, 각각의 배열은 또 다른 배열을 요소로 가지고 있습니다. 이를 통해 행과 열로 구성된 데이터를 표현할 수 있습니다.
6.2.3 중첩된 데이터 구조 탐색
중첩된 객체나 배열에서 데이터를 탐색하는 것은 간단하지만, 구조가 복잡해질수록 탐색이 어려워질 수 있습니다. 이러한 경우, 반복문이나 재귀 함수를 사용하여 중첩된 데이터를 효율적으로 탐색할 수 있습니다.
6.2.3.1 중첩된 데이터 탐색 예시
javascriptconst organization = {
name: "TechCorp",
departments: [
{
name: "Engineering",
employees: [
{ name: "Alice", position: "Developer" },
{ name: "Bob", position: "Engineer" }
]
},
{
name: "Sales",
employees: [
{ name: "Charlie", position: "Sales Manager" },
{ name: "David", position: "Sales Associate" }
]
}
]
};
organization.departments.forEach(department => {
console.log(`Department: ${department.name}`);
department.employees.forEach(employee => {
console.log(`- ${employee.name}, ${employee.position}`);
});
});
위 예제는 organization 객체 안에 여러 부서(departments)가 있고, 각 부서 안에 직원 목록(employees)이 있는 구조입니다. 중첩된 데이터를 반복문으로 탐색하여 각 부서와 직원의 정보를 출력합니다.
6.3 JSON 데이터 다루기
JSON(JavaScript Object Notation)은 자바스크립트 객체 문법을 기반으로 한 경량 데이터 형식입니다. JSON은 서버와 클라이언트 간에 데이터를 주고받을 때 많이 사용됩니다. 자바스크립트에서 JSON 데이터를 다루는 것은 매우 간단하며, JSON.stringify()와 JSON.parse() 메서드를 통해 객체와 JSON 문자열 간의 변환을 처리할 수 있습니다.
6.3.1 JSON 형식
JSON은 자바스크립트 객체와 유사하지만, 속성 이름은 반드시 ""로 감싸야 하며, 배열이나 객체를 중첩해서 사용할 수 있습니다.
예시:
json{
"name": "Alice",
"age": 25,
"isStudent": true,
"hobbies": ["reading", "gaming", "hiking"],
"contact": {
"email": "alice@example.com",
"phone": "010-1234-5678"
}
}
위 JSON 예제는 자바스크립트 객체와 거의 유사하지만, 속성 이름이 모두 쌍따옴표로 감싸져 있다는 점이 다릅니다.
6.3.2 JSON.stringify()
JSON.stringify() 메서드는 자바스크립트 객체를 JSON 문자열로 변환합니다. 서버에 데이터를 전송하거나, 파일로 저장할 때 자주 사용됩니다.
6.3.2.1 JSON.stringify() 사용 예시
javascriptconst user = {
name: "Alice",
age: 25,
hobbies: ["reading", "gaming", "hiking"]
};
const jsonString = JSON.stringify(user);
console.log(jsonString);
// {"name":"Alice","age":25,"hobbies":["reading","gaming","hiking"]}
위 예제에서 user 객체는 JSON 문자열로 변환되었습니다. 이 변환된 JSON 문자열은 서버로 전송되거나 파일에 저장될 수 있습니다.
6.3.3 JSON.parse()
JSON.parse() 메서드는 JSON 문자열을 자바스크립트 객체로 변환합니다. 서버에서 받은 JSON 데이터를 자바스크립트에서 처리할 때 유용하게 사용됩니다.
6.3.3.1 JSON.parse() 사용 예시
javascriptconst jsonString = '{"name":"Bob","age":30,"hobbies":["swimming","cycling"]}';
const user = JSON.parse(jsonString);
console.log(user.name); // Bob
console.log(user.hobbies); // ["swimming", "cycling"]
위 예제에서 JSON 문자열은 JSON.parse() 메서드를 통해 자바스크립트 객체로 변환되었습니다.
6.4 JSON 데이터의 활용
JSON은 자바스크립트 객체 문법을 기반으로 한 데이터 형식이기 때문에, 자바스크립트에서 매우 쉽게 다룰 수 있습니다. 자바스크립트의 기본 객체나 배열을 이용해 JSON 데이터를 생성하거나, 서버에서 받은 JSON 데이터를 쉽게 처리할 수 있습니다.
6.4.1 JSON 데이터를 이용한 서버 통신
JSON은 주로 서버와의 통신에서 사용되며, 클라이언트에서 데이터를 서버로 전송하거나 서버에서 받은 데이터를 처리할 때 자주 사용됩니다. 예를 들어, fetch API를 사용하여 서버에 요청을 보내고, 그 응답을 JSON으로 처리할 수 있습니다.
예시:
javascriptfetch("https://api.example.com/users")
.then(response => response.json()) // JSON 응답을 자바스크립트 객체로 변환
.then(data => {
console.log(data); // 변환된 데이터를 사용
})
.catch(error => {
console.error("Error fetching data:", error);
});
위 예제에서 fetch는 서버에서 JSON 형식의 데이터를 받아와서, 그 데이터를 자바스크립트 객체로 변환한 후 사용할 수 있도록 처리합니다.
자바스크립트의 고급 데이터 구조인 Set과 Map은 각각 고유한 값들의 집합과 다양한 키를 가진 데이터를 효율적으로 처리할 수 있게 해줍니다. 또한, 중첩 객체와 배열은 복잡한 데이터를 구조화하여 다룰 수 있게 하며, 자바스크립트에서 흔히 사용하는 JSON은 서버와의 데이터 통신에서 중요한 역할을 합니다. 이 장에서 다룬 고급 데이터 구조는 자바스크립트에서 복잡한 데이터를 처리하고 관리하는 데 필수적인 도구입니다.
){kind=link}
댓글 쓰기
0 댓글