가변(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"
Web Frontend