아주 중요한 배열 - 메서드

배열의 메서드에 대해 알아보자!

배열 메서드

배열에는 원본 배열을 직접 변경하는 메서드(mutator method)와 새로운 배열을 생성해 반환하는 메서드(accessor method)가 있다.

원본 배열: 배열 메서드를 호출한 배열 = 배열 메서드의 구현체 내부에서 this가 가리키는 객체

 

mutator method

Array.prototype.push

인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환

마지막 요소로 추가할 요소가 하나뿐이라면 length 프로퍼티를 사용해 배열에 마지막에 요소 직접 추가 가능

push 대신 스프레드 문법을 사용하면 함수 호출 없이 표현식으로 마지막에 요소 추가 가능

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

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

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

 

Array.prototype.pop

원본 배열의 마지막 요소를 제거하고 제거한 요소를 반환

원본 배열이 빈 배열이면 undefined 반환

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

• 스택 : push + pop
  데티어를 마지막에 밀어넣고 마지막에 밀어 넣은 데이터를 먼저 꺼내는 후입선출(LIFO) 방식의 자료구조
  가장 마지막에 밀어 넣은 최신 데이터를 먼저 취득
  스택에 데이터를 밀어 넣는 것: push
  스택에서 데이터를 꺼내는 것: pop

 

Array.prototype.unshift

인수로 전달 받은 모든 값을 원본 배열의 선두에 요소로 추가, 변경된 length 프로퍼티 값을 반환

push와 마찬가지로 스프레드 문법 사용 시 표현식으로 선두에 요소 추가 가능

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

 

Array.prototype.shift

원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환

원본 배열이 빈 배열이면 undefined 반환

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

• 큐: unshift + shift
  데이터를 마지막에 밀어 넣고 가장 먼저 밀어 넣은 처음 데이터를 먼저 꺼내는 선입 선출(FIFO) 방식의 자료 구조
  데이터를 밀어 넣은 순서대로 취득

 

Array.prototype.splice

원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거

3개의 매개변수

• start: 원본 배열의 요소를 제거하기 시작할 인덱스, -1dlaus 마지막 요소를 가리킨다.
• deleteCount: start부터 제거할 요소의 개수
• items: 제거한 위치에 삽입할 요소들의 목록

const arr = [1, 2, 3, 4];
const result = arr.splice(1, 2, 20, 30);
console.log(result);	// [2, 3]
console.log(arr);	// [1, 20, 30, 4]

배열에서 특정 요소를 제거하려면 indexOf 메서드를 통해 특정 요소의 인덱스를 취한 다음 splice 메서드 사용

filter 메서드를 사용해 특정 요소 제거 가능

 

Array.prototype.reverse

원본 배열의 순서를 반대로 뒤집는다.

반환값은 변경된 배열이다.

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

 

Array.prototype.fill

인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.

두 번째 인수: 요소 채우기를 시작할 인덱스

세 번째 인수: 요소 채우기 멈출 인덱스

요소를 하나의 값만으로 채울 수 밖에 없다는 단점

Array.from 메서드 사용 시 두 번째 인수로 전달한 콜백 함수를 통해 요소 값 만들면서 배열을 채울 수 있다.

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

 

accessor method

Array.isArray

Array 생성자 함수의 정적 메서드

전달된 인수가 배열이면 true, 배열이 아니면 false를 반환

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

 

Array.prototype.indexof

원본 배열에서 인수로 전달된 요소를 검색해 인덱스 반환, 배열에 특정요소가 존재하는지 확인 시 유용

원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스 반환

원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1 반환

두 번째 인수는 검색을 시작하는 인덱스로 생략 시 처음부터 검색한다.

const arr = [1, 2, 2, 3];
arr.indexOd(2);	// 1 <= arr에서 2가 첫 번째로 겁색된 요소의 인덱스 반환
arr.indexOf(4);	// -1 <= arr에 4가 없으므로 -1 반환
arr.indexOf(2, 2);	// 2

Array.prototype.includes 사용 시 가독성이 더 좋다.

 

Array.prototype.concat

인수로 전달된 값들을 원본 배영릐 마지막 요소로 추가한 새로운 배열을 반환

인수로 전달한 값이 배열인 경우 배열을 해체해 새로운 배열의 요소로 추가

push와 unshift 메서드 대체 가능

스프레드 문법으로 대체 가능

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

 

Array.prototype.slice

인수로 전달된 범위의 요소들을 복사하여 배열로 반환

2 개의 매개 변수

• start: 복사를 시작할 인젝스
• end: 복사를 종료할 인덱스

인수 모두 생략 시 원본 배열의 얕은 복사본을 생성해 반환

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

Array.from 메서드를 사용해 유사 배열 객체 또는 이터러블 객체를배열로 변환 가능

 

Array.prototype.join

원본 배열의 모든 요소를 문자열로 변환한 후 인수로 전달 받은 문자열(=구분자로 연결한 문자열)을 반환

기본 구분자는 콤마(,)다.

const arr = [1, 2, 3, 4];
arr.join();	// '1,2,3,4'

 

Array.prototype.includes

배열 내에 특정 요소가 포함되어 있는지 확인하여 true 또는 false 반환

펏 번째 인수: 검색할 대상

두 번째 인수: 검색을 시작할 인덱스

const arr = [1, 2, 3];
arr.includes(1,1);	// false

 

Array.prototype.flat

인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화

중첩 배열을 평탄화할 깊이를 인수로 전달 가능

 

 

본 게시글은 모던자바스크립트 Deep Dive - 자바스크립트의 기본 개념 책을 읽고 정리했습니다.
더 자세한 내용은 책을 구매해보시길 권장드립니다!