JS 배열 메소드

2020-09-03

배열 메소드가 결과물을 반환하는 패턴

원본 배열(this가 가리키는 객체)을 직접 변경하는 메소드(mutator method)
원본 배열을 직접 변경하지 않고 배열을생성하여 반환하는 메소드(accessor method)

＊ 표시된 메서드는 원본 배열 변경시킴

메서드 이름	설명
concat()	매개변수로 입력한 배열의 요소를 모두 합쳐 배열을 만든 후 리턴
join()	배열 안의 모든 요소를 문자열로 만들어 리턴
pop() ＊	배열의 마지막 요소를 제거하고 리턴
push() ＊	배열의 마지막 부분에 새로운 요소를 추가
reverse() ＊	배열의 요소 순서를 뒤집음
slice()	배열 요소의 지정한 부분을 리턴
sort() ＊	배열의 요소를 정렬
splice() ＊	배열 요소의 지정한 부분을 삭제하고 삭제한 요소를 리턴

Array.isArray

Array 생성자 함수의 정적 메소드
주어진 인수가 배열이면 true, 배열이 아니면 false를 반환

1 2	Array.isArray([1, 2]); // true Array.isArray('1'); // false

Array.prototype.push (마지막 요소 추가)

인수로 전달받은 모든 값을 원본 배열(this)의 마지막 요소로 추가하고 변경된 length 값을 반환
원본 배열(this)을 직접 변경 하는 부수 효과가 있다.
성능면에서 좋지 않음.

const arr = [1, 2, 3];
let result = arr.push(4, 5);
console.log(result); // 5
console.log(arr); // [1, 2, 3, 4, 5]

배열의 마지막에 요소를 추가하므로 length 프로퍼티를 사용하여 직접 요소를 추가 가능하다.

1
2
3

const arr = [1, 2, 3];
arr[arr.length] = 4;
console.log(arr); // [1, 2, 3, 4]

ES6의 스프레드 문법을 사용하는 것이 좋다.

1
2
3

const arr = [1, 2, 3];
const newArr = [...arr, 4];
console.log(newArr); // [1, 2, 3, 4]

Array.prototype.pop (마지막 요소 제거)

원본 배열(this)에서 마지막 요소를 제거하고 제거한 요소를 반환
원본 배열이 빈배열이면 undefined 반환
원본 배열(this)을 직접 변경 하는 부수 효과가 있다.

const arr = [1, 2, 3, 4, 5];
let result = arr.pop();

console.log(result); // 5
console.log(arr); // [1, 2, 3, 4]

pop 메소드와 push 메소드를 사용하여 스택(후입선출)을 쉽게 구현 가능하다.

Array.prototype.unshift (처음 요소 추가)

인수로 전달받은 모든 값을 원본배열의 맨 앞에 요소로 추가하고 변경된 length값을 반환.
원본 배열(this)을 직접 변경 하는 부수 효과가 있다.

const animal = ['bunny', 'kitten', 'puppy'];
let result = animal.unshift('squirrel', 'hamster');
console.log(result); // 5
console.log(animal);
// ['squirrel', 'hamster', 'bunny', 'kitten', 'puppy']

ES6의 스프레드 문법을 사용하는 것이 좋다.

const animal = ['bunny', 'kitten', 'puppy'];
const newAnimal = ['squirrel', 'hamster', ...animal];
console.log(newAnimal);
// ['squirrel', 'hamster', 'bunny', 'kitten', 'puppy']

Array.prototype.shift (첫번째 요소 제거)

원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환
원본 배열이 빈 배열이면 undefined를 반환
원본 배열(this)을 직접 변경 하는 부수 효과가 있다.

const arr = [1, 2, 3];
let result = arr.shift();
console.log(result); // 1
console.log(arr); // [2, 3]

shift 메소드와 push 메소드를 사용하면 큐(선입선출)을 쉽게 구현 가능하다.

Array.prototype.concat (마지막 요소 추가 / newArr)

인수로 전달된 값들(배열 또는 값)을 원본 배열(this)의 마지막 요소로 추가한 새로운 배열을 반환
인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가
원본 배열은 변경되지 않는다.
push와 unshift 메소드는 concat 메소드로 대체 가능
- push와 unshift 메소드: 원본 배열을 반드시 변수에 할당
- concat 메소드: 반환값을 반드시 변수에 할당

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

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

인수로 전달받은 값이 배열이면 인수로 전달받은 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다.

// unshift, push
const arr = [1, 2, 3];
arr.push([4, 5]); // unshift도 해당
console.log(arr); // [1, 2, 3, [4, 5]]

// concat
let result = [1, 2, 3].concat([4, 5]);
result = result.concat([6, 7]);
console.log(result); // [1, 2, 3, 4, 5, 6, 7]

ES6 스프레드 문법으로 대체할 수 있다.

1 2	let result = [...[1, 2, 3], ...[4, 5]]; console.log(result);

Array.prototype.splice (중간 요소 추가 및 제거 / 매개변수 3)

배열의 중간에 요소를 추가하거나 제거하는 경우 사용한다.
원본 배열(this)을 직접 변경 하는 부수 효과가 있다.
3개의 매개변수가 있다.
- start: 원본 배열의 요소를 제거하기 시작할 인덱스. start만 있으면 start 이후로 모든 요소가 제거된다.
- deleteCount: 제거할 요소의 개수. 0일 경우 아무런 요소도 제거되지 않음. 옵션.
- items: 제거한 위치에 삽입될 요소들의 목록. 생략하면 제거만 한다. 옵션.

const animal = ['bunny', 'kitten', 'puppy'];
const result = animal.splice(1, 1, 'squirrel', 'hamster');

console.log(result); // ['kitten']
console.log(animal); // ['bunny', 'squirrel', 'hamster', 'puppy']

Array.prototype.slice (전달된 범위 요소 복사 / newArr / 매개변수 2)

인수로 전달된 범위의 요소들을 복사하여 반환
원본 배열은 변경되지 않는다.
2개의 매개변수가 있다.
- start: 복사를 시작할 인덱스. 음수일 경우 배열의 끝에서 시작.
- end: 복사를 종료할 인덱스. 이 인덱스에 해당되는 요소는 복사되지 않음. 기본값은 length값. 생략하면 모든 요소를 복사하여 반환하게 된다. 옵션.
모든 인수를 생략하면 원본 배열의 새로운 복사본 생성하여 반환하게 된다.

1
2
3

const animal = ['bunny', 'kitten', 'puppy'];
let result = animal.slice(0, 1);
console.log(result); // ['bunny']

arguments, HTMLCollection, NodeList와 같은 유사 배열 객체(Array-like Object)를 배열로 변환 가능하다.

ES6의 스프레드 문법을 사용하면 간단하게 유사배열객체를 배열로 변환 가능하다.

function plus(){
  const arr = [...arguments];
  console.log(arr); // [1, 2, 3]
  return  arr.reduce((first, second) => first + second, 0);
}

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

Array.prototype.indexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환
- 중복되는 요소가 존재하면 그중 첫번째 인덱스를 반환한다.
- 해당하는 요소가 없으면 -1 반환
- 두번째 인수는 검색을 시작할 인덱스이다.
배열에 요소가 존재하는지 확인할 때 유용하게 사용할 수 있다.
결과값 -1을 비교해보아야 하고 배열에 NaN을 확인할 수 없는 문제가 있다.

const animal = ['bunny', 'kitten', 'kitten'];
animal.indexOf('bunny'); // 0
animal.indexOf('puppy'); // -1
animal.indexOf('kitten', 2) // 2

ES7에서 새로 도입된 Array.prototype.includes 메소드를 사용하면 가독성이 좋다.

const animal = ['bunny', 'kitten'];

// animal 배열에 'puppy'가 있는지 확인
// 존재하지 않으면 'puppy'를 추가해라
if (!animal.includes('puppy')) {
  animal.push('puppy');
}

console.log(animal); // ['bunny', 'kitten', 'puppy']

Array.prototype.join

원본배열의 모든 요소를 문자열로 변환 후 인수로 전달 받은 값인 구분자로 연결한 문자열을 반환
구분자는 생략 가능하며 기본 구분자는 , (쉼표) 이다.

const animal = ['bunny', 'kitten', 'puppy'];

let result = animal.join();
console.log(result); // bunny,kitten,puppy

result = animal.join(' - ');
console.log(result); // bunny - kitten - puppy

Array.prototype.reverse

원본 배열의 요소 순서를 반대로 변경한다.
원본 배열이 변경된다.
반환값은 변경된 배열

Array.prototype.fill

인수로 전달 받은 값을 요소로 배열의 처음부터 끝까지 채운다.
원본 배열이 변경된다.
두번째 인수로 요소 채우기를 시작할 인덱스를 설정할 수 있다.
세번째 인수로 요소 채우기를 멈출 인덱스를 설정할 수 있다. 해당 인덱스는 포함되지 않는다.
배열을 생성하면서 특정 값으로 요소를 채울 수 있다. (이때, 원본 배열까지도 변경시킨다.)
모든 요소를 하나의 값으로만 채울 수 있다. Array.from을 사용하면 두번째 인수로 전달한 함수를 통해 값을 만들면서 요소를 채울 수 있다.

const animal = ['bunny', 'kitten', 'puppy', 'squirrel', 'hamster'];

animal.fill('bunny');
console.log(animal); // ['bunny', 'bunny', 'bunny', 'bunny', 'bunny']

animal.fill('bunny', 3);
console.log(animal); // ['bunny', 'kitten', 'puppy', 'bunny', 'bunny']

animal.fill('bunny', 2, 4);
console.log(animal); // ['bunny', 'kitten', 'bunny', 'bunny', 'hamster']

Array.prototype.includes

배열 내에 특정 요소가 포함되어 있는지 확인하여 true 또는 false를 반환
두번째 인수로 검색을 시작할 인덱스를 전달 가능
ES7에서 도입

const animal = ['bunny', 'kitten', 'puppy', 'squirrel', 'hamster'];

let result = animal.includes('bunny');
console.log(result); // true

result = animal.includes('lion');
console.log(result); // false

result = animal.includes('bunny', 2);
console.log(result); // false

console.log([NaN].includes(NaN)); // true

REFERENCE
https://poiemaweb.com