배열과 메소드

양주영·2021년 8월 25일

JavaScript

javascript

목록 보기

7/42

요소 추가, 제거 메서드

push, pop, shift, unshift 외에 요소 추가와 제거에 관련된 메서드를 알아보자.

1. splice
2. slice
3. concat

- splice

배열에서 요소 하나만 지우고 싶을 때 사용
arr.splice(start)는 요소를 자유자재로 다룰 수 있게 해준다. 이 메서드는 요소 추가, 삭제, 교체가 모두 가능하다.

arr.splice(index[, deleteCount, elem1, ...., elemN])

첫번째 매개변수에는 어느 인덱스를 기준으로 할지 기준 인덱스를 넣어준다.
두번째 매개변수로는 기준 인덱스부터 몇개를 삭제할지 갯수를 적어준다.
세번째 매개변수부터는 삭제된자리에 들어갈 요소들을 작성해줄 수 있다.

// 요소 삭제
let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거

alert( arr ); // ["I", "JavaScript"]



//요소 교체
let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]



//요소 추가
let arr = ["I", "study", "JavaScript"];

// 인덱스 2부터
// 0개의 요소를 삭제합니다.
// 그 후, "complex"와 "language"를 추가합니다.
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

음수 인덱스도 사용가능하다.
slice메서드 뿐만 아니라 배열 관련 메서드엔 음수 인덱스를 사용할 수 있다. 이때 마이너스 부호 앞의 숫자는 배열 끝에서부터 센 요소 위치를 나타낸다.

let arr = [1, 2, 5];

// 인덱스 -1부터 (배열 끝에서부터 첫 번째 요소)
// 0개의 요소를 삭제하고
// 3과 4를 추가합니다.
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

- slice

배열의 일정 범위를 잘라 새로운 배열로 리턴하는 메서드

arr.slice(startIndex[, endIndex]);

시작 인덱스부터 끝인덱스 전까지 요소들을 잘라 새로운 배열로 리턴한다.
끝 인덱스를 생략 시 배열의 끝까지 자르게 된다.
start와 end는 둘 다 음수일 경우엔 배열 끝에서부터의 요소 개수를 의미한다.

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))

alert( arr.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

- concat

배열의 요소를 사용해 새로운 배열을 만들거나 또는 기존 배열에 다른 배열을 붙일 때 사용한다.

arr.concat(arg1, arg2…)

매개변수로는 배열이나 값이 올 수 있고, 매개변수의 갯수는 제한이 없다.
메서드를 호출하게 되면 arr의 모든 요소와 arg1, arg2... 에 속한 모든 요소를 한데 모은 새로운 배열이 반환된다.

let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4]) ); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

concat 메서드는 제공받은 배열의 요소를 복사해 활용한다. 객체가 인자로 넘어오면 객체는 분해되지 않고 통으로 복사되어 더해진다.

let arr = [1, 2];

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

alert( arr.concat(arrayLike) ); // 1,2,[object Object]

forEach로 반복작업 하기

arr.forEach는 주어진 함수를 배열 요소 각각에 대해 실행한다.

arr.forEach(function(item, index, array) {
  // 요소에 무언가를 할 수 있습니다.
});

아래는 인덱스 정보까지 더해서 출력해주는 좀 더 정교한 코드이다.

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

배열 탐색하기

배열 내 무언가를 찾고 싶을 때 쓰는 메서드

1. indexOf, lastIndexOf와 includes
2. find와 findIndex
3. filter

- indexOf, lastIndexOf와 includes

arr.indexOf(item, from)는 인덱스 from부터 시작해 item(요소)을 찾는다. 요소를 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못했으면 -1을 반환한다. (인덱스 찾기)
arr.lastIndexOf(item, from)는 위 메서드와 동일한 기능을 하는데, 검색을 끝에서부터 시작한다는 점만 다르다.
arr.includes(item, from)는 인덱스 from부터 시작해 item이 있는지를 검색하는데, 해당하는 요소를 발견하면 true를 반환한다.

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

요소의 정확한 위치가 아니라 요소의 존재여부만 확인하고 싶다면 arr.includes를 사용하는 게 좋다.

includes는 NaN도 제대로 처리하지만, indexOf/lastIndexOf는 처리하지 않는다.

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 (완전 항등 비교 === 는 NaN엔 동작하지 않으므로 0이 출력되지 않습니다.)
alert( arr.includes(NaN) );// true (NaN의 여부를 확인하였습니다.)

- find와 findIndex

arr.find(fn)

let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
  // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});

요소 전체를 대상으로 함수가 순차적으로 호출된다.

item – 함수를 호출할 요소
index – 요소의 인덱스
array – 배열 자기 자신

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

위처럼 item => item.id == 1 find 안의 함수가 인자를 하나만 가지고 있다는 점에 주목하자. 가장 많이 사용되는 패턴이다.

- filter

filter()메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
filter는 find와 문법이 유사하지만, find()는 현재 선택된 요소 집합의 내부를 대상으로, filter()는 선택된 현재집합을 대상으로 배열을 반환한다.

let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});

예시 :

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

정리

요소를 더하거나 지우기
- push(...items) : 맨 끝에 요소 추가하기
- pop() : 맨 끝 요소 추출하기
- shift() : 첫 요소 추출하기
- unshift(...items) : 맨 앞에 요소 추가하기
- splice(pos, deleteCount, ...items) : pos부터 deleteCount개의 요소를 지우고, items 추가하기
- slice(start, end) : start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
- concat(...items) : 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌
원하는 요소 찾기
- indexOf/lastIndexOf(item, pos) : pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함
- includes(value) : 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
- find/filter(func) : func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함
- findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함
배열 전체 순회하기
- forEach(func) : 모든 요소에 func을 호출함. 결과는 반환되지 않음