[자바스크립트 ] 자바스크립트 Array, Set, Map 쉽게 정리하기

1. Array (배열)

• 순서대로 값들을 저장하는 자료구조입니다.
• 쉽게 생각하면, 리스트라고 생각하면 됩니다.
• 여러 값들을 하나의 변수에 담고 싶을 때 사용합니다.

  const numbers = [1, 2, 3, 4, 5];
  const fruits = ["사과", "바나나", "오렌지"];
  

2. Set (세트)

• 중복 없이 값들을 저장하는 자료구조입니다.
• 집합이라는 개념으로, 중복된 값은 하나만 저장됩니다.
• 고유한 값들을 관리하는데 유용합니다.

  const uniqueNumbers = new Set([1, 2, 3, 3, 4]); // 중복된 3은 제거됩니다.
  console.log(uniqueNumbers); // {1, 2, 3, 4}

3. Map (맵)

• 키-값 쌍으로 데이터를 저장하는 자료구조입니다.
• 객체와 비슷하지만, 키를 이용해 값에 빠르게 접근할 수 있다는 장점이 있습니다.
• 연관 데이터를 저장하고 관리하는데 적합합니다.

  const user = new Map([
      ["name", "철수"],
      ["age", 30],
      ["job", "개발자"],
  ]);
  console.log(user.get("name")); // 철수
  

사용 시점 요약:

• Array: 순서대로 값들을 저장해야 할 때 (예: 리스트 만들기)
• Set: 중복된 값을 제거하고 고유한 값만 관리해야 할 때 (예: 고객 ID 관리)
• Map: 키-값 쌍으로 데이터를 연관시켜 저장하고 관리해야 할 때 (예: 사용자 정보 관리)

자바스크립트 Array, Set, Map 활용 예제

1. Array

예제 1: 쇼핑카트 구현

const cart = [];

function addToCart(item) {
  cart.push(item);
  console.log(`${item}을 장바구니에 추가했습니다.`);
}

function removeItemFromCart(item) {
  const index = cart.indexOf(item);
  if (index !== -1) {
    cart.splice(index, 1);
    console.log(`${item}을 장바구니에서 제거했습니다.`);
  } else {
    console.log(`${item}은 장바구니에 없습니다.`);
  }
}

function showCart() {
  if (cart.length === 0) {
    console.log("장바구니가 비어 있습니다.");
  } else {
    console.log("장바구니:");
    cart.forEach(item => console.log(`- ${item}`));
  }
}

// 예시 사용
addToCart("사과");
addToCart("바나나");
addToCart("오렌지");

removeItemFromCart("바나나");
showCart();

예제 2: 숫자 배열 정리

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

// 오름차순 정렬
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // [1, 2, 3, 4, 5]

// 짝수만 추출
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

// 각 숫자의 제곱 구하기
const squaredNumbers = numbers.map(number => number * number);
console.log(squaredNumbers); // [25, 1, 9, 16, 4]

2. Set

예제 1: 고유한 값 목록 만들기

const colors = ["빨간색", "초록색", "파란색", "빨간색", "주황색"];

const uniqueColors = new Set(colors);
console.log(uniqueColors); // Set { '빨간색', '초록색', '파란색', '주황색' }

예제 2: 두 배열의 공통 요소 찾기

const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [3, 4, 5, 6, 7];

const commonSet = new Set(numbers1).intersection(new Set(numbers2));
console.log(commonSet); // Set {3, 4, 5}

3. Map

예제 1: 학생 정보 관리

const students = new Map();

students.set("name", "철수");
students.set("age", 30);
students.set("grade", "고등학교 3학년");

console.log(students.get("name")); // 철수
console.log(students.has("age")); // true

students.forEach((value, key) => console.log(`${key}: ${value}`));
// name: 철수
// age: 30
// grade: 고등학교 3학년

예제 2: 단어장 만들기

const englishWords = new Map();

englishWords.set("apple", "사과");
englishWords.set("banana", "바나나");
englishWords.set("orange", "오렌지");

console.log(englishWords.get("banana")); // 바나나

for (const [key, value] of englishWords.entries()) {
  console.log(`${key} -> ${value}`);
}
// apple -> 사과
// banana -> 바나나
// orange -> 오렌지