[JavaScript] 정적인 키-값 탐색

배열과 객체의 차이점

---

이전 포스팅에서 배열에 대해 살펴봤다. 배열은 구조적으로 유사하고, 다른 데이터와 교체가 자유로운 경우 사용하기 적합한 컬렉션이다. 그러나 배열만으로는 표현하기 어려운 상황도 존재한다.

예를 들어, 다음은 색상 코드를 저장한 배열이다.

const colors = ['#d10202', '#19d836', '#0e33d8'];

이 배열에서는 각각의 색상 코드가 어떤 색상을 의미하는지 명확히 알기 어렵다. 이러한 경우, 키-값 형태의 컬렉션을 사용하는 것이 더 적합하다.

 

 

객체: 키-값 형태의 정적인 데이터 다루기

---

객체는 변화가 적고 구조화된 데이터를 다룰 때 유용하다. 다음은 색상 코드와 색상 이름을 키-값 쌍으로 표현한 예다.

 

 

const color = {
  red: '#d10202',
  green: '#19d836',
  blue: '#0e33d8'
};

위와 같이 중괄호 {}를 사용하여 키-값 형태로 데이터를 작성하는 것을 객체 리터럴이라고 한다. 객체는 정적이고 구조화된 데이터를 관리하기에 적합하지만, 자주 갱신되는 동적인 정보를 다루기에는 적합하지 않다.

 

 

 

객체를 활용한 함수 설계

---

객체는 함수에서 데이터를 처리하고 전달할 때도 유용하다. 다음은 객체를 생성하고 반환하는 함수의 예다.

function getBill(item) {
  return {
    name: item.name,
    due: twoWeekFromNow(),
    total: calculateTotal(item.price)
  };
}

const bill = getBill({
  name: '물',
  price: 1000
});

여기서 getBill 함수는 매개변수로 전달받은 데이터를 기반으로 새로운 객체를 생성해 반환한다. 이 방식은 기존 객체를 직접 수정하지 않아 데이터 관리가 더욱 안전하다.

 

 

 

 

객체와 함수의 조합: 데이터 전달과 활용

---

 

생성된 객체는 다른 함수에 전달하여 다양한 용도로 사용할 수 있다. 다음은 객체를 활용해 데이터를 화면에 표시하는 함수의 예다.

function displayBill(bill) {
  return `${bill.name} 비용은 ${bill.total} 달러이며 납부일은 ${bill.due}입니다.`;
}

console.log(displayBill(bill));

위 함수에서는 매개변수로 객체를 받아 필요한 데이터를 추출해 출력한다. 객체 구조 분해 할당을 활용하면 더욱 간결하게 작성할 수도 있다.

function displayBill({ name, total, due }) {
  return `${name} 비용은 ${total} 달러이며 납부일은 ${due}입니다.`;
}

이 방법은 코드의 가독성을 높이고 데이터 처리 과정을 명확히 하는 데 도움을 준다.

 

 

결론

---

• 배열은 동일한 유형의 데이터를 모아 순차적으로 처리할 때 적합하다.
• 객체는 키-값 쌍으로 데이터를 구조화하여 관리하거나 전달할 때 유용하다.
• 함수에서 객체를 생성하고 전달하는 방식은 데이터 관리의 안전성과 가독성을 높인다.
• 구조 분해 할당은 객체의 데이터를 간결하고 명료하게 사용할 수 있게 한다.

키-값 구조의 객체는 색상 코드처럼 정적인 데이터를 다루는 경우뿐만 아니라, 웹 개발에서 폼 데이터 처리, API 응답 관리 등 다양한 상황에서 활용할 수 있다. 자바스크립트의 객체를 효과적으로 사용하면 더욱 직관적이고 깔끔한 코드를 작성할 수 있다.