튜플 구조 분해

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"으로 초기화합니다.

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

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

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

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

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

치트 시트

구조 분해 할당을 사용하면 대괄호를 사용하여 한 줄에서 튜플의 값을 각각의 변수로 추출할 수 있습니다:

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

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

TypeScript는 튜플의 타입 정의를 기반으로 구조 분해된 각 변수의 타입 정보를 유지합니다.

직접 해보기

// 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);

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.