배열 가지고 놀기 고수 되는 법! 타입스크립트 유용한 배열 함수들 🎮
개발하다 보면 배열(Array)은 정말 지겹도록(?) 만나게 되죠? 😂 그만큼 데이터를 다루는 데 기본적이면서도 중요한 자료구조인데요, 타입스크립트(자바스크립트)에는 이런 배열을 더 쉽고 효과적으로 다룰 수 있게 도와주는 유용한 내장 함수(메서드)들이 정말 많답니다!
오늘은 그중에서도 알아두면 코딩이 훨씬 편해지는 몇 가지 유용한 배열 함수들을 소개해 드릴게요! ✨
꾹꾹 채워넣기! Array.fill 메서드
fill 메서드는 이름 그대로 배열의 특정 구간을 우리가 원하는 값으로 꾹꾹 채워주는 역할을 해요. fill 메서드는 아래처럼 사용해요. 괄호 안에 필요한 정보들을 넣어주면 된답니다.
채울값(필수) 배열을 어떤 값으로 채울지 정해줘요.시작위치(선택) 어디서부터 채울지 정해요. 안 쓰면 맨 처음(인덱스 0)부터 시작해요.끝위치(선택) 어디까지 채울지 정해요. 중요한 건 이 위치 바로 앞까지 채워진다는 점! 안 쓰면 배열 끝까지 채워요.
예시 1) 숫자 배열 일부를 0으로 채우기
let numbers = [1, 2, 3, 4, 5];
// 인덱스 1부터 인덱스 3 앞(즉, 인덱스 2)까지 0으로 채워줘!
numbers.fill(0, 1, 3);
console.log(numbers); // 결과 [1, 0, 0, 4, 5] (2와 3이 0으로 바뀌었죠?)예시 2) 인자를 하나만 주면 어떻게 될까요?
let numbers = [1, 2, 3, 4, 5];
// 시작, 끝 위치 안 정해주면? 배열 전체를 9로 채워버려요!
numbers.fill(9);
console.log(numbers); // 결과 [9, 9, 9, 9, 9]원하는 부분만 싹둑! Array.slice 메서드
slice 메서드는 배열의 특정 부분을 싹둑 잘라서 새로운 배열로 만들어 돌려줘요. 케이크 자르듯이 원하는 조각만 가져오는 거죠! 🍰 중요한 건 원래 배열은 건드리지 않고, 새로운 배열을 만든다는 점이에요. slice 메서드는 아래와 같이 사용해요. 괄호 안에 자르고 싶은 구간 정보를 넣어주면 되죠.
시작위치(선택) 어디서부터 자를지 정해요. 안 쓰면 맨 처음(인덱스 0)부터 시작해요.끝위치(선택) 어디까지 자를지 정해요.fill처럼 이 위치 바로 앞까지만 잘라와요. 안 쓰면 배열 끝까지 잘라와요.
예시 1) 과일 배열의 일부만 가져오기
let fruits = ['apple', 'banana', 'cherry', 'date'];
// 인덱스 1부터 인덱스 3 앞(즉, 인덱스 2)까지 잘라줘!
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 결과 ['banana', 'cherry'] (새로운 배열이 만들어졌어요!)
console.log(fruits); // 결과 ['apple', 'banana', 'cherry', 'date'] (원래 배열은 그대로!)예시 2) 인자를 하나만 주면?
let fruits = ['apple', 'banana', 'cherry', 'date'];
// 인덱스 2부터 끝까지 잘라줘!
let slicedFruits = fruits.slice(2);
console.log(slicedFruits); // 결과 ['cherry', 'date']배열 아닌 척하는 애들을 진짜 배열로! Array.from 메서드
from 메서드는 이름처럼 ~로부터 배열을 만들어줘요. 특히 배열처럼 보이지만 진짜 배열은 아닌 애들(유사 배열 객체, 예를 들어 웹 페이지의 여러 요소를 가져오는 NodeList 같은 거요)이나, 배열 외에 순서대로 값을 꺼낼 수 있는 이터러블 객체(Set, Map, 문자열 등)로부터 진짜 배열을 만들어낼 때 아주 유용해요! from 메서드는 아래처럼 사용해요.
배열로만들대상(필수) 배열로 만들고 싶은 유사 배열 객체나 이터러블 객체를 넣어줘요.변환함수(선택) 배열로 만들면서 각 요소에 추가적인 작업을 하고 싶을 때 함수를 넣어주면 돼요. (map 메서드랑 비슷해요)this값(선택)변환함수안에서this로 사용할 값을 지정할 때 써요. (자주 쓰진 않아요)
예시) Set 객체를 배열로 만들기
let mySet = new Set(['apple', 'banana', 'cherry']); // Set은 중복을 허용하지 않죠!
// Set 객체를 진짜 배열로 변환!
let arrayFromSet = Array.from(mySet);
console.log(arrayFromSet); // 결과 ['apple', 'banana', 'cherry'] (이제 진짜 배열이에요!)모두 다 통과해야 해! array.every 메서드
every 메서드는 배열 안의 모든 요소가 우리가 제시한 특정 조건을 만족하는지 검사해서 true 또는 false를 알려줘요. 마치 "모든 학생이 18세 이상인가?" 하고 묻는 것과 같아요. 단 한 명이라도 조건을 만족하지 않으면 바로 false를 반환하고 검사를 멈춰요 (효율적이죠!). every 메서드는 아래와 같이 사용해요. 괄호 안에는 조건을 검사할 함수를 넣어주면 되고요.
조건함수(필수) 배열의 각 요소가 이 함수의 조건을 통과하는지 검사해요. 함수는true또는false를 반환해야 해요.
예시) 모든 사용자가 성인(18세 이상)인지 확인하기
const ages = [20, 25, 30, 18, 24];
// 모든 나이가 18 이상인지 검사하는 조건 함수
const isAllAdult = ages.every(age => age >= 18);
console.log(isAllAdult); // true (모든 나이가 18 이상이므로 true!)
const agesWithKid = [20, 15, 30];
const isAllAdult2 = agesWithKid.every(age => age >= 18);
console.log(isAllAdult2); // false (15살 때문에 false!)단 하나라도 통과하면 돼! array.some 메서드
some 메서드는 every와는 반대로, 배열 안의 요소 중에서 단 하나라도 특정 조건을 만족하는 게 있는지 검사해요. "할인 상품이 하나라도 있나?" 하고 묻는 것과 같죠. 조건을 만족하는 요소를 하나라도 찾으면 바로 true를 반환하고 검사를 멈춰요. some 메서드는 아래처럼 사용해요. 괄호 안에는 마찬가지로 조건을 검사하는 함수를 넣어주면 된답니다.
조건함수(필수) 배열의 각 요소가 이 함수의 조건을 통과하는지 검사해요. 함수는true또는false를 반환해야 해요.
예시) 할인 중인 상품이 하나라도 있는지 확인하기
// 상품 정보 타입 정의 (타입스크립트!)
interface Product {
name: string;
price: number;
isDiscounted: boolean;
}
const products: Product[] = [
{ name: 'T-Shirt', price: 29, isDiscounted: false },
{ name: 'Jeans', price: 75, isDiscounted: true }, // 여기 할인 상품 발견!
{ name: 'Jacket', price: 120, isDiscounted: false }
];
// 할인 중인 상품이 있는지 검사하는 조건 함수
const hasDiscountedProduct = products.some(product => product.isDiscounted);
console.log(hasDiscountedProduct); // true (청바지가 할인 중이므로 true!)
const noDiscountProducts: Product[] = [
{ name: 'T-Shirt', price: 29, isDiscounted: false },
{ name: 'Jacket', price: 120, isDiscounted: false }
];
const hasDiscountedProduct2 = noDiscountProducts.some(product => product.isDiscounted);
console.log(hasDiscountedProduct2); // false (할인 상품이 하나도 없으므로 false!)✨ 마무리하며
오늘 살펴본 Array.fill, Array.slice, Array.from, array.every, array.some 메서드들, 어떤가요? 배열을 다룰 때 정말 유용하게 써먹을 수 있겠죠? 😉
이런 메서드들을 잘 알아두면 복잡한 작업을 훨씬 간결하고 읽기 쉬운 코드로 작성할 수 있어요. 코딩 효율도 올라가고, 다른 사람이 내 코드를 이해하기도 쉬워지고요! 오늘 배운 것들 꼭 한번 직접 써보면서 익숙해져 보세요! 👍
