수달씨의 개발공간

[TypeScript] 배열 조작 - unshift(), push(), pop() 활용 및 문자열 최적화

📌 배열 조작이 중요한 이유

JavaScript와 TypeScript에서 배열(Array)은 데이터를 저장하고 조작하는 가장 기본적인 자료구조입니다. 배열을 효과적으로 다루는 방법을 익히면 문자열 최적화, 데이터 처리 속도 개선 등 다양한 이점을 얻을 수 있습니다.

이 글에서는 unshift(), push(), pop()을 활용한 배열 조작과 문자열 최적화 방법을 정리합니다. 🚀

✅ 1️⃣ push() - 배열의 끝에 요소 추가

배열의 마지막에 새로운 요소를 추가하는 가장 일반적인 방법입니다.

const words: string[] = [];
words.push("Hello");
words.push("World");
console.log(words); // ["Hello", "World"]

✅ 새로운 요소를 배열의 끝에 추가할 때 유용

📌 여러 개의 요소 추가 가능

words.push("TypeScript", "is", "great");
console.log(words); // ["Hello", "World", "TypeScript", "is", "great"]

✅ 한 번에 여러 개의 요소를 추가 가능

✅ 2️⃣ pop() - 배열의 마지막 요소 제거

배열의 마지막 요소를 제거하고, 제거된 값을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.pop();
console.log(numbers); // [1, 2, 3, 4]
console.log(lastNumber); // 5

✅ 마지막 요소를 제거하면서 해당 요소를 반환

📌 빈 배열에서 pop() 실행 시

const emptyArray: number[] = [];
console.log(emptyArray.pop()); // undefined

✅ 배열이 비어있으면 undefined 반환

✅ 3️⃣ unshift() - 배열의 앞쪽에 요소 추가

배열의 맨 앞에 새로운 요소를 삽입할 때 사용됩니다.

const queue: string[] = ["Second", "Third"];
queue.unshift("First");
console.log(queue); // ["First", "Second", "Third"]

✅ 배열 앞부분에 요소를 추가할 때 유용

📌 여러 개의 요소 추가 가능

queue.unshift("Zero", "Start");
console.log(queue); // ["Zero", "Start", "First", "Second", "Third"]

✅ 여러 개의 요소를 한 번에 추가 가능

✅ 4️⃣ 배열을 활용한 문자열 최적화

문자열 조작 과정에서 배열을 활용하면 성능이 크게 향상됩니다.

🚀 기존 방식 (문자열 직접 수정 - 비효율적)

let result = "";
const words = ["quick", "brown", "fox"];
for (const word of words) {
  result = word + " " + result;
}
console.log(result.trim()); // "fox brown quick"

✅ 매 반복마다 새로운 문자열을 생성하므로 O(N^2)의 성능 문제가 발생할 수 있음.

🚀 배열을 활용한 최적화된 방식

const wordsArray: string[] = [];
const sentence = "The quick brown fox";
sentence.split(" ").forEach(word => wordsArray.unshift(word));
console.log(wordsArray.join(" ")); // "fox brown quick The"

✅ 배열을 활용하면 O(N)의 성능을 유지하면서 문자열 조작 가능!

📌 최종 정리

메서드 역할 예제

💡 이제 배열을 다룰 때 더 효과적으로 조작할 수 있어요! 🚀

#TypeScript #JavaScript #배열조작 #push #unshift