본문 바로가기

DEVELOP/Javascript

[JavaScript] 배열의 메소드

반응형

  배열은 리스트와 비슷한 객체이며, 탐색 및 변형을 가능하게 하는 다양한 메소드를 가진다. 다음 내용은 배열을 다룰 때 자주 사용되는 메소드들에 대해 간단하게 정리한 것이다.

 

 

1. 배열 끝에 항목 추가: array.push()  mutable

  let arr = ['a','b','c'];
  arr.push('d');
  // ['a','b','c','d']

    push는 하나 혹은 그 이상의 요소를 배열의 끝에 추가해주는 메소드로, 배열의 새로운 길이를 리턴한다.

 

 


 

2. 배열 끝에서부터 항목 제거: array.pop()  mutable

  let arr = ['apple', 'banana', 'melon'];
  fruit.pop();
  // ['apple', 'banana']

    pop은 배열에서 마지막 요소를 제거하고, 해당 요소를 리턴한다. pop 메소드는 배열의 길이를 변화시킨다.

 


 

3. 배열 앞에서부터 항목 제거: array.shift()  mutable

  let arr = ['a','b','c'];
  arr.shift();
  // ['a','b']

    shift는 배열로부터 첫번째 요소를 제거하고, 그 요소를 리턴한다. shift 메소드는 배열의 길이를 변화시킨다.

 


 

4. 배열 앞에 항목 추가: array.unshift(item)  mutable

  let arr = ['b','c','d'];
  arr.unshift('a');
  // ['a','b','c','d'];

    unshift는 하나 혹은 그 이상의 요소를 배열의 시작 지점에 추가하고, 배열의 새로운 길이를 리턴한다.

 


 

5. 배열 안 항목의 인덱스 찾기: array.indexOf(searchElement)  immutable

  let arr = ['apple','mango','melon','grape'];
  let idx = arr.indexOf('melon');
  // 2

    indexOf는 주어진 요소가 배열 내에 존재할 때 해당하는 첫번쨰 인덱스를 리턴하며, 만약 존재하지 않을 경우에는 -1을 리턴한다.

 


 

6. 인덱스 위치에 있는 항목 제거하기: array.splice(startIdx, deleteCount)  mutates

 

6.1. 인덱스 위치에서부터 한 개의 항목을 제거

  let arr = ['this','is','mine','yours'];
  let removedItem = arr.splice(3,1);
  // ['this','is','mine']

 

6.2. 인덱스 위치에서부터 여러 개의 항목을 제거

  let arr = ['this','is','mine','yours'];
  let removedItem = arr.splice(0,2);
  // ['mine','yours']

   splice는 존재하는 요소를 지우거나 추가하여 배열의 내용을 바꾼다.  

 

 


 

7.  배열 복사하기: array.slice(start, end)  immutable

  let arr = ['1','2','3'];
  let shallowCopy = arr.slice();
  // ['1','2','3']

 slice를 이용한 배열의 복사는 shallow copy(얕은 복사)에 해당한다. slice는 설정한 범위 내의 배열을 새로운 배열 객체로 복사하며, 따라서 기존의 배열은 변화하지 않는다. 기존 배열의 값을 바꾸고 싶을 때에는 deep copy를 사용해야만 한다.

 

 

 

 

 

참고: MDN, Does it mutate?

반응형