[TS] 배열과 튜플

📣  배열 이해하기

✔️ 배열은 Array 클래스의 인스턴스

✔️ 배열에 담긴 각각의 값을 아이템 또는 원소 라고 부른다.

✔️ 배열은 Array 클래스의 인스턴스이며, 인스턴스는 객체이므로 배열은 '객체' 이다.

let array = new Array(2)

 

📍  [] 단축 구문

let numbers = [1, 2, 3]
let strings = ['hello', 'world']

➰ [] 라는 단축 구문을 사용해서 배열을 생성할 수 있다.

 

📍  배열의 타입

➰ 타입스크립트에서 배열의 타입은 '아이템 타입[]' 이다.

let numArray: number[] = [1, 2, 3]
let strArray: string[] = ['hello', 'world']

type IPerson = {name: string, age?: number}
let personArray: IPerson[] = [{name: 'Jack'}, {name: 'Jane', age: 32}]

 

📍  문자열과 배열 간 변환

➰ 문자열 -> 배열 : split 메서드

const split = (str: string, delim: string=''): string[] => str.aplit(delim)

split('hello')	// ['h', 'e', 'l', 'l', 'o']
split('h_e_l_l_o', '_') // ['h', 'e', 'l', 'l', 'o']

 

➰ 배열 -> 문자열 : join 메서드

const join = (strArray: string[], delim: string=''): string => strArray.join(delim)

join(['h', 'e', 'l', 'l', 'o']) // hello
join(['h', 'e', 'l', 'l', 'o'], '_') // h_e_l_l_o

 

📍  인덱스 연산자

➰ 인덱스 연산자는 배열의 특정 위치에 있는 아이템을 얻는다.

const numbers: number[] = [1, 2, 3, 4, 5]
for(let index = 0; index < numbers.length; index++){
    const item: number = numbers[index]
    console.log(number) // 1 2 3 4 5
}

 

📍  배열의 비구조화 할당

➰ 객체와 달리 [] 기호를 사용한다.

let array: number[] = [1, 2, 3, 4, 5]
let [first, second, third, ...rest] = array
// 1 2 3 [4, 5]

 

📍  for...in 문 & for...of 문

for...in	for...of
배열의 인덱스 값을 순회한다. 객체가 가진 속성을 순회한다.	배열의 아이템 값을 순회한다.

let names = ['Jack', 'Jane', 'Steve']

for(let index in names) {
    console.log(index)	// 0, 1, 2
}

for(let item of names) {
    console.log(item) // 'Jack' 'Jane' 'Steve'
}

 

📍  제네릭 방식 타입

➰ 타입을 T와 같은 일종의 변수(타입 변수)로 취급하는 것을 제네릭 타입 이라고 한다.

➰ T가 타입 변수라는 것을 알려주기 위해 <> 기호를 사용한다.

const arrayLength = <T>(array: T[]): number => array.length
const isEmpty = <T>(array: T[]): boolean => arrayLength<T>(array) === 0

 

📍  제네릭 함수의 타입 추론

const identity = <T>(n: T): T => n

identity<boolean>(true)
// 함수 이름<타입 변수>(매개변수)

identity(true)

➰ 원래는 2번째 줄 형태로 명시해야 하지만, 타입 변수 부분을 생략할 수 있다.

➰ 타입스크립트는 타입 변수가 생략된 제네릭 함수를 만나면, 타입 추론을 통해 생략된 타입을 찾아낸다.

 

📍  제네릭 함수의 함수 시그니처

const error = (cb: (number, number?) => number): void) => {}
// (number, number?) 부분에 오류 발생

➰ 타입스크립트는 어떤 경우 함수 시그니처의 매개변수 부분에 변수 이름을 기입하라고 요구한다.

 

 

const f = <T>(cb: (arg: T, i?: number) => number): void => {}

➰ 타입스크립트가 해석하지 못하는 부분에 변수를 삽입하고 이 변수에 타입을 명시해줘야 한다.

 

📍  전개 연산자(spread operator)

➰ 점 세개가 나란히 있는 ...을 전개 연산자 라고 한다.

let arr1: number[] = [1]
let arr2: number[] = [2, 3]
let mergedArr: number[] = [...arr1, ...arr2, 4]
mergedArr // [1, 2, 3, 4]

 

📍  range 함수 구현

➰ range 함수는 from 부터 to 까지 수로 구성된 배열을 생성한다.

const range = (from: number, to: number): number[] =>
    from < to ? [from, ...range(from + 1, to)] : []
    
let numbers: number[] = range(1, 9+1)
numbers // [1, 2, 3, 4, 5, 6, 7, 8, 9]

---

📣  선언형 프로그래밍과 배열

함수형, 선언형, 명령형 프로그래밍 관계도

 

📍  명령형 프로그래밍 & 선언형 프로그래밍

명령형 프로그래밍	선언형 프로그래밍
여러 개의 데이터를 대상으로 할 때 for문을 사용	for문을 사용하지 않고 모든 데이터를 배열에 담아 문제가 해결될 때까지 또 다른 형태의 배열로 가공하는 방식

// 1부터 100까지 더하기

// 명령형
for(let val = 1 ; val <= 100)
   sum += val++
   
   
// 선언형 
// 일단 데이터만 배열로 생성
let numbers: number[] = range(1, 100+1)

➰ 선언형은 데이터 생성과 가공 과정을 분리하며, 이미 범용으로 구현된(혹은 언어가 제공하는) 함수를 재사용 하면서 문제를 해결한다.

---

📣  배열의 map, reduce, filter 메서드

📍  filter 메서드

➰ 조건에 맞는 아이템만 추려내는 함수

➰ 두 번째 매개변수에 index라는 선택 속성을 제공한다.

filter(callback: (value: T, index?: number): boolean): T[]

const array: number[] = range(1, 10+1)
const half = array.length / 2

let belowHalf: number[] = array.filter((v,index) => index < half)
let overHalf: number[] = array.filter((v, index) => index >= half)

 

📍  map 메서드

➰ 배열 데이터를 가공하는 함수

➰ filter 메서드와 달리 map 메서드는 입력 타입과 다른 타입의 배열을 만들 수 있다.

map(callback: (value: T, index?: number): Q): Q[]

let names: string[] = range(1, 5+1).map((val, index) => `[${index}]: ${val}`)
// number[] 타입 배열을 string[] 타입 배열로 가공

 

📍  reduce 메서드

➰ T[] 타입 배열을 가공해서 T 타입 결과를 만들어준다.

reduce(callback: (result: T, value: T), initialValue: T): T

let reduceSum: number = range(1, 100+1)
    .reduce((result: number, value: number) => result + value, 0)
// 1부터 100까지 더하는 기능

---

📣  순수 함수와 배열

✔️ 함수형 프로그래밍에서 함수는 '순수 함수' 라는 조건을 만족해야 한다.

 

📍  순수 함수란?

➰ 부수 효과가 없는 함수 <-> 불순 함수

➰ 부수 효과 : 함수가 가진 고유한 목적 이외에 다른 효과가 나타나는 것

➰ 순수 함수의 조건

﹒ 함수 몸통에 입출력 관련 코드가 없어야 한다.

﹒ 함수 몸통에서 매개변숫값을 변경시키지 않는다(즉, 매개변수는 const나 readonly 형태로만 사용한다)

﹒ 함수는 몸통에서 만들어진 결과를 즉시 반환한다.

﹒ 함수 내부에 전역 변수나 정적 변수를 사용하지 않는다.

﹒ 함수가 예외를 발생시키지 않는다.

﹒ 함수가 콜백 함수로 구현되었거나 함수 몸통에 콜백 함수를 사용하는 코드가 없다.

﹒ 함수 몸통에 Promise와 같은 비동기 방식으로 동작하는 코드가 없다.

// 순수 함수
function pure(a: number, b: number): number {return a + b}

// 불순 함수
// 매개변수가 readonly 형태로 동작하지 않기 때문에(매개변숫값이 변경되었기 때문)
function impure(array: number[]): void {
    array.push(1)
    array.splice(0, 1)
}

// g라는 외부 변수를 사용하므로 
let g = 10
function impure2(x: number) {return x + g}

 

📍  타입 수정자 readonly

➰ 타입스크립트는 readonly 타입으로 선언된 매개변숫값을 변경하는 시도가 있으면 문제가 있는 코드라고 알려준다.

➰ readonly가 붙은 변수는 변경할 수 없다는 의미의 불변 변수이다.

➕ const가 있는데 또 readonly가 필요한가?

➰ 타입스크립트에서 인터페이스, 클래스, 함수의 매개변수 등은 let이나 const 키워드 없이 선언한다.

➰ 따라서 const와 같은 효과를 주려면 readonly가 필요하다.

 

📍  깊은 복사와 얕은 복사

➰ 복사 : 어떤 변숫값을 다른 변숫값으로 설정하는 것

➰ 깊은 복사 : 대상 변숫값이 바뀔 때 원본 변숫값은 그대로인 형태로 동작한다.

➰ 얕은 복사 : 대상 변숫값이 바뀔 때 원본 변숫값도 변경된다.

➰ number와 boolean 타입은 깊은 복사 형태로, 배열과 객체는 얕은 복사 형태로 동작한다.

➰ 순수 함수를 구현할 때는 매개변수가 불변성을 유지해야 하므로, 매개변수를 가공하려 할 때 깊은 복사를 실행해야 한다.

// 깊은 복사
let orginal = 1
let copied = original
copied += 2	// 원본 값인 original은 변경되지 않는다.

// 얕은 복사
const originalArray = [5, 3, 9, 7]
const shallowCopiedArray = originalArray
shallowCopiedArray[0] = 0 // 원본 값인 originalArray의 0번째 인덱스 값도 변경된다.

 

📍  전개 연산자와 깊은 복사

➰ 전개 연산자를 사용하면 배열도 깊은 복사를 할 수 있다.

const oArray = [1, 2, 3, 4]
const deepCopiedArray = [...oArray]
deepCopiedArray[0] = 0	// 깊은 복사가 됬기 때문에 원본 값인 oArray의 0번째 인덱스는 변경되지 않는다.

 

📍  배열의 sort 메서드를 순수 함수로 구현하기

➰ sort 메서드는 원본 배열의 내용을 변경하므로 순수 함수가 아니다.

➰ readonly 타입과 전개 연산자를 사용해서 순수 함수로 구현할 수 있다.

const pureSort = <T>(array: readonly T[]): T[] => {
    // array는 readonly로 변경될 수 없다.
    let deepCopied = [...array]
    // 전개 연산자를 사용해서 깊은 복사 기능을 사용한다.
    return deepCopied.sort()
}

 

📍  배열의 filter 메서드와 순수한 삭제

➰ 배열에서 특정 아이템을 삭제할 때는 splice 메서드를 사용하는데, splice 메서드는 원본 배열의 내용을 변경하므로 순수 함수에서는 사용할 수 없다.

➰ 그래서 splice가 아닌, 특정 아이템을 삭제하는 데 filter 메서드를 사용할 수 있다.

➰ filter와 map 메서드는 깊은 복사 형태로 동작한다.

const pureDelete = <T>(array: readonly T[], cb: (val: T, index?: number) => boolean): T[] 
    => array.filter((val, index) => cb(val, index) == false)
    // cb는 콜백함수, filter 조건을 거르는 함수

const mixedArray: object[] = [
    [], {name: 'Jack'}, {name: 'Jane', age: 32}, ['description']
]

const objectsOnly: object[] = pureDelete(mixedArray, (val) => Array.isArray(val))
objectsOnly // [ {name: 'Jack'}, {name: 'Jane', age: 32} ]

 

📍  가변 인수 함수와 순수 함수

➰ 가변 인수 : 함수를 호출할 때 전달하는 인수의 개수를 제한하지 않는 것

const mergeArray = (...arrays) -> {}

➰ ...은 잔여나 전개 연산자가 아니라 가변 인수를 표현하는 구문이다.

 

const mergeArray = <T>(...array: readonly T[][]): T[] => {}

➰ mergeArray 함수를 호출할 때 전달하는 값은 모두 배열이므로, 매개변수 arrays의 타입은 배열의 배열이다.

➰ 출력은 T[] 형태의 배열이다.

➰ 순수 함수는 매개변수의 내용을 변경하면 안되니까 매개변수 타입 앞에 readonly 키워드를 입력한다.

 

const mergeArray = <T>(...arrays: readonly T[][]): T[] => {
    let result: T[] = []
    for(let index=0; index<arrays.length; index++) {
        const array: T[] = arrays[index]
        
        result = [...result, ...array]
    }
    return result
}

---

📣  튜플 이해하기

➰ 타입스크립트는 튜플의 타입 표기법을 배열과 다르게 선언할 수 있다.

// 배열
const array: number[] = [1, 2, 3, 4]

// 튜플
const tuple: [boolean, string] = [true, 'the result is ok']

 

📍  튜플에 타입 별칭 사용하기

➰ 튜플을 사용할 때는 타입 별칭을 사용해 튜플이 어떤 용도로 사용되는지 좀 더 분명하게 알려주는 것이 좋다.

type ResultType = [boolean, string]

const doSomething = (): ResultType => {
    try {
        throw new Error('Some error occurs...')
    } catch(e) {
        return [false, e.message]
    }
}

➰ 예외가 발생했을 때 구체적인 내용을 튜플로 반환한다.

 

📍  튜플에 적용하는 비구조화 할당

const [result, errorMessage] = doSomething()
result // false
errorMessage // 'Some error occurs...'