[JavaScript] 배열 메소드 정리 | 불변성(Immutability)

가변(Mutable): 기존 배열을 변경시킨다.
불변(Immutable): 기존 배열이나 값을 변경시키지 않는다. ➡️ 새 배열 반환

가변 (Mutable)

• ✅ push(element): 배열의 끝에 하나 이상의 요소 추가

const animals = ['pigs', 'goats', 'sheep'];

animals.push('cows');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

• ✅ pop(): 배열의 마지막 요소 삭제

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

• ✅ unshift(element): 배열의 맨 앞에 하나 이상의 요소 추가

const array1 = [1, 2, 3];

array1.unshift(4, 5);
console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

• ✅ shift(): 배열의 맨 앞 요소 삭제

const array1 = [1, 2, 3];

array1.shift();
console.log(array1);
// expected output: Array [2, 3]

• ✅ splice(startIndex, deleteCount, element): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

불변(Immutable)

• ✅ concat(array 또는 element): 인자로 주어진 배열이나 요소들을 기존 배열에 합침

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

const array4 = array1.concat('d');
console.log(array4);
// expected output: Array ["a", "b", "c", "d"]

• ✅ slice(startIndex, endIndex): startIndex 부터 endIndex-1까지에 대한 얕은 복사본을 반환

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

• ✅ filter(callback): 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

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

const result = arr.filter(el => el % 2 === 0);
console.log(result); // [2, 4]

• ✅ join(separator): 배열의 모든 요소를 연결해 하나의 문자열로 반환

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"