[JS Deep Dive] 27장 - 배열 (2)

 

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]