자바스크립트 배열을 유용하게 조작할 수 있는 메소드를 정리해보려고 한다!
출처는 mdn이고, 제목 그대로 간단 정리니까 더 유용한 예는 직접 만들어보면서 찾아보기로!
이번 글에서 다룰 메소드 = [pop, concat, every, fill, filter, find, findIndex, indexOf, includes, flat, forEach, join]
# array method
- pop() : 배열의 마지막 요소를 제거하고 반환
const arr = [1, 2, 3, 4, 5];
const arr_pop = arr.pop();
// expected arr: [1, 2, 3, 4];
// expected arr_pop : 5;- concat() : 인자로 받은 배열이나 값을 기존 배열에 합쳐서 새로운 배열을 반환 (기존 배열은 변경하지 않음)
const arr = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr_concatn = arr.concat(arr2);
// expected arr_concatn: [1, 2, 3, 4, 5, 6];
// 인자가 주어지지 않을 경우 기존 배열의 얕은 복사본을 반환 (arr3을 변경해도 참조값은 변하지 않음)- every() : 배열안의 모든 요소가 인자로 받은 함수를 통과하는지 테스트해서 boolean값 반환 (빈배열 호출 시 무조건 true)
const isBelowTest = (value) => value < 10;
const arr = [1, 2, 3, 4, 5];
const arr_every = arr.every(isBelowTest);
// expected arr_every: true;- fill() : 배열의 시작 인덱스부터 끝 인덱스까지 정적인 값으로 변환하고 해당값을 반환 (기존배열도 변경)
const arr = [1, 2, 3, 4, 5];
const arr_fill= arr.fill(0, 2, 4); // 2번 인덱스부터 3(4-1)번 인덱스까지 0으로 변경
// expected arr, arr_fill = [1, 2, 0, 0, 5];
마지막 인덱스를 생략할 경우, 배열 끝까지 변경, 첫번째 인덱스만 전달할 경우, 배열 모두 변경- filter() : 인자로 받은 함수를 통과하는 요소의 배열을 반환 (기존 배열은 변경하지 않음)
const arr = [1, 2, 3, 4, 5];
const arr_filter = arr.filter(num => num < 4);
// expected arr_filter: [1, 2, 3];- find() : 인자로 받은 함수를 만족하는 첫번째 요소의 값을 반환, 없을 경우 undefined 반환
const arr = [1, 2, 3, 4, 5];
const arr_find = arr.find(num => num > 3);
// expected arr_find: 4;- find와 연관 함수 *
- find, findIndex는 함수를 인자로 받고, indexOf와 includes는 값을 인자로 받음
- 찾은 요소의 값 대신 인덱스를 반환하는 findIndex() (부재할 경우 -1 반환)
- 값의 위치를 찾는 경우에는 indexOf()를 사용 (부재할 경우 -1 반환)
- 값이 배열에 존재하는지 확인하는 경우에는 includes()를 사용 (부재할 경우 false 반환)
- flat() : 배열 요소를 지정한 깊이까지 평탄화해서 새로운 배열 반환
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// expected arr1: [1, 2, 3, 4];
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// expected arr2: [1, 2, 3, 4, [5, 6]];
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// expected arr3: [1, 2, 3, 4, 5, 6];
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// expected arr4: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]- forEach() : 인자로 받은 함수를 배열 요소 각각에 대해 실행(반환값은 없음 undefined)
const arr = [1, 2, 3];
arr.forEach(num => console.log(num);
// expected log: 1 \n 2 \n 3- join() : 배열의 모든 요소를 join해서 하나의 문자열로 반환
const arr = [‘soae’, ‘jjang’, ‘hehe’];
const arr_join = arr.join();
// expected arr_join: "soae,jjang,hehe"
console.log(arr.join(‘’));
// expected log: “soaejjanghehe”
console.log(arr.join(‘-‘));
// expected log: “soae-jjang-hehe”