들어가며

• 배열의 여러가지 메서드들 중에서 어떤 메서드는 새로운 작업을 수행하고 새로운 배열을 반환하고, 어떤 배열은 작업을 수행하면서 기존의 배열을 수행한다.
• 기존의 배열을 수정하는 메서드를 변형 메서드(Mutator Methods)라고 하고, 작업을 수행한 결과를 새로운 배열로 반환하는 메서드를 비변형 메서드(Non-Mutator Methods)라고 한다.
• 나중에 가볍게 읽어 보고자 변형 메서드와 비변형 메서드들에 대해서 핵심만 정리해본다.

📌 변형 메서드(Mutator Methods)

개념

• 기존의 배열을 수정하는 메서드

종류

(1) push()

• 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환한다.

array.push(element1[, ...[, elementN]]);

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push

(2) pop()

• 배열에서 마지막 요소를 제거하고 반환한다.

const lastElement = array.pop();

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

(3) shift()

• 배열에서 첫 번째 요소를 제거하고 반환한다.

const firstElement = array.shift();

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

(4) unshift()

• 배열의 시작 부분에 요소를 하나 이상 추가하고, 변경된 배열의 새로운 길이를 반환한다.

array.unshift(element1[, ...[, elementN]]);

• 변경된 배열을 확인하려면 unshift()를 이용하여 작업을 수행하고 배열명을 콘솔창에 입력해준다.
  • unshift()를 이용하여 작업을 수행하면, 변경된 배열의 새로운 길이가 반환된다.

var arr = [1, 2];
arr.unshift(0);    // 3 (변경된 배열의 새로운 길이)
arr;    // [0, 1, 2]

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

(5) splice()

• 배열의 요소를 추가하거나 제거하여 배열을 수정한다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]]);

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

(6) sort()

• 배열을 제자리에서 정렬하고 배열을 반환한다.

array.sort([compareFunction]);

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

(7) reverse()

• 배열의 순서를 반전시킨다.

array.reverse();

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

(8) fill()

• 배열의 시작 인덱스부터 끝 인덱스까지 정적 값 하나로 채운다.

array.fill(value[, start[, end]]);

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

📌 비변형 메서드(Non-Mutator MethodS)

개념

• 새로운 배열을 반환하는 메서드

종류

(1) map()

• 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const newArray = array.map(callback(currentValue[, index[, array]]) {
  // return element for newArray, after executing something
});

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

(2) filter()

• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환한다.

const newArray = array.filter(callback(element[, index[, array]]) {
  // return true if the element passes the condition
});

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

(3) slice()

• 지정된 시작부터 끝(끝은 포함하지 않음)까지의 요소에 대한 얕은 복사본을 새로운 배열로 반환한다.

const newArray = array.slice(start[, end]);

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

(4) concat()

• 배열이나 값을 기존 배열에 추가한 새로운 배열을 반환한다.

const newArray = array.concat(value1[, value2[, ...[, valueN]]]);

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

(5) flatMap()

• map()과 유사하지만, callback에서 반환된 배열을 평평하게 평탄화한 후 하나의 배열로 반환한다.

const newArray = array.flatMap(callback(currentValue[, index[, array]]) {
  // return element or new array
});

💡 Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

예제 코드

• 위에서 설명된 모든 메서드들을 사용하여 작성한 예제 코드이다.

// 1️⃣ 새로운 배열을 반환하는 메서드 (비변형 메서드)
const originalArray = [1, 2, 3, 4, 5];

const mappedArray = originalArray.map(item => item * 2);
// map(): [2, 4, 6, 8, 10]
// 각 요소를 두 배로 곱한 새로운 배열을 반환한다.

const filteredArray = originalArray.filter(item => item > 2);
// filter(): [3, 4, 5]
// 주어진 조건을 만족하는 요소만으로 이루어진 새로운 배열을 반환한다.

const slicedArray = originalArray.slice(1, 3);
// slice(): [2, 3]
// 인덱스 1부터 2까지의 요소로 이루어진 새로운 배열을 반환한다.

const concatenatedArray = originalArray.concat([6, 7, 8]);
// concat(): [1, 2, 3, 4, 5, 6, 7, 8]
// 주어진 배열이나 값들을 기존 배열에 추가한 새로운 배열을 반환한다.

const flatMappedArray = originalArray.flatMap(item => [item, item * 2]);
// flatMap(): [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
// 각 요소를 주어진 함수에 매핑한 후, 결과 배열을 평탄화하여 새로운 배열을 반환한다.

// 2️⃣ 기존의 배열을 수정하는 메서드 (변형 메서드)
let mutatingArray = [1, 2, 3, 4, 5];

mutatingArray.push(6);
// push(): 변형된 배열 -> [1, 2, 3, 4, 5, 6]
// 배열의 끝에 요소를 추가하고, 변경된 배열의 길이를 반환한다.

const poppedElement = mutatingArray.pop();
// pop(): 제거된 요소 -> 6, 변형된 배열 -> [1, 2, 3, 4, 5]
// 배열의 마지막 요소를 제거하고 반환한다.

const shiftedElement = mutatingArray.shift();
// shift(): 추가된 요소 -> 1, 변형된 배열 -> [2, 3, 4, 5]
// 배열의 첫 번째 요소를 제거하고 반환한다.

mutatingArray.unshift(0);
// unshift(): 변형된 배열 -> [0, 2, 3, 4, 5]
// 배열의 시작 부분에 요소를 추가하고, 변경된 배열의 새 길이를 반환한다.

mutatingArray.splice(2, 0, 2.5);
// splice(): 변형된 배열 -> [1, 2, 2.5, 3, 4, 5]
// 배열의 요소를 추가하거나 제거하여 배열을 수정한다.

mutatingArray.sort((a, b) => a - b);
// sort(): 변형된 배열 -> [1, 2, 2.5, 3, 4, 5]
// 배열을 제자리에서 정렬하고 반환한다.

mutatingArray.reverse();
// reverse(): 변형된 배열 -> [5, 4, 3, 2.5, 2, 1]
// 배열의 요소 순서를 반전시킨다.

const filledArray = new Array(5).fill(0);
// fill(): 변형된 배열 -> [0, 0, 0, 0, 0]
// 배열의 요소를 정적 값 하나로 채운다.

Reference

• MDN Web Docs
• GPT