JavaScript에서 배열은 다른 프로그래밍 언어와 마찬가지로 다양한 메서드를 가지고 해당 메서드를 활용해서 데이터를 파싱하거나 특정 조건에 맞게 배열을 정리하는 작업을 할 수 있다. 이번 포스팅에서는 JavaScript의 배열이 가지고 있는 메서드를 알아보자.
1. forEach
forEach메서드는 배열안의 각각의 원소에 대해서 작업을 해주는 메서드이다.
forEach메서드는 작업한 배열을 리턴하지 않는다.
for of가 업데이트 되기 이전에 많이 쓰인 콜백함수이다.
const number = [1, 2, 3, 4, 5];
number.forEach((el, index) => {
el *= 2;
console.log("arr index : ", index, " value : ", el);
});
for (let i of number) {
console.log(i);
}
콜백함수의 첫번째 인자 el은 배열의 각 원소를 가르키고 두번째 인자 index는 배열에서 원소의 위치, 즉 index를 가르킨다.
두번째 인자인 index는 생략가능하다.
2. map
map메서드는 배열 각 원소에다가 작업을 해주는건 forEach와 동일하지만 작업한 새로운 배열을 반환해주는 것이 map 메서드의 큰 특징이다.
const number = [1, 2, 3, 4, 5];
const newNumber = number.map((el, index) => {
el *= 2;
console.log("arr index : ", index, " value : ", el);
return el;
});
for (let i of newNumber) {
console.log(i);
}
작업한 새로운 배열을 반환해주는 메서드이기 때문에 콜백함수 내부에서 작업한 원소를 반환해주는 반환문을 추가해줘야 한다.
3. filter
filter메서드는 배열의 요소를 필터링 하거나 부분집합을 모아서 새 배열을 만드는데 사용한다.
map메서드와 마찬가지로 원본 배열을 바꾸지 않고 리턴하는 배열이 있다.
콜백함수의 반환형은 true, false 즉, boolean형식이다.
const number = [1, 2, 3, 4, 5];
const newNumber = number.filter((el, index) => {
if (el % 2) {
return el;
}
});
for (let i of newNumber) {
console.log(i);
}
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const numberEven = number.filter((el) => el % 2 === 0);
for (let el of numberEven) {
console.log(el);
}
4. every, some
새 배열을 반환하는 map, filter와 달리 every, some메서드는 항상 true, false를 반환한다.
4.1 some
some메서드는 전체 원소를 돌면서 하나라도 콜백함수에 참인 조건이 있다면 some메서드의 반환값은 참이다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(number.some((el) => el < 0));
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(number.some((el) => el < 2));
4.2 every
every메서드는 전체 원소를 돌면서 전체 원소가 콜백함수에 참이여야만 true을 반환하고 하나라도 겆시이면 false를 반환한다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(number.every((el) => el < 11));
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(
number.every((el) => {
console.log(el);
return el < 8;
})
);
위와같이 7까지는 순회문을 돌다가 8일때 false를 반환하는 걸 확인할 수 있다.
5. fill
fill메서드는 배열의 특정원소들을 정적 값으로 변환할 수 있다.
fill메서드는 새로운 배열을 반환한다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newNumber = number.fill(0, 2, 10);
for (let i of newNumber) {
console.log(i);
}
6. find
find메서드는 배열의 원소중에 특정 조건에 부합하는 원소가 있다면 해당 원소를 반환해준다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newNumber = number.find((el) => {
if (el % 5 === 0) {
return el;
}
});
console.log(newNumber);
여기서 특정 조건에 부합하는 원소가 여러개 있다면 첫번째로 부합하는 원소를 반환해준다.
7. findIndex
findIndex메서드는 find메서드와 마찬가지로 특정 조건에 부합하는 원소가 있다면 해당 원소의 인덱스를 반환해준다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newNumber = number.findIndex((el) => {
if (el % 5 === 0) {
return el;
}
});
console.log(newNumber);
find메서드와 마찬가지로 특정 조건에 부합하는 원소가 여러개 있다면 첫번째로 부합하는 원소를 반환해준다.
8. findLast
findLast메서드는 find메서드처럼 특정 조건에 부합하는 원소를 반환해주는데 배열의 끝에서부터 조건에 부합하는 해당 원소를 찾는다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newNumber = number.findIndex((el) => {
if (el % 5 === 0) {
return el;
}
});
console.log(newNumber);
9. lastIndexOf
lastIndexOf메서드는 findIndex메서드처럼 특정 조건에 부합하는 원소의 인덱스를 반환해주는데 배열의 끝에서부터 조건에 부합하는 해당 원소를 찾고 해당 원소의 인덱스를 반환한다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const newNumber = number.lastIndexOf(10); //찾고자하는 원소를 괄호 안에다가 넣어준다.
console.log(newNumber);
10. splice
splice메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
splice메서드는 새로운 배열을 반환하는게 아닌 기존의 배열을 변환한다.
/// splice(삭제할 인덱스의 시작 인덱스 넘버, 첫번째 인자로부터 삭제할 인덱스 개수, 삭제한 공간에 넣을 값)
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
number.splice(1, 0, "hello");
for (let i of number) {
console.log(i);
}
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
number.splice(1111, 0, "hello", "world");
console.log(number);
첫번째 인자를 배열이 데이터를 가지고 있는 인덱스보다 큰 값으로 지정하면 맨 마지막에 3번째 이후의 인자로 지정한 값들이 원소가 추가된다.
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
number.splice(1, 5);
console.log(number);
3번째 인자를 지정하지 않으면 해당 범위의 값들을 배열에서 삭제한다.
11. reduce
reduce메서드는 배열안에 들어있는 모든 데이터를 대상으로 계산한 다음에 하나의 값을 도출할 때 쓰는 메서드이다.
///reduce((이전의 값, 현재의 값, 현재 인덱스, 원본배열) => {})
const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = number.reduce((preVal, curVal, curIndex, arr) => {
console.log(preVal, curVal, curIndex, arr);
return preVal + curVal;
});
console.log(result);
reduce메서드는 처음에 "preVal"값을 0번째 원소, "curVal"값을 1번째 원소인걸 확인할 수 있다.
그 다음, return의 반환값은 다음 순회문에서 "preVal"값이 되고 이 과정을 반복해서 하나의 값을 도출하는걸 확인할 수 있다.
12. concat
concat메서드는 두 배열을 이어붙일 수 있는 메서드이다.
concat메서드는 합쳐진 새로운 배열을 반환한다.
const oddNumber = [1, 2, 3, 4, 5];
const evenNumber = [6, 7, 8, 9, 10];
const addArr = oddNumber.concat(evenNumber);
console.log(addArr);
13. 마치며
사실 위 12개 말고도 훨씬 더 많은 배열 메서드가 존재하지만 자주 쓸거같은 메서드로만 정리해봤다.
특히 map, filter메서드는 서버에서 데이터를 받아와서 파싱하는 과정에서 수도 없이 쓰게 된다.
앞으로 위 메서드를 제외한 나머지 배열 메서드를 배우거나 실제 프로젝트에서 요긴하게 써먹는다면 이번 포스팅에다가 추후 추가할 예정이다.
14. Reference
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
