서론
"배열의 두 번째 값만 필요한데..."
개발을 하다 보면 이런 상황을 자주 마주친다. 특히 API 응답이나 데이터 처리 과정에서 여러 값이 담긴 배열 중 특정 값만 필요한 경우가 많다. 보통은 언더스코어(_)나 쉼표(,)를 사용해서 해결했는데, LinkedIn에서 흥미로운 패턴을 발견했다.
일반적인 방식
보통 배열의 구조분해 할당을 사용할 때는 이런 패턴을 많이 사용한다:
const arr = ["jack", 29, "frontend"];
const [name, age, job] = arr;
하지만 age만 필요한 상황이라면 어떻게 할까? 전통적으로는 두 가지 방법을 사용했다:
// 1. 언더스코어(_) 사용
const [_, age, __] = arr;
// 2. 쉼표 사용
const [, age] = arr;
새로운 접근 방식
최근에 발견한 재미있는 패턴이 있다. 바로 객체 스타일의 인덱스를 활용하는 방식이다:
const arr = ["jack", 29, "frontend"];
const { 1: age } = arr;
console.log(age); // 29
언뜻 보면 이상해 보일 수 있다. 배열인데 객체 구조분해 할당 문법을 사용하다니? 하지만 이는 자바스크립트의 흥미로운 특성 덕분에 가능하다.
왜 가능할까?
자바스크립트에서 배열은 사실 특별한 종류의 객체다. 배열의 인덱스는 객체의 키로 변환되어 저장되며, Array 객체는 length와 같은 추가적인 속성과 메서드를 가지고 있다.
예를 들어, 다음의 배열이 있을 때:
const arr = ["jack", 29, "frontend"];
내부적으로는 이런 형태로 저장된다:
{
'0': 'jack',
'1': 29,
'2': 'frontend',
length: 3
}
따라서 아래의 표현들은 모두 동일하게 동작한다:
// 배열 접근 방식
console.log(arr[1]); // 29
// 객체 접근 방식
console.log(arr["1"]); // 29
// 객체 구조분해 할당
const { 1: age } = arr; // 29
두 방식의 주요 차이점
두 방식은 결과적으로 같은 값을 추출하지만, 접근 방식에서 차이가 있다:
// 전통적인 방식 - 순서 기반 건너뛰기
const [, age] = arr;
// 객체 스타일 - 원하는 위치 직접 접근
const { 1: age } = arr;
1. 코드 스타일
- 전통적인 방식은 순서대로 건너뛰는 것이 시각적으로 표현된다
- 객체 스타일은 원하는 위치를 직접 지정하는 것이 명확하다
2. 유지보수성
- 전통적인 방식은 배열 구조가 변경되면 쉼표 개수를 조정해야 할 수 있다
- 객체 스타일은 인덱스를 직접 지정하므로 구조 변경에 영향을 덜 받는다
실제 활용 예제
1. API 응답 처리
// API 응답 예시
const userInfo = ["john", 25, "seoul", "developer", true];
// 도시 정보만 필요한 경우
const { 2: city } = userInfo;
console.log(city); // 'seoul'
2. 여러 값을 동시에 추출
const data = ["kim", 30, "seoul", "frontend", false];
// 이름과 직업만 필요한 경우
const { 0: name, 3: job } = data;
console.log(name, job); // 'kim' 'frontend'
주의사항 및 팁
1. 예외 처리
존재하지 않는 인덱스에 접근할 때는 undefined가 반환된다:
const arr = ["jack", 29];
const { 5: value = "default" } = arr;
console.log(value); // 'default'
2. 가독성 고려
변수 이름을 명확하게 지정하는 것이 중요하다:
// 좋지 않은 예
const { 1: x } = userInfo;
// 좋은 예
const { 1: userAge } = userInfo;
참고
피드백은 언제나 환영입니다.