JavaScript에서 배열 메서드를 다룰 때 내가 가장 중요하게 생각하는 것 두가지는

• 메서드가 반환하는 값이 무엇인지 아는 것
• 원본 데이터를 바꾸는 것 인지 혹은 복사본을 만드는 것 인지 아는 것
  이는 불변성과도 관련있기에 중요하다고 생각한다.

아래에서 살펴보겠지만 잠깐 forEach(),map()을 보고가자

forEach()는 리턴 값이 없다. 즉 아무것도 반환하지 않는다
map()은 리턴 값이 있다.

여기서 말하는 리턴 값이란 새로운 배열을 반환하는지의 여부

그럼 이 차이를 인지한 상태로 JS가 제공하는 배열 메서드들 중 자주 쓰이는 것들을 확인해보자

---

❌ 원본을 변경하지 않는 메서드

1. concat()

let arr = [1, 2];

let newArr = arr.concat([3, 4]);

console.log(arr);     // [1, 2] (원본 유지)
console.log(newArr);  // [1, 2, 3, 4] (새로운 배열 반환)

2. filter()

const arr = [1,2,3,4,5,6];

const result = arr.filter((item) => {
  return item % 2 === 0; // 짝수 찾기
})

console.log(result); // 2, 4, 6

3. map()

const numbers = [1, 2, 3, 4, 5];

const doubleNumbers = numbers.map(num => num * 2);

console.log(numbers); // [1, 2, 3, 4, 5] (원본 유지)
console.log(squaredNumbers); // [2, 4, 6, 8, 10] (새로운 배열 반환) 

4. join(), split()

// join
const arr = ["apple", "banana", "cherry"];

const result = arr.join(", "); 

console.log(result); // "apple, banana, cherry"
console.log(arr);    // ["apple", "banana", "cherry"] (원본 유지)

// split
const str = "apple, banana, cherry";

const result = str.split(", ");

console.log(result); // ["apple", "banana", "cherry"]
console.log(str);    // "apple, banana, cherry" (원본 유지)

Method	동작	리턴 값
join()	배열 → 문자열 변환	문자열 반환
split()	문자열 → 배열 변환	배열 반환

5. slice()

let arr = [1, 2, 3, 4, 5];

let sliced = arr.slice(1, 4); // ✅ 인덱스 1부터 3까지 추출 (4 미포함)
console.log(sliced); // [2, 3, 4]
console.log(arr); // 원본 유지 → [1, 2, 3, 4, 5]

6. reduce()

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15 
console.log(numbers); // [1,2,3,4,5]

7. some()

let arr = [1, 2, 3, 4, 5];

let hasEven = arr.some(num => num % 2 === 0);
console.log(hasEven); // true (2, 4가 짝수니까)
console.log(arr) // [1, 2, 3, 4, 5]

8. find()

let users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];

let result = users.find(user => user.age > 28);
console.log(result); // { name: 'Bob', age: 30 } (첫 번째 일치하는 요소 반환)

✅ 원본을 변경하는 메서드

1. sort()

let numbers = [5, 3, 8, 1, 2];

numbers.sort((a, b) => a - b); // ✅ 오름차순 정렬
console.log(numbers); // [1, 2, 3, 5, 8]

numbers.sort((a, b) => b - a); // ✅ 내림차순 정렬
console.log(numbers); // [8, 5, 3, 2, 1]

2. splice()

let arr = [1, 2, 3, 4, 5];

arr.splice(2, 1); // ✅ 인덱스 2에서 1개 제거
console.log(arr); // [1, 2, 4, 5]

arr.splice(2, 0, 99); // ✅ 인덱스 2에 99 삽입 (제거 없이 추가)
console.log(arr); // [1, 2, 99, 4, 5]

3. reverse()

let arr = [1, 2, 3, 4];
let result = arr.reverse();

console.log(result); // [4, 3, 2, 1]
console.log(arr);     // [4, 3, 2, 1] (원본 배열 수정)

4. shift() & unshift()

// shift
let numbers = [10, 20, 30];

let removed = numbers.shift();

console.log(removed); // 10 (제거된 첫 번째 요소)
console.log(numbers); // [20, 30] (원본 배열 변경됨)

// unshift
let numbers = [20, 30];

let newLength = numbers.unshift(10);

console.log(newLength); // 3 (새로운 배열 길이 반환)
console.log(numbers);   // [10, 20, 30] (원본 배열 변경됨)

⭐ 원본 변경과 리턴값이 모두 없는 메서드

1. forEach()

• undefined를 를 반환한다.

let numbers = [1, 2, 3];

let result = numbers.forEach(num => {
  console.log(num * 2); // 2, 4, 6
});

console.log(result); // undefined