튜플 구조 분해

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨 — 73개 중 17번째.

인덱스로 튜플 요소에 접근하는 방식이 완벽하게 작동하지만, 튜플에서 값을 추출하는 훨씬 더 우아한 방법이 있습니다: 구조 분해 할당(destructuring). 이 JavaScript 기능은 TypeScript의 타입이 지정된 튜플과 원활하게 작동하며, 한 줄의 코드로 튜플 값을 별개의 변수로 풀 수 있게 해줍니다.

배열 구조 분해 할당은 할당 연산자의 왼쪽에 대괄호를 사용하여 튜플의 각 위치에 대응하는 새로운 변수를 생성합니다:

let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;

console.log(id);   // 42 (TypeScript는 이것이 숫자임을 알고 있습니다)
console.log(name); // "Alice" (TypeScript는 이것이 문자열임을 알고 있습니다)

챌린지

쉬움

숫자(직원 ID)와 문자열(직원 이름)을 포함하는 employee라는 이름의 튜플을 생성하세요. ID는 1001, 이름은 "Sarah Johnson"으로 초기화합니다.

구조 분해 할당(destructuring)을 사용하여 employee 튜플의 값을 empId와 empName이라는 두 개의 개별 변수로 추출하세요.

위도와 경도 좌표를 나타내는 두 개의 숫자를 포함하는 coordinates라는 또 다른 튜플을 생성하세요. 40.7128과 -74.0060 값으로 초기화합니다.

구조 분해 할당을 사용하여 coordinates 튜플의 값을 latitude와 longitude라는 두 개의 개별 변수로 추출하세요.

구조 분해된 변수들을 다음 순서대로 각각 별도의 줄에 출력하세요:

직원 ID 출력
직원 이름 출력
위도 출력
경도 출력

직접 해보기

// TODO: 여기에 코드를 작성하세요
// ID 1001과 이름 "Sarah Johnson"을 가진 employee 튜플을 생성하세요
// 구조 분해 할당을 사용하여 empId와 empName을 추출하세요
// 값 40.7128과 -74.0060을 가진 coordinates 튜플을 생성하세요 (변수명으로 'location' 사용은 피하세요)
// 구조 분해 할당을 사용하여 latitude와 longitude를 추출하세요
// 지정된 순서대로 네 개의 변수를 모두 출력하세요

// 결과 출력 (필요에 따라 주석을 해제하고 수정하세요)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);