[ 자바스크립트 코딩의 기술 ] 3장 Tip 10

MinJee Lee·2021년 5월 16일
0

JavaScript

목록 보기
1/6
post-thumbnail

객체를 이용해 정적인 키- 값을 탐색하라

배열은 매우 유연하기 떄문에 어떤 형태의 정보도 담을 수 있지만 필요 이상으로 복잡하게 만들 수 있다.

때로는 정보를 실제로 다루는 방법은 간단한데 배열이 복잡하게 만들기도 한다.

예를 들어

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

무슨 색인지 이 배열만 봐서는 알 수가 없다.

또한 배열의 데이터가 모두 색상이지만 서로 바꿀 수 있는 색상은 아니라는 점이다.

사용자 정보를 담은 배열처럼 구조적으로 유사하고 다른 데이터와 교체해도 괜찮은 경우와는 다르게,

이 배열안에 색상들은 각각 서로 다른 목적으로 , 즉 사용자에게 값을 표시하기 위해 사용한다.

이런 경우 키-값 컬렉션이 더 적절하다.

객체는 키-값 컬렉션으로 사용되기도 하지만, 생성자, 메서드,속성을 가진 클래스에 좀 더 가깝게 쓸 수 있다.

원칙적으로는 객체는 변화가 없고 구조화된 키-값 데이터를 다루는 경우 유용하다.

이처럼 객체는 단순하기 때문에 정적인 정보를 다룰때 훌륭하다.

하지만 계속해서 갱신, 반복, 대체, 정렬해야하는 정보에는 적절하지 않다.

이런경우 map을 사용하는 것이 낫다.

단, 기존의 객체를 조작하는 것이 아니라 각각 함수에서 새로운 객체를 생성하면 조작없이 사용가능하다.

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

다음과 같이 중괄호에 키-값을 작성하는 것을 object literal(객체 리터럴)이라고 한다.

. 을 통해 직접 참조하거나 배열처럼 접근이 가능하다.

예를 들면 colors.red 아니면 배열처럼 colors[‘red’]를 사용할 수 있다.**

export const config = {
  endpoint: 'http://pragprog.com',
  key: 'secretkey',
};

설정파일을 객체로 작성하면 런타임 전에 설정되고 단순한 정적 정보를 담은 키-값이 될 수 있다.

정적인 파일도 함수 내에서 객체를 생성하고 다른 함수에 넘겨 줄 수 있다.

정보를 수집하고 전달해 다른 함수에서 사용한다.

왜냐하면 매번 다른 방식으로 설정하고 사용하는 것이다.

각각 함수에서 새로운 객체를 생성하고 또한 코드를 작성할때 key를 알고 있다.

그래서 변수에서 key를 설정 하지 않고도 객체를 전달받은 함수에서 구조를 미리 알고 있다.

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

const bill = getBill({ name: '객실 청소', price: 30 });

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

함수 displayBill()은 각 항목을 매개 변수로 받는 대신, 객체를 전달해 필요한 값을 꺼내 쓸 수 있도록 했다.

Object destructuring (객체 해체 할당) 은 빠른 탐색이 필요할 경우 객체를 선택해야 할 이유 중 하나이다.

프로그래밍을 이용해서 객체에 더 많은 정보를 추가해야하는 맵처럼 다른종류 컬렉션이 더 적합하다.
🙌

0개의 댓글