[JS] Array 메소드 정리

ssumniee·2021년 6월 28일
0

String.split()

split() 메소드는 정해진 구분자(seperator)를 기준으로 string 객체를 여러 개의 문자열로 나눈다. 나눠진 문자열을 담은 배열을 반환한다.

사용법

str.split(seperator);
str.split(seperator, limit);

첫번째 매개변수, seperator

  • 원본 문자열을 끊을 부분을 나타내는 문자열
  • 생략되거나 원본 문자열에 등장하지 않는 경우, 원본 문자열을 유일한 요소로 갖는 배열을 반환한다.
  • 빈 문자열일 경우에는 원본 문자열의 모든 문자를 요소로 갖는 배열을 반환한다.

두번째 매개변수, limit

  • 끊어진 문자열 갯수의 최대 개수를 나타내는 정수
  • limit 매개변수가 전달되면, split() 메소드는 seperator가 등장할 때마다 원본 문자열을 끊다가 배열의 요소 개수가 limit과 같아지면 동작을 멈춘다.
  • 원본 문자열 끝까지 메소드가 실행되었음에도 반환되는 배열의 요소 개수가 limit보다 작을 수 있다.

Array.join()

join() 메소드는 배열의 모든 요소를 연결하여 만든 하나의 문자열을 반환한다. 요소로 갖는 배열을 구분자를 사이에 두며 하나의 문자열로 잇는 메소드이다.

사용법

arr.join(separator);

매개변수, seperator

  • 배열의 각 요소를 구분하는 기준이 되는 문자열 (필요한 경우 문자열로 변환)
  • 생략된 경우 배열의 요소들이 쉼표로 구분된다.
  • 빈 문자열이면 사이에 어떠한 문자도 없이 요소들이 그대로 연결된다.

Array.shift() & Array.unshift()

shift() 메소드는 배열의 첫 번째 요소를 제거한 후, 제거된 요소를 반환한다.
빈 배열인 경우 undefined를 반환한다.

unshift() 메소드는 새로운 요소를 배열의 맨 앞에 추가하고, 새로운 길이를 반환한다.

두 메소드 모두 원본 배열을 수정하는 mutable 메소드이다.
사용 후 원본 배열의 길이가 달라진다.

사용법

arr.shift(); // arr[0] : 제거된 요소
arr.unshift(...elementN); // arr.length + N : 새로운 배열의 길이

Array.push() & Array.pop()

pop() 메소드는 배열의 마지막 요소를 제거한 후, 제거된 요소를 반환한다.
빈 배열인 경우 undefined를 반환한다.

push() 메소드는 하나 이상의 새로운 요소를 배열의 끝에 추가하고, 새로운 길이를 반환한다.

두 메소드 모두 원본 배열을 수정하는 mutable 메소드이다.
사용 후 원본 배열의 길이가 달라진다.

사용법

arr.pop(); // arr[arr.length - 1] : 제거된 요소
arr.push(...elementN); // arr.length + N : 새로운 배열의 길이

Array.concat()

concat() 메소드는 인자로 주어진 배열 또는 값들을 기존 배열에 합친 새 배열을 반환한다.
매개변수 없이 사용될 경우, 원본 배열의 얕은 복사본을 반환한다.

원본 배열을 변경하지 않는 immutable 메소드이다.
원본 배열과 아무런 상관이 없는 새로운 배열을 만들어 반환한다.

사용법

array.concat(value); // 매개변수 : 값
array.concat([value1, value2, value3]); // 매개변수 : 배열

Array.slice()

slice() 메소드는 배열의 beginIdx 부터 endIdx 까지에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. (이 때 endIdx 번째 원소는 포함되지 않는다)

원본 배열을 변경하지 않는 immutable 메소드이다.
원본 배열과 아무런 상관이 없는 새로운 배열을 만들어 반환한다.

사용법

arr.slice(beginIdx); // 매개변수 1개 사용
arr.slice(beginIdx, endIdx); // 매개변수 2개 사용

첫번째 매개변수, beginIdx

  • 추출 시작점이 되는 요소의 인덱스를 의미
  • 음수일 경우 추출 시작 요소를 배열의 끝에서부터 세어 결정한다.
  • 값이 생략된 경우에는 0을 추출 시작점으로 한다.
  • beginIdx배열의 길이보다 큰 경우에는 빈 배열을 반환한다.

두번째 매개변수, endIdx

  • 추출 종료점이 되는 요소의 인덱스를 의미 (endIdx 는 제외하고 추출)
  • 음수일 경우 추출 종료 요소를 배열의 끝에서부터 세어 결정한다.
  • 값이 생략된 경우에는 arr.length 를 추출 종료점으로 한다. (배열 맨 끝까지 추출)
  • endIdx배열의 길이보다 큰 경우에도 배열의 맨 끝까지 추출한다.

Array.splice()

splice() 메소드는 배열의 기존 요소를 삭제, 교체하거나 새로운 요소를 추가하여 배열의 내용을 변경한다.

원본 배열을 수정하는 mutable 메소드이다.

사용법

array.splice(start);
array.splice(start, deleteCount);
array.splice(start, deleteCount, item1, item2, ...);

첫번째 매개변수, start

  • 배열의 변경을 시작할 인덱스를 의미
  • 배열의 길이 보다 경우 실제 시작 인덱스는 배열의 길이로 설정한다.
  • 음수일 경우 배열의 끝에서부터 요소를 세어 변경 시작점을 결정한다.
  • 값의 절대값배열의 길이 보다 경우 0으로 설정된다.

두번째 매개변수, deleteCount

  • 배열에서 제거할 요소의 수를 의미
  • 값이 생략되었거나 변경 시작점 이후에 존재하는 요소 갯수(array.length - start)보다 큰 경우 start 부터의 모든 요소를 제거한다.
  • 0보다 작은 값일 경우 어떤 요소도 제거하지 않는다. 이러한 경우, 최소 하나 이상의 새로운 요소(itemN)를 지정해야 한다.

세번째 매개변수, itemN

  • 배열에 추가할 요소
  • 값이 주어지지 않으면 splice() 메소드는 요소를 제거하는 동작만 실행한다.
profile
개발에 뛰어든 UX/UI 디자이너

0개의 댓글