JavaScript Array method

자바스크립트 배열에서 자주 사용되는 메서드 활용법에 대해서 알아보겠습니다.

---

Array Method

---

 

자바스크립트의 배열(Array)은 데이터를 다룰 때 가장 많이 사용하는 강력한 도구입니다.

수많은 메서드가 있지만, 실무에서 가장 자주 쓰이는 핵심 메서드 8개를 성격별로 나누어 알기 쉽게 정리해 드릴게요.

---

1. 배열에 요소를 추가/제거하는 메서드

가장 기본적으로 배열의 앞이나 뒤에 값을 넣고 빼는 메서드들입니다.

기존 배열을 직접 수정(변형)한다는 특징이 있습니다.

push() 와 pop() (뒤에서 넣고 빼기)

• push(): 배열의 맨 뒤에 새로운 요소를 추가합니다.
• pop(): 배열의 맨 뒤 요소를 제거하고, 그 제거된 요소를 반환합니다.

JavaScript

 

const fruits = ['🍎', '🍌'];

// push: 뒤에 추가
fruits.push('🥝');
console.log(fruits); // ['🍎', '🍌', '🥝']

// pop: 뒤에서 제거
const removed = fruits.pop();
console.log(removed); // '🥝'
console.log(fruits); // ['🍎', '🍌']

unshift() 와 shift() (앞에서 넣고 빼기)

• unshift(): 배열의 맨 앞에 새로운 요소를 추가합니다.
• shift(): 배열의 맨 앞 요소를 제거하고, 그 제거된 요소를 반환합니다.

JavaScript

 

const queue = ['🧑', '👧'];

// unshift: 앞에 추가
queue.unshift('👶');
console.log(queue); // ['👶', '🧑', '👧']

// shift: 앞에서 제거
const first = queue.shift();
console.log(first); // '👶'
console.log(queue); // ['🧑', '👧']

---

2. 배열을 순회하며 변형/필터링하는 메서드 (핵심 ⭐)

이 메서드들은 기존 배열을 건드리지 않고, 새로운 배열을 반환하므로 안전하고 깔끔한 코드를 작성할 때 필수적입니다.

보통 화살표 함수 () => {}와 함께 쓰입니다.

map() : 똑같이 모양 바꾸기

배열의 모든 요소를 하나씩 돌면서, 내가 정의한 함수에 따라 새로운 형태의 배열로 1:1 변환합니다.

 

const numbers = [1, 2, 3];

// 각 숫자에 2를 곱해서 새로운 배열 만들기
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6]
console.log(numbers); // [1, 2, 3] (원본은 그대로!)

filter() : 조건에 맞는 것만 골라내기

배열의 요소 중 특정 조건(True)을 만족하는 요소만 쏙쏙 골라내어 새로운 배열을 만듭니다.

 

const ages = [15, 22, 18, 30, 12];

// 20세 이상 성인만 골라내기
const adults = ages.filter(age => age >= 20);

console.log(adults); // [22, 30]

reduce() : 하나로 응축하기

배열의 모든 요소를 돌면서 하나의 누적된 값(숫자, 문자열, 객체 등 무엇이든)으로 만듭니다. 가장 대표적인 예시가 '합계 구하기'입니다.

 

const prices = [100, 200, 300];

// total은 누적값, price는 현재 요소, 0은 시작할 때의 초기값
const totalPrice = prices.reduce((total, price) => total + price, 0);

console.log(totalPrice); // 600

---

3. 배열에서 특정 요소를 찾는 메서드

find() : 조건에 맞는 '첫 번째' 요소 찾기

배열을 돌다가 조건에 맞는 첫 번째 요소의 '값'을 반환합니다. 조건에 맞는 게 없으면 undefined를 반환합니다.

 

const users = [
  { id: 1, name: '철수' },
  { id: 2, name: '영희' },
  { id: 3, name: '민수' }
];

// id가 2인 유저 찾기
const user = users.find(u => u.id === 2);

console.log(user); // { id: 2, name: '영희' }

---

4. 만능 메서드 splice() 이해하기

splice라는 단어는 '이어 붙이다'라는 뜻입니다.

기본 문법은 다음과 같습니다.

배열.splice(시작_인덱스, 삭제할_개수, 추가할_요소1, 추가할_요소2, ...)

 

① 요소 삭제하기

const items = ['🍕', '🍔', '🍟', '🌭'];

// 인덱스 1('🍔')부터 2개를 삭제
const removed = items.splice(1, 2);

console.log(items);   // ['🍕', '🌭'] (원본이 바뀌었어요!)
console.log(removed); // ['🍔', '🍟'] (삭제된 요소들이 반환돼요)

② 요소 추가하기 (삭제 없이)

삭제할 개수를 0으로 지정하면, 원하는 위치에 새 요소를 끼워 넣을 수 있습니다.

 

const colors = ['Red', 'Blue'];

// 인덱스 1 자리에 삭제는 0개 하고, 'Green'과 'Yellow'를 추가
colors.splice(1, 0, 'Green', 'Yellow');

console.log(colors); // ['Red', 'Green', 'Yellow', 'Blue']

③ 요소 교체하기 (삭제 후 추가)

특정 요소를 지우고 그 자리에 곧바로 다른 요소를 넣을 수 있습니다.

 

const playlist = ['Song1', 'Song2', 'Song3'];

// 인덱스 1('Song2')부터 1개를 지우고, 그 자리에 'NewSong'을 삽입
playlist.splice(1, 1, 'NewSong');

console.log(playlist); // ['Song1', 'NewSong', 'Song3']

---

---

---

자바스크립트 배열 핵심 메서드 총정리 (8종)

---

이제 splice()를 포함해 실무에서 가장 많이 쓰는 핵심 메서드들을 성격별로 분류한 최종 버전입니다.

📌 원본 배열을 "직접 변경"하는 메서드

• push() / pop(): 배열의 맨 뒤에 요소를 추가하거나 제거합니다.
• unshift() / shift(): 배열의 맨 앞에 요소를 추가하거나 제거합니다.
• splice(): 배열의 중간에서 요소를 삭제, 추가, 교체합니다.

📌 원본은 두고 "새로운 배열"을 만드는 순회 메서드

• map(): 배열의 모든 요소를 1:1로 변형하여 새로운 배열을 만듭니다.
• filter(): 조건에 맞는 요소만 골라내어 새로운 배열을 만듭니다.
• reduce(): 배열의 요소를 하나로 응축(합계 등)하여 최종 값 하나를 만듭니다.

📌 특정 요소를 "검색"하는 메서드

• find(): 조건에 맞는 첫 번째 요소의 값을 찾아 반환합니다.

---

💡 최종 요약 표

메서드명	원본 변경	무엇을 반환하나요?	주요 용도
push / pop	O	추가 후 배열 길이 / 제거된 요소	배열 뒷부분 제어
unshift / shift	O	추가 후 배열 길이 / 제거된 요소	배열 앞부분 제어
splice	O	삭제된 요소들이 담긴 배열	배열 중간의 요소 삭제/추가/교체
map	X	요소를 변형한 새로운 배열	데이터 가공 및 변형
filter	X	조건에 맞는 요소만 담은 새로운 배열	특정 데이터 필터링
reduce	X	축적된 최종 값 하나	합계, 평균, 구조 변환 등
find	X	조건에 맞는 첫 번째 요소의 값	특정 데이터 검색

---

---

 

---