[Deep dive] 27장 배열(2)

27.8 배열 메서드 

 

- Array 생성자 함수는 정적 메서드를 제공하며, 배열 객체의 프로토타입인 Array.prototype은 프로토타입 메서드를 제공

- 원본 배열을 직접 변경하는 메서드 (mutator method)

- 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드 (accessor method)

 

27.8.1 Array.isArray

- Array 생성자 함수의 정적 메서드 

- 전달한 인수가 배열이면 true, 배열이 아니면 false 반환

 

27.8.2 Array.prototype.indexOf

- 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스 반환

- 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스 반환

- 요소가 존재하지 않으면 -1 반환

- 배열에 특정 요소가 존재하는지 확인할 떄 유용

const foods = ['apple','banana','orange'];

//foods 배열에 'orange' 요소가 존재하는지 확인 
if(foods.indexOf('orange') === -1) {
  //foods 배열에 'orange'요소가 존재하지 않으면 'orange' 요소를 추가 
  foods.push('orange');
}

console.log(foods);  //[ 'apple', 'banana', 'orange' ]

 

27.8.3 Array.prototype.push

- 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가

- 변경된 length 프로퍼티 값을 반환 

- 원본 배열을 직접 변경

const arr = [1,2];

//인수로 전달받은 모든 값을 원본 배열 arr의 마지막 요소로 추가하고 변경된 length 값을 반환
let result = arr.push(3,4);
console.log(result); //4

//push 메서드는 원본 배열을 직접 변경
console.log(arr); //[ 1, 2, 3, 4 ]

 

27.8.4 Array.prototype.pop

- 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환 

- 원본 배열이 빈 배열이면 undefined 반환

- 원본 배열을 직접 변경

const arr = [1,2];

//원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환
let result = arr.pop();
console.log(result); //2

//pop 메서드는 원본 배열을 직접 변경
console.log(arr); //[ 1 ]

 

27.8.5 Array.prototype.unshift

- 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가

- 변경된 length 프로퍼티 값을 반환

- 원본 배열을 직접 변경

const arr = [1,2];

//인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값 반환
let result = arr.unshift(3,4);
console.log(result); //4

//원본 배열을 직접 변경
console.log(arr); //[ 3, 4, 1, 2 ]

 

25.8.6 Array.prototype.shift

- 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환 

- 원본 배열이 빈 배열이면 undefined 반환

- 원본 배열을 직접 변경

const arr = [1,2];

//원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환
let result = arr.shift();
console.log(result); //1

//원본 배열을 직접 변경
console.log(arr); //[ 2 ]

 

25.8.7 Arrray.prototype.concat

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

- 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가 

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

//배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
let result = arr1.concat(arr2);
console.log(result); //[ 1, 2, 3, 4 ]

//숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(3);
console.log(result); //[ 1, 2, 3 ]

//배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(arr2,5);
console.log(result); //[ 1, 2, 3, 4, 5 ]

//원본 배열은 변경되지 않음
console.log(arr1); //[ 1, 2 ]

 

27.8.8 Array.prototype.splice

- 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용 

- 원본 배열을 직접 변경

 

- 3개의 매개변수 

 1) start : 원본 배열의요소를 제거하기 시작할 인덱스 

 2) deleteCount : 제거할 요소의 개수 

 3) items : 제거한 위치에 삽입할 요소들의 목록

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

//원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20,30을 삽입
const result = arr.splice(1,2,20,30);

//제거한 요소가 배열로 반환
console.log(result); //[ 2, 3 ]

//원본 배열을 직접 변경
console.log(arr); //[ 1, 20, 30, 4 ]

- 제거할 요소의 개수를 생략하면 첫 번째 인수로 전달된 시작 인덱스부터 모든 요소 제거 

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

//원본 배열의 인덱스 1부터 모든 요소 제거 
const result = arr.splice(1);

//원본 배열이 변경
console.log(arr); //[ 1 ]
//제거한 요소가 배열로 반환
console.log(result); //[ 2, 3, 4 ]

- 배열에서 특정 요소를 제거하려면 indexOf 메서드를 통해 특정 요소의 인덱스를 취득한 다음 splice 메서드 사용 

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

//배열 array에서 item 요소 제거 
//item 요소가 여러 개 존재하면 첫 번째 요소만 제거 
function remove(array,item) {
  //제거할 item 요소의 인덱스 취득
  const index = array.indexOf(item);

  //제거할 item 요소가 있다면 제거 
  if(index !== -1) array.splice(index,1);

  return array;
}

console.log(remove(arr,2)); //[ 1, 3, 1, 2 ]
console.log(remove(arr,10)); //[ 1, 3, 1, 2 ]

 

27.8.9 Array.prototype.slice

- 인수로 전달된 범위의 요소들을 복사하여 배열로 반환

- 원본 배열은 변경되지 않음

 

- 2개의 매개변수 

 1) start : 복사를 시작할 인덱스 

 2) end : 복사를 종료할 인덱스 

 

- 두번째 인수(end)를 생략하면 첫 번째 인수 (start)로 전달받은 인덱스부터 모든 요소를 복사하여 배열로 반환

- 인수를 모두 생략하면 원본 배열의 복사본을 생성하여 반환

 -> 얕은 복사(shallow copy)를 통해 생성

const arr = [1,2,3];

//arr[0]부터 arr[1] 이전까지 복사하여 반환
arr.slice(0,1); 
//arr[1]부터 arr[2] 이전까지 복사하여 반환
arr.slice(1,2); 

//원본은 변경되지 않음
console.log(arr); //[ 1, 2, 3 ]

//인수를 모두 생략하면 원본 배열의 복사본을 생성(얕은 복사)
const copy = arr.slice();
console.log(copy); //[ 1, 2, 3 ]
console.log(copy === arr); //false

- slice 메서드가 복사본을 생성하는 것을 이용하여 유사배열객체를 배열로 변환 가능

function sum() {
  //유사배열객체를 배열로 변환
  var arr = Array.prototype.slice.call(arguments);
  console.log(arr); //[ 1, 2, 3 ]

  return arr.reduce(function(pre,cur) {
    return pre + cur;
  },0);
}

console.log(sum(1,2,3)); //6

 

27.8.10 Array.prototype.join

- 원본 배열의 모든 요소를 문자열로 변환한 후 , 인수로 전달받은 문자열 (구분자)로 연결한 문자열을 반환

- 구분자는 생략가능하며, 기본 구분자는 콤마(,)

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

arr.join(); //'1,2,3,4'
arr.join(''); //'1234'
arr.join(':'); //'1:2:3:4'

 

27.8.11 Array.prototype.reverse

- 원본 배열의 순서로 반대로 뒤집음

- 원본 배열이 변경

- 반환값은 변경된 배열

const arr = [1,2,3];
const result = arr.reverse();

//원본 배열을 직접 변경
console.log(arr); //[ 3, 2, 1 ]
//반환값은 변경된 배열
console.log(result); //[ 3, 2, 1 ]

 

27.8.12 Array.prototype.fill

- 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채움

- 두 번째 인수로 요소 채우기를 시작할 인덱스 전달 가능

- 세 번째 인수로 요소 채우기를 멈출 인덱스 전달

const arr1 = [1,2,3];

//인수로 전달받은 값 0을 배열의 인덱스 1부터 끝까지 요소로 채움
arr1.fill(0,1);

//원본 배열을 직접 변경
console.log(arr1); ////[ 1, 0, 0 ]

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

//인수로 전달받은 값 0을 인덱스 1부터 3이전까지 요소로 채움
arr2.fill(0,1,3); 

//원본 배열을 직접 변경
console.log(arr2); //[ 1, 0, 0, 4, 5 ]

 

27.8.13 Array.prototype.includes

- 배열 내의 특정 요소가 포함되어 있는지 확인하여 true 또는 false로 반환

- 첫 번째 인수로 검색할 대상 지정

- 두 번째 인수로 검색을 시작할 인덱스 전달 가능

- 두 번째 인수를 생략할 경우 기본값 0 설정

const arr = [1,2,3];

//배열에 요소 1이 포함되어 있는지 인덱스 1부터 확인
arr.includes(1,1); //false

//배열에 요소 3이 포함되어 있는지 인덱스 2부터 확인
arr.includes(3,-1); //true

 

27.8.14 Array.prototype.flat

- 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화 함

- 중첩 배열을 평탄화할 깊이를 인수로 전달 가능 (생략할 경우 1)

- 인수로 Infinity를 전달하면 중첩 배열 모두 평탄화 

//중첩 배열을 평탄화하기 위한 깊이 값의 기본값은 1
[1,[2,[3,[4]]]].flat(); //[1,2,[3,[4]]]

//중첩 배열을 평탄화하기 위한 깊이 값을 2로 지정하여 2단계 깊이까지 평탄화 
[1,[2,[3,[4]]]].flat(2); //[1,2,3,[4]]

//중첩 배열을 평탄화하기 위한 깊이 값을 Infinity로 지정하여 중첩 배열 모두를 평탄화 
[1,[2,[3,[4]]]].flat(Infinity); //[1,2,3,4]