1. 배열 메서드
원본 배열을 직접 변경하는 메서드 mutator method // mutator
원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드 accessor method // no mtator
2. concat
concat : no mutator 원본배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환
(/push:mutator)
const arr = [1,2];
const result = arr.concat(3);
console.log(arr) //[1,2]
console.log(result)//[1,2,3]
3. Array.prototype.indexOf
->원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환
-> 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스를 반환
-> 원본 배열에 인수로 전달한 요소가 존재하지않으면 -1 반환
-> 따라서 특정 요소가 존재하는지 확인할 때 유용함
const arr = [1,2,2,3];
arr.indexOf(2); //1
//요소 2를 검색하는데 첫 번째로 검색된 요소의 인덱스 반환
arr.indexOf(4); //-1
//요소 4라는 애가 없어서 -1 반환
arr.indexOf(2,2); //2
//두번째 인수는 검색을 시작할 인덱스
const foods = ['apple','banana','orange'];
if (foods.indexOf('melon') ===-1) {
//foods 배열에 melon 이 없으면 melon 요소 추가하기
foods.push('melon');
}
console.log(foods);
//[ 'apple', 'banana', 'orange', 'melon' ]
4. prototype.push
push:mutator
인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환
push 메서드는 원본 배열을직접 변경
const arr = [1,2];
let result = arr.push(3,4);
console.log(result);
console.log(arr);
//4
//[ 1, 2, 3, 4 ]
-> push 로 직접 변경하기 보다는 스프레드 문법을 사용하는 게 좋음
5. prototype.pop
- mutator
- 원본 배열에서 마지막 요소를 제거하고 제거한 요소 반환
- 원본 배열이 빈 배열이면 undefined 반환
const arr = [1,2];
let result = arr.pop();
console.log(result);
//2
6. prototype.unshift
- mutator
- 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환
const arr =[1,2]
let result = arr.unshift(3,4);
console.log(result);
console.log(arr);
//[3,4,1,2]
7. prototype.shift
- mutator
- 원본배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환
- 빈 배열이면 undefined 반환
const arr = [1,2];
let result = arr.shift();
console.log(result);
//1
8. prototype.concat
- non mutator
- 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열 반환
const arr1=[1,2];
const arr2=[3,4];
let result = arr1.concat(arr2);
console.log(result)
//[1,2,3,4]
10. prototype.slice
- non mutator
- 인수로 전달된 범위의 요소들을 복사하여 배열로 반환
- 첫번째 인수 : start
- 두번째 인수 : 종료할 인덱스 이 인덱스에 해당하는 요소는 복사 x
const arr =[1,2,3];
arr.slice(0,1);
//[1]
//arr[0]부터 arr[1]까지 복사하여 반환
arr.slice(1,2); //2
//arr[1]부터 [2]까지 복사하여 반환함
arr.slice(-1)
//[3]
//음수인경우 배열의 끝에서부터 요소를 복사
arr.slice(-2)
//[2,3]
11. prototype.fill
- mutator
- 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채움
- 모든 요소를 하나의 값만으로 바꿀 때 유용, 하지만 Array.from 메서드 사용하면 콜백함수 받으니까 요소값을 만들면서 배열 채울 수 있다.
const arr = [1,2,3];
arr.fill(0);
console.log(arr);
//[0,0,0]
//두번째 인수로 요소 채우기를 시작할 인덱스 전달 O
arr.fill(0,1);
console.log(arr);
//[1,0,0]
//세번째 인수로 멈춤 인덱스 전달
const arr2 = [1,2,3,4,5];
arr2.fill(0,1,3);
//인수로 전달받은 0 을 배열의 인덱스 1부터 3이전까지 요소로 채워라잉
console.log(arr2);
//[1,0,0,4,5]
12. prototype.includes
- 배열 내에 특정 요소가 포함되어있는지 확인함
- T/F 반환
- 첫번째 인수로 검색할 대상 지정
- 두번째 인수로 검색 시작할 인덱스 전달할 수 있음
const arr = [1,2,3];
arr.includes(2);
//2가 포함되어있는지 확인함
//True
13. prototype.sort
- mutator
- 배열의 요소 정렬
- 기본적으로 오름차순으로 요소 정렬-> reverse 메서드 사용해서 요소 순서 뒤집어야함
- 근데 만약에 숫자타입들을 배열을 정렬하고싶으면 sort 메서드에 정렬 순서를 정의하는 비교함수를 인수로 전달해야함
const points = [40,100,1,5,2,25,10];
//오름차순
points.sort((a,b)=>a-b);
console.log(prints);
//[1,2,5,10,25,40,100]
//내림차순
points.sort((a,b)=>b-a);
console.log(prints);
//[100,40,25,10,5,2,1]
'Deep Dive 정리' 카테고리의 다른 글
[JS Deep Dive] 28장 - Number (0) | 2024.11.07 |
---|---|
[JS Deep Dive] 27장 - 배열 (3)-스택, 큐 자료구조 (0) | 2024.10.31 |
[JS Deep Dive] 27장 - 배열 (1) (0) | 2024.10.31 |
[JS Deep Dive] 24장 - 클로저(Closure) (1) | 2024.09.26 |
[JS Deep Dive] 22장 - this (0) | 2024.09.19 |