[JavaScript] 자바스크립트 배열 내장함수(forEach, map, indexOf, filter, splice, slice, shift, unshift, pop, concat, join, reduce)
자바스크립트
오늘은 자바스크립트에서 많이 사용되는 내장함수를 공부해보았다!
forEach
주어진 함수를 배열 요소 각각에 대해 실행
arr.forEach(callback(currentValue[, index[, array]])[, thisArg])callback
각 요소에 대해 실행할 함수(다음 세 가지의 매개변수)
currentValue
처리할 현재 요소
index
처리할 현재 요소의 인덱스
array
forEach()를 호출한 배열
thisArg
callback을 실행할 때 this로 사용할 값
for문 VS forEach 함수
for문
const fruits = ['딸기', '귤', '사과', '바나나']
for(let i=0; i<fruits.length; i++){
console.log(fruits[i]);
}forEach 함수
const fruits = ['딸기', '귤', '사과', '바나나']
fruits.forEach(fruit => {
console.log(fruit);
})⇒ 이 함수의 파라미터 fruit는 배열의 각 원소를 가리킴
map
배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
arr.forEach(callback(currentValue[, index[, array]])[, thisArg])callback
새로운 배열 요소를 생성하는 함수(다음 세 가지의 매개변수)
currentValue
처리할 현재 요소
index
처리할 현재 요소의 인덱스
array
map()을 호출한 배열
thisArg
callback을 실행할 때 this로 사용할 값
[예시]
const array= [1, 2, 3, 4, 5]
const resultarray= array.map(n=> n*n);
console.log(resultarray); // 1, 4, 9, 16, 25 출력⇒ 배열 안의 각 원소를 변환할 때 사용되고, 이 과정에서 새로운 배열이 만들어짐
indexOf
배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환, 존재하지 않으면 -1 반환
arr.indexOf(searchElement[, fromIndex])searchElement
배열에서 찾을 요소
fromIndex
검색을 시작할 색인
[예시]
const fruits= ['딸기', '귤', '사과', '바나나']
const index = fruits.indexOf('사과');
console.log(index); // 2 출력findIndex
배열 안에 있는 값이 객체나 배열이라면 indexOf로 찾을 수 없음
const ex = [
{
id:1,
text: '가',
done: true,
},
{
id:2,
text: '나',
done: true,
},
{
id:3,
text: '다',
done: false,
}
]
const index= ex.findIndex(ex => ex.id===3);
console.log(index); // 2 출력find
findIndex랑 비슷, 찾은 값의 인덱스가 아닌 값 자체 반환
const result= ex.find(ex=>ex.id===2);
console.log(result);
// {id:2, text:'나', done:true} 출력filter
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
arr.filter(callback(element[, index[, array]])[, thisArg])callback
각 요소를 테스트할 함수로, true를 반환하면 요소 유지, false를 반환하면 버림(다음 세 가지의 매개변수)
element
처리할 현재 요소
index
처리할 현재 요소의 인덱스
array
filter를 호출한 배열
thisArg
callback을 실행할 때 this로 사용할 값
const result= ex.filter(ex=> !ex.done);
console.log(result);
// {id:3, text:'다', done:false} 출력⇒ 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열 생성
splice
배열의 기존 요소를 삭제 또는 교체, 또는 새 요소를 추가하여 배열의 내용 변경
arr.splice(start[, deleteCount[, item1[, item2[, ... ]]]])start
배열의 변경을 시작할 인덱스
deleteCount
배열에서 제거할 요소의 수
item1, item2, ...
배열에 추가할 요소 ( 아무 요소도 지정하지 않으면 제거만 함)
[예시]
- 요소 한 개 제거
const fruits= ['딸기', '귤', '사과', '바나나']
const result = fruits.splice(3, 1); // 3번 인덱스에서 한 개 요소 제거
console.log(result); // 딸기, 귤, 사과 출력- 제거 없이 중간에 추가
const fruits= ['딸기', '귤', '사과', '바나나']
const result = fruits.splice(2, 0, '복숭아'); // 2번 인덱스에서 하나도 제거하지 않고 복숭아 추가
console.log(result); // 딸기, 귤, 복숭아, 사과, 바나나 출력slice
어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환(원본 배열은 바뀌지 않음)
arr.slice(begin[, end]])begin
0을 시작으로 하는 추출 시작점에 대한 인덱스
end
추출을 종료할 0 기준 인덱스
(end 인덱스 제외 추출) ⇒ end 생략시 arr.length 까지 추출
[예시]
const fruits= ['딸기', '귤', '사과', '바나나']
const result = fruits.slice(0, 2); // 0번부터 2번 전까지 (0번, 1번)
console.log(result); // 딸기, 귤 출력⇒ 기존 배열은 건드리지 않음
shift
배열에서 첫 번째 요소 제거, 제거된 요소 반환 ⇒ 배열에 영향
[예시]
const fruits= ['딸기', '귤', '사과', '바나나']
const result = fruits.shift(); // 첫 번째 요소 제거, 반환
console.log(result); // 딸기 출력
console.log(fruits); // 귤, 사과, 바나나 출력(딸기 제거됨)unshift
배열에서 맨 앞에 새 원소 추가(shift의 반대)
[예시]
const fruits= ['딸기', '귤', '사과', '바나나']
fruits.unshift('망고'); // 맨 앞에 망고 추가
console.log(fruits); // 망고, 딸기, 귤, 사과, 바나나 출력pop
배열에서 마지막 요소 제거, 제거된 요소 반환 ⇒ 배열에 영향
[예시]
const fruits= ['딸기', '귤', '사과', '바나나']
const result = fruits.pop(); // 마지막 요소 제거, 반환
console.log(result); // 바나나 출력
console.log(fruits); // 딸기, 귤, 사과 출력(바나나 제거됨)concat
인자로 주어진 배열이나 값들을 기존 배열에 합쳐 새 배열 반환
arr.concat([value1[, value2[, ... [, valueN]]]])매개변수
- 배열 또는 값
- 만약 value1~ valueN 인자를 생략하면 기존 배열의 얕은 복사본을 반환
[예시]
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const result= arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6] 출력join
배열의 모든 요소를 연결하여 하나의 문자열로 만듦
arr.join([separator])[예시]
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.join()); // 1,2,3,4,5,6 출력
console.log(arr.join(' '); // 1 2 3 4 5 6 출력(문자열 사이에 공백)
console.log(arr.join(', '); // 1, 2, 3, 4, 5, 6 출력(문자열 사이에 콤마와 공백)reduce
배열의 각 요소에 대해 주어진 reducer함수를 실행, 하나의 결과값 반환
arr.reduce(callback[, initialValue])callback
배열의 각 요소에 대해 실행할 함수 다음 네 가지 인수를 받음
accumulator
콜백의 반환값 누적
currentValue
처리할 현재 요소
currentIndex
처리할 현재 요소의 인덱스
array
reduce()를 호출한 배열
initialValue
callback의 최초 호출에서 첫 번째 인수에 제공하는 값 ( 초기값 제공하지 않으면 배열의 첫 번째 요소 사용)
[예시]
let sum = [1, 2, 3, 4, 5].reduce((ac,cur) => ac+cur, 0);
// 숫자 리스트의 전체 합, 초기값 == 0
