Day2 - 배열 다루기 (1) 에서 미처 다루지 않았던 배열 조작 함수들을 알아보았다.
map()
- 배열 내부의 요소 각각에 대해 내부 콜백 호출 결과를 만들어 새로운 배열로 반환한다.
const array = [1,2,3,4];
const arr1 = array.map(v => v);
console.log(array === arr1); // falsemap<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
callbackFn
- 새로운 배열 요소를 생성시킬 함수로 순서대로 다음과 같은 세가지 매개변수를 가진다.
value(필수)
- 현재 처리할 요소
const a = [1,2,3,4]; a.map(v=>v+1); // 2,3,4,5;
index(선택)
- 현재 처리할 요소의 인덱스
const a = [999,888,777,666,555]; a.map((_, i) => i); // [0,1,2,3,4];
array(선택)
-
호출된 배열
thisArg
-
콜백 수행 시
this로 사용되는 값const a = [1,2,3,4,5]; a.map(function(v) {return v + this}, 1); // [2,3,4,5,6]
return(U[])
-
콜백함수 수행으로 얻은 새로운 배열
filter()
- 함수 구조는
map()과 같으나 콜백 내부에 검증 로직을 사용해 필터링한다.
- 주어진 배열 데이터에서 원하는 정보만 검색하고자 할 때 많이 사용한다.
const a = [undefined, 1, 99, 88];
const b = a.filter(v => v >= 88); // [88,99];forEach()
-
함수 구조는
map()과 같으나 반환값이 없다. -
배열을 순회하여 무언가 처리하고자 할 때 사용한다. (반복문이라고 보면 된다.)
-
리턴이 없기 때문에 메소드 체이닝 시 마지막에만 사용할 수 있다.
const a = [1,2,3,4,5]; a.forEach(v => console.log(v+"개")); // 1개 // 2개 // 3개 // 4개 // 5개
reduce()
-
배열 각 요소에 대해 리듀서 함수를 실행해 하나의 결과를 만들어 반환한다.
-
가장 쉬운 예를 들면 다음과 같이 배열의 모든 값을 더하고자 할 때 사용된다.
const a = [4, 7, 1, 2]; const result = a.reduce((prev, curr) => prev + curr); // 14
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
callbackFn
- 총 4가지 매개변수를 가진다.
previousValue
- 방금 전 리듀서 함수 수행해 얻었던 결과currentValue
- 현재 처리해야되는 요소initalValue
-
리듀서 함수 첫 호출 시
previousValue파라미터에 제공되는 값이다. -
초기값을 받지 못하면 해당 배열의 첫번째 인덱스의 요소를 사용한다.
-
배열이 비어있거나 객체형태의 요소에 대해 연산하고자 할 때 초기값 설정을 해 줄 필요가 있다.
const objs = [{age: 25}, {age: 46}, {age: 22}];
const invalidResult = objs.reduce((prev, curr) => prev.age + curr.age); // NaN
const correctResult = objs.reduce((prev, curr) => prev + curr.age, 0); // 93왜그럴까?
이전값으로부터 현재값을 만들어나가는 것이고 현재값은 다음에는 이전값이 된다.
위의 첫번째 함수 처럼 사용하는 경우 age: 22 를 계산하는 시점에 이미 이전값은 숫자로 변경되어있기 때문에
prev.age 라고 키를 찾으면 undefined 가 된다.
return(T)
-
누적 계산으로 얻은 결과값
find()
-
주어진 배열에 대해 판별함수를 수행해 참인 경우 즉시 그 값을 반환한다.
그냥 예시 코드 세줄로 설명을 끝내보려 한다.
const a = [9, 14, 44, 55];
const finded = a.find(v => v > 10); // 14;
const filtered = a.filter(v => v > 10); // [14, 44, 55];자매품으로 findLast 도 있고 값으로 인덱스 위치를 찾는 findIndex , findLastIndex도 있다.
every()
-
주어진 배열에 대해 판별함수를 수행해 모든 요소가 참인지 테스트한다.
-
boolean결과를 반환한다.const arr = [40,50,60]; arr.every(v => v >= 40); // true
fill()
-
배열 시작 인덱스 부터 끝 인덱스 직전 까지 값 하나로 채운다.
fill(value: T, start?: number, end?: number): this;
const arr = [1,2,3,4]; arr.fill(9999 , 0, 1); console.log(arr); // [9999, 2, 3, 4];변형된 배열을 반환하며 기존 배열도 변경된다.
flat()
- 지정한 깊이만큼 배열 차원을 축소하여 새로운 배열을 생성한다.
const arr1 = [1, 2, [3, 4], [[5]]];
arr1.flat(); // 기본 깊이는 1이다!
console.log(arr1); // [1, 2, 3, 4, [5]];
const arr2 = [1,,2];
arr2.flat(); // 빵꾸도 없애줌
console.log(arr2); // [1,2]Array.from()
-
유사배열 객체나 반복가능한 객체를 얕게 복사해 배열로 만들어준다.
-
인스턴스가 아니라 Array클래스에 직접 접근하여 함수를 사용한다.
-
두번째 매개변수로 조작 함수를 제공해준다.
const name = "김갑환"; const result = Array.from(name); // ['김', '갑', '환'] const result2 = Array.from(name, v => v + "???"); // ['김???', '갑???', '환???']
4일차 TIL...
자주 쓰이는 친구들 위주로 배열 함수들을 정리해보았다.
사실 every는 처음 봤는데 사용할 일이 있으면 사용해보아야 겠다.
알고리즘 문제 풀거나할 때 한 번은 사용할 일이 있겠지!
Refernece
