[240414] 27장 배열 (2)

배열

6. Array.prototype.shift

• 첫 번째 요소를 제거하고 제거한 요소 반환
• 원본 배열 직접 변경함
• 큐 구현할때 유용

7. Array.prototype.concat

• 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환
• 원본 배열 변경 x

const arr1 = [1,2];
const arr2 = [3,4];

let result = arr1.concat(arr2); 
console.log(result); // [1,2,3,4]

• push, unshift 메서드 대체 가능

8. Array.prototype.splice

• 중간에 있는 요소를 제거하거나 추가할때 사용
• 원본 배열을 직접 변경
• splice(start, deleteCount, items)
  • start: 제거하기 시작할 인덱스, -1이면 마지막 가리킴
  • deleteCount: 제거하기 시작할 인덱스 0일 경우 제거x
  • items: 제거한 위치에 삽입할 요소, 생략할 경우 제거만 함

const arr = [ 1,2,3,4 ];
const result = arr.splice(1,2,20,30);

// 제거한 요소가 배열로 반환
console.log(result); // [2,3]
// splice 메서드는 원본 배열을 직접 변경
console.log(arr); // [1, 20, 30, 4]

9. Array.prototype.slice

• 인수로 전달된 범위의 요소들을 복사하여 배열로 반환
• 원본 배열 변경 X
• slice(start, end);
  • start: 복사 시작할 인덱스
  • end: 복사 종료 인덱스, 이 인덱스에 해당하는 요소는 복사 X, 기본값은 length

• 모든 인수를 생략하면 원본 배열의 복사본이 생성됨 → 얕은 복사를 통해 생성

    const todos = [
    	{ id: 1, content: 'HTML' },
    	{ id: 2, content: 'CSS' },
    	{ id: 3, content: 'Java' }	
    ];
      
    // 얕은 복사
    const _todos = todos.slice();
      
    console.log(_todos === todos); // false
    console.log(_todos[0] === todos[0]); // true
  

10. Array.prototype.join

• 모든 요소를 문자열로 변환한 후, 구분자로 연결한 문자열을 반환한다.
• 생략도 가능 (기본 구분자는 콤마)

const arr = [1,2,3,4];
arr.join(); // '1,2,3,4'
arr.join(''); // '1234'

11. Array.prototype.reverse

• 원본 배열의 순서를 뒤집는다.
• 배열 반환

12. Array.prototype.fill

• 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채움
• 원본 배열 변경
• 두번째 인수로 채우기 시작할 인덱스 전달 가능
• 세번째는 요소 채우기 멈출 인덱스 전달 가능

const arr = [1,2,3,4,5];

arr.fill(0,1,3);
console.log(arr); // [1,0,0,4,5]

13. Array.prototype.includes

• ES7 에서 도입
• 배열 내 특정 요소가 포함되어있는지 확인
• true 또는 false 반환
• includes(확인할 요소, 검색 시작할 인덱스)
• indexOf는 NaN 이 포함되어있는지 확인할 수 없음

14. Array.prototype.flat

• ES10
• 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화함
• 기본값은 1
• Infinity 전달하면 모든 중첩 배열 평탄화

[1,[2,[3,[4]]]].flat(Infinity); // [1,2,3,4]

배열 고차 함수

• 고차 함수는 함수를 인수로 전달 받거나 함수를 반환하는 함수를 말함
• 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임
• 순수 함수르르 통해 부수 효과를 최대한 억제
• 자바스크립트는 고차 함수 다수 지원, 특히 배열 고차함수는 활용도가 높다.

1. Array.prototype.sort

• 배열의 요소를 정렬
• 원본 배열 직접 변경
• 기본이 오름차순, 내림차순으로 하려면 정렬 후 reverse 메서드 사용
• 숫자 요소로 이루어진 배열은 주의가 필요함

const points = [40, 100, 1, 5, 2, 25, 10];
points.sort(); 

// 의도대로 정렬되지 않는다.
console.log(points); // [1, 10, 100, 2, 25, 40, 5]

• 일시적으로 문자열로 변환 → 유니코드 코드 포인트의 순서를 따라서 바꾸는데 이것 때문에 안됨
• 해결 방법: 정렬 순서를 정의하는 비교 함수를 인수로 전달해야한다.
  • 양수, 음수, 0 을 반환해야함
  • 비교 함수의 반환 값이 0보다 작으면 첫 번째 인수를 우선하여 정렬
  • 0이면 정렬하지 않음
  • 0보다 크면 두 번째 인수를 우선하여 정렬

const points = [40, 100, 1, 5, 2, 25, 10];
points.sort((a,b) => a-b); 
console.log(points); // [1,2,5,10,25,40,100]

const todos = [
	{ id: 4, content: 'HTML' },
	{ id: 1, content: 'CSS' },
	{ id: 2, content: 'Java' }	
];

function compare(key) {
	return (a,b) => (a[key] > b[key] ? 1 : (a[key] < b[key] ? -1 : 0));	
}

todos.sort(compare('id'));

• ES10 이전엔 quicksort 알고리즘 사용, 초기 순서와 변경될 수 있는 불안정한 정렬 알고리즘
• 이후엔 timesort 알고리즘 사용하도록 변경

2. Array.prototype.forEach

• for 문을 대체할 수 있는 고차 함수
• 자신의 내부에서 반복문 실행
• 자신을 호출한 배열을 순회하면서 콜백 함수 전달 받아 반복 호출

const numbers= [1,2,3];
const pows = []; 

numbers.forEach(item => pows.push(item ** 2));
console.log(pows); // [1,4,9]

• 콜백함수는 forEach 메서드를 호출한 배열의 요소 값과 인덱스, 배열 자체 this 를 순차적으로 전달 받을 수 있다.

[1,2,3].forEach((item, index, arr) => {
	console.log(item,index,JSON.stringify(arr));
});

• 원본 배열 변경하지 않는다.
• 콜백함수를 통해 바꿀 수는 있음
• 반환값은 언제나 undefined
• 두번째 인수로 콜백 함수 내부에서 this 로 사용할 객체를 전달할 수 있다.

class Numbers {
	numberArray = [];
	
	multiply(arr) {
		arr.forEach(function (item) {
			this.numberArray.push(item * item); } , this);
		}
	}
}

• 더 나은 방법은 화살표 함수
  • 화살표 함수는 함수 자체의 바인딩이 없고 선언한 상위 스코프 그대로 참조
• 희소 배열의 경우, 존재하지 않는 요소는 순회 대상에서 제외됨

3. Array.prototype.map

• 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출
• 콜백 함수의 반환값들로 구성된 새로운 배열 반환
• 원본 배열 변경 x

const numbers = [1,4,9];
const roots = numbers.map(item=>Math.sqrt(item));

console.log(roots); // [1,2,3]
console.log(numbers); // [1,4,9]

• 1: 1 매핑
• forEach와 마찬가지로 콜백함수에서 item, index, this 받을 수 있음
• 마찬가지로 두 번째 인수에서 this 로 사용할 객체 받을 수 있음

4. Array.prototype.filter

• 콜백 함수의 반환값이 true 인 요소로만 구성된 새로운 배열 반환함
• 원본 배열 변경 X
• 마찬가지로 콜백함수는 item, index, this
• 마찬가지로 두 번째 인수 this 로 사용할 객체 전달 가능
• filter 를 통해 특정 요소 제거할 경우, 중복이 있다면 모두 제거됨

5. Array.prototype.reduce

• 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환
• 원본 배열 변경 X
• 첫 번째 인수 : 콜백 함수
• 두 번째 인수 : 초기값 전달
• reduce 메서드의 콜백 함수에는 4개의 인수
  • 초기값, 콜백 함수의 이전 반환 값
  • reduce 메서드를 호출한 배열 요소 값
  • 인덱스
  • 배열 자체 this

const sum = [1,2,3,4].reduce(
(acc,value,index,array) => acc+value ,0);

console.log(sum); // 10

• 초기값 생략은 가능하나 언제나 전달하는 것이 안전하다.

6. Array.prototype.some

• 콜백 함수 반환값이 한 번이라도 참이면 true
• 모두 거짓이면 false 반환한다.
• 마찬가지로 콜백, 두번째 인수 this

[5,10,15].some(item => item > 10); // true
[5,10,15].some(item => item < 0); // false
[].some(item=>item>3); // 빈 배열은 언제나 false

7. Array.prototype.every

• 모두 참이면 true
• 하나라도 거짓이면 false 반환
• 빈 배열인 경우 언제나 true 반환
• 마찬가지로 콜백, 두번째 인수 this

8. Array.prototype.find

• ES6 에서 도입
• 인수로 전달된 콜백 함수의 반환 값이 true인 첫 번째 요소 반환
• 존재하지 않으면 undefined 반환
• 마찬가지로 콜백, 두번째 인수 this

9. Array.prototype.findIndex

• ES6 에서 도입
• 자신을 호출한 배열의 요소를 순회하면서 반환값이 true 인 첫 번째 요소의 인덱스를 반환
• 존재하지 않는다면 -1 반환
• 마찬가지로 콜백, 두번째 인수 this

10. Array.prototype.flatMap

• ES10 에서 도입
• map 메서드를 통해 생성된 새로운 배열을 평탄화한다.
• map 메서드와 flat 메서드를 순차적으로 실행하는 효과
• 1단계 평탄화만 한다.
• 깊이 지정해야하면 각각 호출

const arr = ['hello', 'world'];
arr.flatMap(x=>x.split(''));
// ['h','e','l','l','o','w','o','r','l','d']