JS를 배울때 배열의 내장함수에 대해 쉽게 생각하고 넘어 갔었는데 사용할때 마다 자꾸 검색하고 사용하다보니 한번 정리를 깔끔하게 해야 겠다는 생각이 들었다. 이번에 기회에 정리해보려 한다.
알아 볼 내장 함수들은 forEach, map, filter, reduce, splice, slice, shift, pop, unshift, push, indexof, findindex, find, join 이다.
1. forEach
forEach 메서드는 배열을 반복하는 메서드이다. 일반적으로 무언가를 반복하고자 할때는 for문을 사용한다.
1 const a = [1,2,3,4,5];
2
3 for(let i=0;i<a.length;i++) {
4 console.log(a[i]); // 출력 : 1,2,3,4,5
5 }위와 같이 배열 a의 길이를 이용하여 for 문 안에서 인덱스 i 값을 원소로 하여 반복하는 방식을 사용한다. 하지만 forEach 메서드를 사용하면 보다 쉽게 구현할 수 있다.
1 const a = [1,2,3,4,5];
2
3 a.forEach(function(s) {
4 console.log(s); // 출력 : 1,2,3,4,5
5 })배열 a는 각 1,2,3,4,5의 요소를 가지고 있다. 3열에서 배열 a의 메서드 forEach를 호출 하는데 인자로 함수를 전달하고 함수의 매개변수는 배열 a의 요소가 된다. 첫번째 배열 인덱스부터 마지막 배열 인덱스까지 반복한다.
2. Map
Map 메서드는 해당 배열의 모든 요소를 이용하여 새로운 배열을 반환하는 메서드이다.
1 const a = [1,2,3,4,5];
2
3 const b = a.map(function(s) {
4 return s * s;
5 })
6
7 console.log(b); // 출력 : [1, 4, 9, 16, 25]배열 a는 각 1,2,3,4,5의 요소를 가지고 있다. 3열에서 a배열의 map 메서드를 호출하고 인자로 함수를 넣고 함수의 매개변수는 배열 a의 요소가 된다. 리턴 값으로 s*s를 리턴하여 새로운 배열을 생성하고 b 변수에 저장했다. 7열에서 새로운 배열 1,4,9,16,25를 출력한다.
3. filter
filter 메서드는 조건에 만족하는 모든 요소들을 모아 새로운 배열을 반환하는 메서드이다.
1 const a = [1,2,3,4,5];
2
3 const b = a.filter(function(s){
4 return s%2 === 0;
5 })
6
7 console.log(b); // 출력 : [2, 4]배열 a는 각 1,2,3,4,5의 요소를 가지고 있다. 3열에서 filter 메서드를 호출하고 리턴에서 매개변수 s를 2로 나누었을때 나머지가 0인 요소들만 리턴하고 있다. 즉 매개변수가 해당 리턴의 조건을 반족하는 경우에만 해당 매개변수를 리턴한다. 좀 더 예제를 만들어 다르게 해보자.
1 const a = [
2 {
3 name: 'jeon',
4 age:20
5 },
6 {
7 name: 'park',
8 age:25
9 },
10 {
11 name: 'park',
12 age:25
13 }
14 ]
15
16 const b = a.filter(function(s) {
17 return s.age === 25;
18 })
19
20 console.log(b); 출력결과 ↓↓↓↓
// [
// {
// name: 'park',
// age:25
// },
// {
// name: 'park',
// age:25
// }
// ]이번엔 배열안에 3개의 객체를 저장 하였다. 각 객체들은 name과 age 프로퍼티를 가지고 있다. 마찬 가지로 16열에서 filter 메서드를 호출 하는데 이번엔 각 개체의 age 프로퍼티가 25일 경우에만 리턴하도록 설정했다. 즉 이때 매개변수 s는 a배열의 객체들이 된다. 20열에서 b배열을 출력한 결과로 1개의 배열이 리턴되고 안에 2개의 배열이 담겨있다.
4. reduce
reduce 메서드는 배열의 각 요소에 대해 리듀서(reducer) 함수를 실행하고 하나의 결과값을 반환한다.
인자로는 리듀서함수와 accumulator 초기값을 받는다. reducer 함수란 정해진 4개의 매개변수가 있다.
accumulator : 누적 되는 매개 변수
currentValue : 현재 순환하는 인덱스의 값
currentIndex : 현재 순환하는 인덱스
array : 호출한 배열을 가르킴
위의 순서를 지켜야 하며 매개변수 이름은 바뀌어도 상관이 없다. currentIndex와 array 매개변수는 생략 가능하다.
1 const a = [1,2,3,4,5];
2
3 const b = a.reduce(function(a,b) {
4 return a + b;
5 },0)
6
7 console.log(b); // 출력: 15배열 a는 1,2,3,4,5 요소를 가지고 있다. 3열에서 reduce 메서드를 호출하는데 매개 변수로 a(accumulator) b(currentValue)를 받고 있다. 4열에서 a와 b를 더한 값을 리턴했다. 리턴의 결과 값은 매개변수 a에 저장되며 다시 순환한다. 여기서 a는 0이다. 2번째 매개변수 0으로 초기화 했다. b는 a 배열의 첫번째 요소 1이된다. 즉 0과 1을 더한 값을 다시 a 매개변수에 저장 하는 것이다. 그 다음 요소 2가 매개변수 b로 저장되고
다시 a와 b를 더한 값을 a 매개변수에 저장하고 배열의 마지막 원소까지 반복한다. 7열에서 1+2+3+4+5의 값인 15를 출력했다. 이번에는 currentIndex와 array 매개변수까지 다 사용해보자.
1 const a = [1,2,3,4,5];
2
3 const b = a.reduce(function(a,b,c,d) {
4 if(c === d.length - 1) {
5 return ( a + b ) / d.length;
6 } else {
7 return a + b;
8 }
9 })
10
11 console.log(b); // 출력: 34열에서 if문을 통해 c 가 d의 길이 -1와 같은지 검사한다. 여기서 c(currentIndex)는 배열의 인덱스이고 d(array)는 a배열이다. d.length - 1을 한것은 배열의 첫 인덱스는 0부터 시작하기 때문이다. 즉 인덱스 0번부터 4번까지 요소를 검사한다. 이 조건이 만족하는 경우는 마지막 요소를 순회하는 경우 a와 b를 더해주고
a배열의 길이를 나누어 평균을 리턴한다. 11열에서 15를 a의 길이로 나눴을때 값은 3을 출력했다.
5. splice
splice 메서드는 해당 구간 인덱스의 요소를 다른 요소로 바꾸거나 삭제하고 새로운 배열을 반환한다.
1 const a = [1,2,3,4,5];
2
3 const b = a.splice(0,2);
4
5 console.log(b); // 출력: [1,2]
6 console.log(a); // 출력: [3,4,5]3열에서 splice 메서드를 호출하여 첫번째 요소로는 시작지점의 인덱스를 지정하고 두번째 요소로는 시작지점으로 부터 제거할 요소의 수이다. 5열과 6열에서 a와 b를 둘다 출력했을때 b배열에는 a배열의 0번째 요소 1부터 2개의 요소 1,2를 가지는 배열을 출력했다. a배열에는 1,2 요소가 삭제 된 3,4,5 배열을 출력했다.
1 const a = [1,2,3,4,5];
2
3 const b = a.splice(0,2,10,11);
4
5 console.log(b); // 출력: [1,2]
6 console.log(a); // 출력: [10,11,3,4,5]이번에는 3열에서 3번째 4번째 인자로 해당 요소를 삭제하고 추가할 10과 11을 전달했다. 6열에서 a를 출력한 결과를 보면 1과 2를 삭제하고 10과 11이 추가됐다.
5-1. slice
slice 메서드는 splice와는 다르게 해당 구간 인덱스만을 가지는 새로운 배열을 반환한다. splice 요소는 해당 구간 인덱스를 삭제하지만 slice 메서드는 삭제하지 않고 유지한다.
1 const a = [1,2,3,4,5];
2
3 const b = a.slice(1,3);
4
5 console.log(b); // 출력: [2,3]
6 console.log(a); // 출력: [1,2,3,4,5]3열에서 주의깊게 봐야 할 점은 splice 메서드는 2번째 인자로 구간을 정할때 시작 지점 인덱스로 부터 정하지만 slice 메서드는 배열의 첫번째 인덱스로 부터 정해진다. 그리고 end요소 -1부분까지만 구간을 가진다.
즉 위에서 인자로 1과3을 전달 하였는데 이 의미는 a 배열의 1번째 인덱스 2부터 3번째 요소 4의 전까지(end-1) 즉 3 인덱스까지만 구간으로 정한다. 그 결과로 5번 열에서 확인 해보면 2와 3이 리턴됐다.
만약 인자가 음수 값을 가질 경우 배열의 마지막부터 계산한다.
6. shift pop unshift push
이 메서드들은 배열의 제일 앞 인덱스에 추가하거나 삭제하고 마지막 인덱스에 추가하거나 삭제한다.
shift
1 const a = [1,2,3,4,5];
2
3 a.shift();
4 console.log(a); // 출력: [2,3,4,5]배열의 첫번째 요소를 제거한다.
pop
1 const a = [1,2,3,4,5];
2
3 a.pop();
4 console.log(a); // 출력: [1,2,3,4]배열의 마지막 요소를 제거한다.
unshift
1 const a = [1,2,3,4,5];
2
3 a.unshift(10);
4 console.log(a); // 출력: [10,1,2,3,4,5]배열의 첫번째 요소에 10을 추가한다.
push
1 const a = [1,2,3,4,5];
2
3 a.push(11);
4 console.log(a); // 출력: [1,2,3,4,5,11]배열의 마지막 요소에 11을 추가한다.
7. indexOf
1 const a = ['호랑이', '사자', '고양이', '멍멍이'];
2 console.log(a.indexOf('고양이')); // 2배열의 요소 값을 indexOf 메서드 인자로 넘겨주면 해당 하는 값이 몇번째 인덱스 인지 알려준다.
8.findIndex
1 const a = [
2 { name : '호랑이' },
3 { name : '사자' },
4 { name : '고양이' },
5 { name : '멍멍이' }
6 ]
console.log(a.findIndex(ary => ary.name === '고양이')); // 2배열에서 조건에 맞는 값이 몇번째 인덱스 인지 알려준다. findIndex 메서드의 인자로 조건을 콜백함수로 넘겨준다.
9.find
1 const a = [
2 { name : '호랑이' },
3 { name : '사자' },
4 { name : '고양이' },
5 { name : '멍멍이' }
6 ]
7 console.log(a.find(ary => ary.name === '고양이')); // {name: '고양이'}findIndex 메서드와 매우 유사하지만 차이점은 findIndex는 인덱스를 리턴하지만 find는 값을 리턴한다.
10. join
const a = [1,2,3,4,5];
console.log(a.join('A')); // 1A2A3A4A5;배열을 문자열로 리턴하는데 메서드의 인자로 넘겨준 값으로 각 요소 사이에 구분을 둘 수 있다.
인자로 아무것도 전달하지 않으면 ','로 구분 한다. ''공백을 인자로 전달 할 경우 12345 같이 모든 요소가 구분 없이 리턴한다.
참고: 패스트캠퍼스 벨로퍼트님 JS 인강
