TypeScript - 배열: 정리된 데이터의 관문

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 TypeScript의 아름다운 배열 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드리게 되어 기쁩니다. 배열은 프로그래밍의 스위스 아미리 knife와도 같은东西 – 매우 다재다능하고 유용합니다. 그麼, 양말을 올리고 시작해 보겠습니다!

TypeScript - Arrays

배열이란?

이제 구체적인 내용으로 들어가기 전에 배열이 무엇인지 이해해 보겠습니다. 여러분이 컬러풀한 구슬을 많이 가지고 있다고 상상해 보세요. 이 구슬들을 방에到处에 散らかすのではなく, 정리된 줄로 배치하기로 합니다. 이것이 프로그래밍에서 배열이 하는 일입니다 – 비슷한 아이템들을 구조화된 방식으로 정리합니다.

배열의 특징

TypeScript의 배열은 몇 가지 멋진 기능을 가지고 있어 매우 유용합니다:

정렬된 컬렉션: 우리의 구슬 줄처럼, 배열은 특정 순서를 유지합니다.
인덱스 기반: 각 요소는 0에서 시작하여 순차적으로 인덱스 번호가 할당됩니다.
동질성: 일반적으로 배열은 같은 유형의 요소들로 구성됩니다.
동적 크기: TypeScript에서는 배열이 필요에 따라 확장되거나 축소될 수 있습니다.

배열 선언 및 초기화

우선 우리는 첫 번째 배열을 만들어 보겠습니다. TypeScript에서는 다음과 같은 몇 가지 방법으로 배열을 만들 수 있습니다:

// 방법 1: 괄호를 사용하여
let fruits: string[] = ['apple', 'banana', 'orange'];

// 방법 2: Array 생성자를 사용하여
let numbers: number[] = new Array(1, 2, 3, 4, 5);

// 방법 3: 제네릭 배열 타입을 사용하여
let colors: Array<string> = ['red', 'green', 'blue'];

첫 번째 예제에서 우리는 과일 배열을 만들었습니다. string[]는 TypeScript에게 이 배열이 문자열만 포함할 것이라고 알립니다. 이는 친구들에게 "이 상자는 구슬만 넣을 수 있어, 장난감 자동차는 안 돼!"라고 말하는 것과 같습니다.

두 번째 예제는 Array 생성자를 사용하여 숫자 배열을 만드는 방법을 보여줍니다. 이는 구슬 줄을 만드는 특별한 기계를 사용하는 것과도 같습니다.

세 번째 방법은 우리가 "제네릭" 타입을 사용하는 방법을 보여줍니다. 이 용어에 대해 지금은太多担心하지 마세요, 단지 "이 배열은 문자열을 위한 것"이라고 말하는 또 다른 방법이라고 생각하면 됩니다.

배열 요소에 접근하기

이제 우리는 배열을 가지고 있으니, 내부의 아이템에 어떻게 접근할까요? 매우 간단합니다! 요소의 인덱스를 사용합니다:

let fruits: string[] = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // 출력: 'apple'
console.log(fruits[1]); // 출력: 'banana'
console.log(fruits[2]); // 출력: 'orange'

기억해 두세요, 배열의 인덱스는 0에서 시작합니다. 이는 1에서 시작하는 이상한 계산 시스템과 같습니다. 프로그래머들은 이상한 족이죠!

배열 객체

TypeScript에서는 배열이 실제로 객체입니다. 이는 그들에게 몇 가지 내장된 프로퍼티와 메서드를 제공합니다. 가장 유용한 프로퍼티 중 하나는 length입니다:

let fruits: string[] = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 출력: 3

이는 우리에게 배열에 얼마나 많은 아이템이 있는지 알려줍니다. 컬렉션의 크기를 알 필요가 있을 때 매우 유용합니다!

배열 메서드

배열은 다양한 메서드를 통해 조작할 수 있는 도구 상자와도 같습니다. 가장 흔히 사용되는 몇 가지 메서드를 살펴보겠습니다:

메서드	설명	예시
push()	끝에 하나 이상의 요소를 추가합니다	`fruits.push('grape')`
pop()	마지막 요소를 제거합니다	`let lastFruit = fruits.pop()`
unshift()	시작에 하나 이상의 요소를 추가합니다	`fruits.unshift('kiwi')`
shift()	첫 번째 요소를 제거합니다	`let firstFruit = fruits.shift()`
indexOf()	특정 요소의 인덱스를 반환합니다	`let index = fruits.indexOf('banana')`
slice()	배열의 일부를 복사한 얕은 복사본을 반환합니다	`let someFruits = fruits.slice(1, 3)`
splice()	배열의 내용을 변경합니다	`fruits.splice(1, 1, 'mango')`

이제 이 메서드들을 실제로 사용해 보겠습니다:

let fruits: string[] = ['apple', 'banana', 'orange'];

fruits.push('grape');
console.log(fruits); // 출력: ['apple', 'banana', 'orange', 'grape']

let lastFruit = fruits.pop();
console.log(lastFruit); // 출력: 'grape'
console.log(fruits); // 출력: ['apple', 'banana', 'orange']

fruits.unshift('kiwi');
console.log(fruits); // 출력: ['kiwi', 'apple', 'banana', 'orange']

let firstFruit = fruits.shift();
console.log(firstFruit); // 출력: 'kiwi'
console.log(fruits); // 출력: ['apple', 'banana', 'orange']

배열 구조 분해

TypeScript는 배열 구조 분해라는 멋진 기능을 지원합니다. 이는 like suitcases, but for arrays:

let fruits: string[] = ['apple', 'banana', 'orange'];
let [first, second, third] = fruits;

console.log(first);  // 출력: 'apple'
console.log(second); // 출력: 'banana'
console.log(third);  // 출력: 'orange'

이는 배열 요소를 변수에 한 번에 할당하는 쾌적한 방법입니다!

for...of 루프를 사용한 배열 탐색

배열의 각 아이템을 돌아가며 싶을 때, for...of 루프를 사용할 수 있습니다. 이는 like taking each marble out of the box one by one:

let fruits: string[] = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
console.log(fruit);
}
// 출력:
// apple
// banana
// orange

이 루프는 우리의 배열에 있는 각 과일을 출력합니다. 매우 간단하고 깨끗합니다!

TypeScript의 배열

TypeScript는 배열에 몇 가지 추가적인 superpowers를 제공합니다. 예를 들어, 커스텀 타입의 배열을 만들 수 있습니다:

// 커스텀 타입 정의
type Person = {
name: string;
age: number;
};

// Person 객체 배열 만들기
let people: Person[] = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 }
];

console.log(people[1].name); // 출력: "Bob"

여기서 우리는 Person 타입의 배열을 만들었습니다. TypeScript는 이 배열의 각 객체가 name과 age를 가지도록 보장합니다.

그리고 여러분! 우리는 TypeScript 배열의 세계를 여행했습니다. 그들을 만들고 조작하고, 심지어 TypeScript 특정 기능까지! 기억하시기 바랍니다, 배열은 프로그래밍에서 여러분의 친구입니다. 그들은 데이터를 정리하고 코드를 깨끗하고 효율적으로 만들어줍니다.

마무리하며, 여러분이 배열을 like a well-organized toolbox 생각해 보세요. 각 도구(또는 요소)는 자리를 가지고 있으며, 필요할 때 정확히 어디에서 찾을 수 있습니다. 배열을 계속 연습하면, 곧 데이터를 like a pro처럼 다루게 될 것입니다!

행복한 코딩 되세요, 여러분의 배열이 항상 완벽하게 정렬되길 바랍니다!

Credits: Image by storyset