[지식루프 IT공부] JavaScript 배열의 기본 메서드 정리

📌 JavaScript 배열의 기본 메서드 정리

JavaScript의 배열(Array)은 여러 개의 데이터를 저장하고 조작할 수 있는 다양한 메서드(method) 를 제공합니다. 아래에서 자주 사용되는 배열 메서드 15가지를 설명해드리겠습니다.

---

✅ 배열 요소 추가 및 제거 메서드

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

배열의 끝에 새로운 요소를 추가합니다.

 

let arr = ["a", "b"];
arr.push("c"); 
console.log(arr); // ["a", "b", "c"]

---

2️⃣ pop() - 배열 끝 요소 제거 & 반환

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

 

let arr = ["a", "b", "c"];
let removed = arr.pop();
console.log(arr); // ["a", "b"]
console.log(removed); // "c"

---

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

배열의 맨 앞에 새로운 요소를 추가합니다.

 

let arr = ["b", "c"];
arr.unshift("a"); 
console.log(arr); // ["a", "b", "c"]

 

 

 

---

4️⃣ shift() - 배열 앞 요소 제거 & 반환

배열의 첫 번째 요소를 제거하고 그 값을 반환합니다.

 

let arr = ["a", "b", "c"];
let removed = arr.shift();
console.log(arr); // ["b", "c"]
console.log(removed); // "a"

 

 

 

---

✅ 배열 검색 관련 메서드

5️⃣ indexOf(요소) - 요소의 인덱스 찾기

특정 요소의 인덱스를 반환합니다. 요소가 없으면 -1을 반환합니다.

 

let arr = ["a", "b", "c"];
console.log(arr.indexOf("b")); // 1
console.log(arr.indexOf("x")); // -1

 

 

---

6️⃣ includes(요소) - 요소 존재 여부 확인 (true / false)

배열에 특정 요소가 존재하는지 확인합니다.

 

let arr = ["a", "b", "c"];
console.log(arr.includes("b")); // true
console.log(arr.includes("x")); // false

 

 

---

✅ 배열 변환 및 조작 메서드

7️⃣ slice(시작, 끝) - 특정 범위 요소 추출 (원본 유지)

지정한 범위의 요소를 새로운 배열로 반환합니다.

let arr = ["a", "b", "c", "d"];
console.log(arr.slice(1, 3)); // ["b", "c"]
console.log(arr); // ["a", "b", "c", "d"] (원본 그대로 유지)

 

 

---

8️⃣ splice(시작, 개수, 추가요소) - 요소 삭제 & 추가 (원본 변경)

지정한 위치에서 요소를 삭제하거나 새로운 요소를 추가합니다.

 

let arr = ["a", "b", "c", "d"];
arr.splice(1, 2, "x", "y"); // 1번 인덱스부터 2개 삭제 후 "x", "y" 추가
console.log(arr); // ["a", "x", "y", "d"]

---

9️⃣ join(구분자) - 배열을 문자열로 변환

배열의 모든 요소를 특정 구분자로 연결하여 문자열로 변환합니다.

 

let arr = ["a", "b", "c"];
console.log(arr.join("-")); // "a-b-c"

 

---

🔟 reverse() - 배열 순서 뒤집기

배열의 요소 순서를 반대로 정렬합니다.

 

let arr = ["a", "b", "c"];
arr.reverse();
console.log(arr); // ["c", "b", "a"]

 

---

✅ 배열 반복 관련 메서드

1️⃣1️⃣ forEach(콜백) - 각 요소에 대해 함수 실행 (반환값 없음)

배열의 모든 요소에 대해 특정 동작을 수행할 때 사용합니다.

 

let arr = ["a", "b", "c"];
arr.forEach((element, index) => {
    console.log(index + "번째 요소: " + element);
});

 

---

1️⃣2️⃣ map(콜백) - 배열 변환 (새 배열 반환)

배열의 각 요소를 변환하여 새로운 배열을 생성합니다.

let numbers = [1, 2, 3];
let squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9]

 

---

1️⃣3️⃣ filter(콜백) - 특정 조건을 만족하는 요소만 추출

배열에서 특정 조건을 만족하는 요소만 새로운 배열로 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

---

1️⃣4️⃣ find(콜백) - 조건을 만족하는 첫 번째 요소 반환

배열에서 조건을 만족하는 첫 번째 요소만 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2

---

✅ 배열 정렬 관련 메서드

1️⃣5️⃣ sort() - 배열 정렬 (기본: 문자열 기준)

배열을 정렬하는 메서드입니다. 기본적으로 문자열 기준으로 정렬되므로 숫자 정렬 시 주의해야 합니다.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort();
console.log(arr); // [1, 1, 3, 4, 5, 9] (문자열 기준 정렬)

 

 

🔹 숫자를 오름차순 정렬하려면 콜백 함수를 사용해야 합니다.

arr.sort((a, b) => a - b);
console.log(arr); // [1, 1, 3, 4, 5, 9]

 

 

---

🎯 정리

🏷 배열 추가/삭제 메서드

• push() → 배열 끝에 요소 추가
• pop() → 배열 끝 요소 제거
• unshift() → 배열 앞에 요소 추가
• shift() → 배열 앞 요소 제거

🏷 배열 검색 메서드

• indexOf() → 요소의 인덱스 찾기
• includes() → 요소 존재 여부 확인

🏷 배열 변환 및 조작 메서드

• slice() → 특정 범위의 요소 복사
• splice() → 요소 삭제 & 추가
• join() → 배열을 문자열로 변환
• reverse() → 배열 순서 뒤집기

🏷 배열 반복 메서드

• forEach() → 배열 요소 반복 (반환값 없음)
• map() → 배열 요소 변환 (새 배열 반환)
• filter() → 특정 조건을 만족하는 요소만 추출
• find() → 특정 조건을 만족하는 첫 번째 요소 반환

🏷 배열 정렬 메서드

• sort() → 배열 정렬 (기본 문자열 정렬)