배열 메서드

mangojang·2023년 1월 6일

차근차근 쌓아가는 JS 기초

목록 보기

12/20

✍️ 배열 메서드들 정말 자주 쓰는데, 매번 인자 헷갈려서 찾아보는 것이 번거로워 이번 기회에 정리해 보았다. 추가로 몰랐었던 특징들도 같이 정리 해 보았다.

1. splice

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start : 시작 지점 ( 음수는 뒤에서 부터 시작)
deleteCount: 제거 할 갯수 (생략 되면 배열의 끝까지 추출)
itemN : 그 자리에 추가할 요소(옵션)
제거된 요소를 반환 함.

예시

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

기본형 - 특정 위치에서 특정 갯수의 요소 제거

var removed = myFish.splice(3, 1);

// myFish : ["angel", "clown", "drum", "sturgeon"]
// removed : ["mandarin"]

제거 요소 없이 요소 추가

var removed = myFish.splice(2, 0, 'drum');

// myFish : ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed : []

뒤에서 시작한 순서에서 요소 제거

var removed = myFish.splice(-2, 1);

// myFish : ["angel", "clown", "sturgeon"]
// removed : ["mandarin"]

인덱스 포함 이후 모든 요소 제거

var removed = myFish.splice(2);

// myFish : ["angel", "clown"]
// removed : ["mandarin", "sturgeon"]

2. slice

arr.slice([begin[, end]])

begin : 시작 지점 ( 음수는 뒤에서 부터 시작)
end: 종료 지점 (생략 되면 배열의 끝 까지 추출)
기존의 배열은 건드리지 않고 복사 (얕은 복사) -> 새로운 배열 만들고자 할 때 사용.
문자열 도 사용 가능.

예시

기본형 - 특정 인덱스 부터 인덱스 까지 복사, 새 배열 반환

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.slice(2, 3);

// myFish : ['angel', 'clown', 'mandarin', 'sturgeon']
// removed : ['mandarin', 'sturgeon']

유사 배열 Array로 변환

function list() {
  return Array.prototype.slice.call(arguments);
}

let list1 = list(1, 2, 3); 

console.log(list1); // [1, 2, 3]

3. concat

array.concat([value1[, value2[, ...[, valueN]]]])

기존 배열을 변경하지 않고 새로운 배열을 만들거나, 요소를 추가 할 때 사용.
기존 배열에 valueN 을 붙여 반환.

예시

기본형 - 배열에 요소 추가 하기

var myFish = ['angel', 'clown', 'mandarin'];
var added = myFish.concat('sturgeon');

// myFish : ['angel', 'clown', 'mandarin']
// added : ['angel', 'clown', 'mandarin', 'sturgeon']

배열에 배열 요소 추가
- valueN이 배열이면 배열의 요소들이 복사 됨.
```
let arr = [1, 2];

console.log(arr.concat([3, 4]) ) // [1,2,3,4]
```

배열에 객체 요소 추가

valueN이 객체면 객체 통으로 복사 됨. (유사 배열도 동일함.)

let arr = [1, 2];

let arrayLike = {
  0: "something",
  length: 1
};

console.log( arr.concat(arrayLike) ); //[1, 2, {…}]

유사 배열 객체에 Symbol.isConcatSpreadable 속성 true 이면 배열로 취급함.
▶️객체 전체가 아닌 속성 값이 더해짐.

```jsx
let arr = [1, 2];

let arrayLike = {
  0: "something",
  1: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

console.log( arr.concat(arrayLike) ); // 1,2,something,else
```

4. forEach

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

currentvalue: 현재 처리할 배열 요소
index: 요소 인덱스 (옵션)
array: 배열 자신 (옵션)
thisArg: callback 실행할 때 this로 사용할 값. (옵션)
배열 요소 각각 실행
중간에 순회를 멈출 수 없음. 멈춰야 한다면 for문 사용 권장

예시

const items = ['item1', 'item2', 'item3'];
const copy = [];

items.forEach(function(item){
  copy.push(item);
});

5. indexOf, lastIndexOf

arr.indexOf(searchElement[, fromIndex])

arr.lastIndexOf(searchElement[, fromIndex])

fromIndex으로 시작 해 searchElement을 찾음
searchElement를 찾으면 해당 인덱스 반환, 못 찾으면 -1 반환
lastIndex 는 뒤에서 부터 찾음.

예시

var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var idx = array.indexOf('a');
var lidx = array.lastIndex('a');
console.log(idx) // 0 - 처음 일치하는 요소 해당 인덱스 값 반환
console.log(lidx) // 4 - 뒤에서부터 시작해서 처음 일치하는 요소 해당 인덱스값 반환

6. includes

arr.includes(valueToFind[, fromIndex])

fromIndex으로 시작 해 valueToFind을 찾음 (fromIndex는 옵션)
valueToFind를 찾으면 해당 true 반환, 못 찾으면 false 반환
NaN 도 처리 가능 ( indexOf, lastIndexOf 는 인식 못함. - === 연산을 기준으로 함.)

예시

[1, 2, 3].includes(2); // true
[1, 2, NaN].includes(NaN); // true

7. find

arr.find(callback(element[, index[, array]])[, thisArg])

element: 배열 요소
index: 요소 인덱스 (옵션)
array: 배열 자신 (옵션)
thisArg: callback 실행할 때 this로 사용할 값. (옵션)
객체로 이루어진 배열에서 특정 조건에 부합하는 객체 요소 찾을 때 사용.
조건에 부합하는첫번째 요소를 반환 함. 없으면 undefined 반환

예시

let fruits = [
  {id: 1, name: "apple"},
  {id: 2, name: "banana"},
  {id: 3, name: "mango"}
];

let fruit = fruits.find(item => item.id == 3);

alert(fruit.name); // mango

8. findIndex

arr.findIndex(callback(element[, index[, array]])[, thisArg])

리턴 값이 조건에 부합하는 첫번째 해당 요소의 인덱스, 없으면 -1 반환

9. filter

arr.filter(callback(element[, index[, array]])[, thisArg])

element: 배열 요소
index: 요소 인덱스 (옵션)
array: 배열 자신 (옵션)
객체로 이루어진 배열에서 사용,
조건이 true 면 유지, false 면 버림. - 새로운 배열로 반환

예시

var array = [1,2,3,4,5];
array.filter(function(x) {
  return x % 2 === 0;
}); // [2,4]

10. map

링크 참조

11. sort

arr.sort([compareFunction])

요소가 문자열로 취급되어 재정렬 됨. (기본-사전 편집순)
인자로 함수를 넣어 정렬 조건을 설정 할 수 있음.- 숫자 정렬은 compareFunction을 넣어 줘야 함.

예시

오름차순 (숫자)

arr.sort(function(a, b)  {
  return a - b;
});

내림차순 (숫자)

arr.sort(function(a, b)  {
  return b - a;
});

내림차순(문자)

arr.sort(function(a, b) {
  if(a < b) return 1;
  if(a > b) return -1;
  if(a === b) return 0;
});

12. reverse

arr.reverse()

배열의 요소를 역순으로 정렬
반환 값 : 재 정렬 된 배열

const a = [1, 2, 3];
console.log(a); // [1, 2, 3]

a.reverse();
console.log(a); // [3, 2, 1]

13. join

arr.join([separator])

separator 로 배열 요소를 합친 후 문자열로 반환

예시

separator가 빈 값이면 자동으로 콤마가 붙으면서 합쳐짐.

var a = ['바람', '비', '불'];
var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입

14. reduce, reduceRight

reduce: 링크 참조
reduceRight : reduce와 원리는 동일 한 대신, 순회 순서가 오른쪽 부터 시작 함.

15. every

every((element, index, array) => { ... } )

모든 요소가 조건을 만족 하면 true, 하나라도 안 맞으면 false 반환.
element: 배열 요소
index: 요소 인덱스 (옵션)
array: 배열 자신 (옵션)

예시

모든 체크 박스가 체크 되어 있는지 확인

const checkboxes = document.querySelectorAll('input[type=checkbox]')
const isThatAllChecked = Array.prototype.every.call(checkboxes, (x)=> {
	x.getAttribute("checked") === true
})

alert(isThatAllChecked);

16. some

some((element, index, array) => { /* … */ })

요소 중 하나라도 조건을 만족 하면 true, 다 안 맞으면 false 반환.
element: 배열 요소
index: 요소 인덱스 (옵션)
array: 배열 자신 (옵션)

예시

값이 배열 내에 존재 하는지 확인

const fruits = ["apple", "banana", "mango", "guava"];

function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}

checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true

17. Array.isArray

Array.isArray(obj)

배열은 객체에 속해 있기 때문에 typeOf() 로 찍어도 object로 나옴.
Array,isArray() 를 사용하면 객체와 배열 을 구분 지을 수 있음.

alert(typeof {}); // object
alert(typeof []); // object

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

참고 문헌

mangojang

한 걸음 한 걸음 계속 걷는 자가 일류다

이전 포스트

Map, Set

다음 포스트