4. 배열과 튜플

4.1 배열(Array)

4.1.1 배열이란?

4.1.2 배열 선언 방식

• 자바스크립트의 배열 선언 방식

// 배열 리터럴
let arr = [item1, item2, item, ...];


// Array 생성자 함수
let arr = new Array();

• 타입스크립트의 배열 선언 방식

// 배열 리터럴
let arr: 데이터타입[] = [item1, item2, item, ...];


// 제네릭 배열
let arr: Array<데이터타입> = [item1, item2, item3, ...];

• 예시1

// JS

let fruits = ['사과', '오렌지'];

fruits.push('복숭아');
fruits.push(5000);
fruits.push(true);

console.log(fruits); // ['사과', '오렌지', '복숭아', 5000, true];

• 예시2

// TS

let fruits: string[] = ['사과', '오렌지'];

fruits.push('복숭아');
fruits.push(5000); // 'number' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없다.ts(2345)
fruits.push(true); // 'boolean' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없다.ts(2345)

console.log(fruits);

4.1.3 배열에 타입 지정하기

• 단일 타입

// string 타입의 요소만 담을 수 있다.
let drinksName: string[] = ['콜라', '사이다', '환타'];


// number 타입의 요소만 담을 수 있다.
let drinksPrice: number[] = [1200, 900, 2500];


// boolean 타입의 요소만 담을 수 있다.
let drinksStatus: boolean[] = [true, false];

• 다중 타입

// 배열 리터럴
let coffeeC: (string | number)[] = ['카라멜마끼아또', 4500];

coffeeC.push('커피쿠폰');
coffeeC.push(true); // 'boolean' 형식의 인수는 'string | number' 형식의 매개 변수에 할당될 수 없다.


// 제네릭 배열
let coffeeD: Array<string | number> = ['카라멜마끼아또', 4500];

coffeeD.push('커피쿠폰');
coffeeD.push(true); // 'boolean' 형식의 인수는 'string | number' 형식의 매개 변수에 할당될 수 없다.

• any 타입

// 배열 리터럴
let coffeeA: any = ['카라멜마끼아또', 4500, true, function(){}, null];

console.log(coffeeA); // ['카라멜마끼아또', 4500, true, function(){}, null]


// 제네릭 배열
let coffeeB: Array<any> = ['아메리카노', 4000, false, function(){}];

console.log(coffeeB); // ['아메리카노', 4000, false, function(){}]

// string 타입 → 유니온타입 X
let coffee: string | number[] = 'americano';


// number[] 타입 → 유니온타입 X
let coffee: string | number[] = [5000, 6000];


// 유니온타입 O
let coffee: (string | number)[] = [’americano’, 5000];

4.1.4 배열의 유용한 메서드

• filter

// 형태
arr.filter(콜백함수);
arr.filter((요소: 타입, 인덱스?: number): boolean => {});

let price: number[] = [10000, 12000, 15000, 20000];


// 콜백함수
function priceFilter(item: number, index: number): boolean {
  return item <= 15000;
}


// 함수 표현식
let products1: number[] = price.filter(priceFilter);


// 화살표 함수
let products2: number[] = price.filter(item => item <= 15000);

console.log(products); // [10000, 12000, 15000]

• map

// 형태
arr.map(콜백함수);
arr.map((요소: 타입, 인덱스?: number) => {});

let num: number[] = [2, 3, 4, 5, 6];


// 콜백함수
function multifleResult(item: number): number {
	return item * item;
}


// 함수 표현식
let result1: number[] = num.map(multifleResult);


// 화살표 함수
let result2: number[] = num.map(item => item * item);

console.log(result); // [4, 9, 16, 25, 36]

• reduce

// 형태
arr.reduce(콜백함수, 초기요소);
arr.reduce((누적값: 타입, 현재요소: 타입, 인덱스: 타입, 현재배열: 타입): 타입 => {}, 초기요소);

let arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// 콜백함수
function accSum(accumulator: number, currentValue: number): number {
  return (accumulator + currentValue);
}

// 함수 표현식
let sum1: number = arr.reduce(accSum, 0);


// 화살표 함수
let sum2: number = arr.reduce((accumulator: number, currentValue: number) => accumulator + currentValue, 0);

console.log(sum); // 55

4.2 튜플(Tuple)

4.2.1 내겐 너무 낯선 튜플

// 튜플 타입 선언
let drink: [string, string];

// 튜플 초기화
drink = ['cola', '(주)콜라공장'];

// 튜플 타입 선언과 초기화를 동시에 하는 법
let drink: [string, string] = ['cola', '(주)콜라공장'];

let drink: [string, number] = ['cola', 2500];

• 인덱스 접근

let drink: [string, number] = ['cola', 2500];

// 인덱스로 접근해 값을 변경
drink[0] = 'soda';
drink[1] = 3000;

console.log(drink); // ['soda', 3000] 출력

• 배열 메서드 사용

let drink: [string, number] = ['cola', 2500];

console.log(drink.includes('cola')); // true 출력
console.log(drink.join("&")); // cola&2500 출력
console.log(drink.map((item) => item + "_map")); // ["cola_map", "2500_map"] 출력

• 스프레드 문법 사용

let drink: [string, ...number[]] = ['cola', 2500, 2000, 1000];

4.2.2 ReadOnly

let drink: [string, number] = ['cola', 2500];

drink.push('(주)콜라공장');
drink.push('22-10-13');

console.log(drink); 

# 출력결과
[ 'cola', 2500, '(주)콜라공장', '22-10-13' ]

let drink: readonly[string, number] = ['cola', 2500];

drink.push('(주)콜라공장'); // error
drink.push('22-10-13'); // error

console.log(drink);

let drink: ReadonlyArray<string> = ['cola', '(주)콜라공장'];

drink.push('22-10-13'); // error - Property 'push' does not exist on type 'readonly string[]'.

type Drink = {
  name: string;
  company: string;
}

type DrinkReadonly = Readonly<Drink>; 
let drink: DrinkReadonly = {name: 'cola', company: '(주)콜라공장'};

drink.name = 'cool_cola'; // error - Cannot assign to 'name' because it is a read-only property.

4.2.3 튜플을 사용하는 이유

let drink1 = [1, 'cola', 2500, '(주)콜라공장');
let drink2 = [2, 'soda', 3000, '(주)사이다공장');
let drink3 = [3, 'lemonade', 2800, '(주)레모네이드공장');

// 튜플의 타입을 별칭으로 선언
type drinkInfo = [number, string, number, string];

let drink1 : drinkInfo = [1, 'cola', 2500, '(주)콜라공장'];
let drink2 : drinkInfo = ['soda', 2, '(주)사이다공장', 3000]; // error