Splice
만능템
arr.splice([Index, deleteCount, elem1, ..., elemN])Index 는 조작을 가할 첫 번째 요소
deleteCount 제거하고자 하는 요소의 개수
elem1, ..., elemN 배열에 추가할 요소
const arr = ["a", "b", "c", "d", "e"];
// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr.splice(0, 3, "사과", "바나나");
console.log( arr ) // ["사과", "바나나", "d", "e"]삭제한 요소들로만 배열을 만들 수도 있다.
const arr = ["a", "b", "c", "d", "e"];
// 처음 두 개의 요소를 삭제함
const removed = arr.splice(0, 2);
console.log( removed ); // "a", "b" <-- 삭제된 요소로 구성된 배열deleteCount 를 0 으로 설정하면 요소를 제거하지 않고 새로운 요소를 추가할 수 있다.
const arr = ["a", "b", "c"];
arr.splice(2, 0, "d", "e");
console.log( arr ); // ["a", "b", "c", "d", "e"] 반환Slice
arr.slice([start], [end])이 메서드는 start 인덱스부터 (end를 제외한) end인덱스까지의 요소를 복사한 새로운 배열을 반환. start와 end는 둘 다 음수일 수 있는데, 이런 경우 배열 끝에서부터의 요소 개수를 의미합니다.
forEach
arr.forEach(function(item, index, array) {
// 수행할 작업 내용
});item 은 현재 요소의 값
index 현재 요소의 인덱스값
array 배열 자체
forEach 는 undefined 를 반환한다. 배열을 변화하거나 새로운 배열을 생성하지 않기 때문에, 배열의 요소를 단순히 순회하며 반복 작업을 수행할 때 적합!
배열의 요소를 출력할 때 사용.
const fruits = ["apple", "banana", "cherry"];
fruits.forEach((fruit, index) => {
console.log(`${index}: ${fruit}`);
});
// 출력 결과:
// 0: apple
// 1: banana
// 2: cherry
배열의 값 누적 계산하기.
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach((num) => {
sum += num;
});
console.log(sum); // 출력: 15
HTML 요소의 동적 추가
const items = ["Item 1", "Item 2", "Item 3"];
const list = document.getElementById("list");
items.forEach((item) => {
const li = document.createElement("li");
li.textContent = item;
list.appendChild(li);
});
Q : 문득 궁금해졌다. list.appendChild(li); 이 소괄호 안의 li 는 문자열이 아니라 태그를 가져오는 의미(실제 DOM 객체)라서 따옴표 없이 쓰였는데, const li = document.createElement("li"); 이 부분은 li라는 태그를 생성하는 부분인데 왜 따옴표 안에 썼지?
A : 태그 이름을 '가져오는' 것이 아니라 '생성'할 때에는, 태그 이름이 다양하기 때문에 모든 경우의 수를 처리하기 위해 문자열로 태그 이름을 전달한다. 브라우저는 이 문자열을 읽고 해당 태그에 맞는 DOM 요소 객체를 생성한다.
따라서 createElement("li") 에서 브라우저가 문자열인 li 를 읽고 DOM 요소 객체를 생성했기 때문에, appendChild(li) 에서 li 가 따옴표 없이 쓰인 것이다.
배열 요소의 값 변경 (원본 배열은 변경되지 않음!)
const nums = [1, 2, 3];
nums.forEach((num, index) => {
nums[index] = num * 2; // 원본 배열 수정
});
console.log(nums); // 출력: [2, 4, 6]
forEach 는 모든 요소를 순회해야 하는 메서드로, 조건부 반복에는 적합하지 않다. 영화 검색 사이트를 만들 때, API로 fecth해온 데이터를 일일히 가져다 영화 카드 자리에 넣을 때에 forEach 를 썼었는데, 이는 전체 데이터를 다 순회해야 하는 작업이라 가능했던 것!
따라서 원본 배열을 변환하고 싶다면 map 메서드를 사용하는 것이 적합하다.
map
const nums = [1, 2, 3];
const doubledNums = nums.map(num => num * 2);
console.log(doubledNums); // [2, 4, 6]
console.log(nums); // [1, 2, 3] (원본 배열은 변경되지 않음)만일 새로운 배열을 forEach 로 생성해야 한다면,
const nums = [1, 2, 3];
const doubledNums = [];
nums.forEach(num => {
doubledNums.push(num * 2);
});
console.log(doubledNums); // [2, 4, 6]
console.log(nums); // [1, 2, 3] (원본 배열은 변경되지 않음)
이처럼 빈 배열을 생성한 후 push 메서드로 채워줘야 한다. 하지만 map 을 쓰면 더 가독성과 효율성을 챙길 수 있다. map 은 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 새로운 배열로 반환해준다.
