[Javascript] 배열 메소드 정리

주영·2025년 1월 27일

JavaScript js

Javascript

목록 보기

3/15

유용한 method 일부를 정리하였다.

변경 메소드

배열을 변경시키는 메소드.

array.splice(startIndex, [deleteCount], [items1], [item2]...)

배열.splice(시작 인덱스, [삭제할 개수], [아이템]...)
요소를 추가/삭제/대체(replace)할 수 있다.
시작 인덱스부터 삭제할 개수개만큼 property를 삭제한 후 그 자리에 아이템들을 넣는다.
시작 인덱스만 넣을 경우 시작 인덱스 뒤의 모든 property를 삭제한다.
반환값은 splice된 배열이다.

let a = ["zero", "one", "two", "three", "four", "five", "six"];
console.log(a);
/*[
  'zero', 'one',
  'two',  'three',
  'four', 'five',
  'six'
]*/
a.splice(4);
console.log(a); //[ 'zero', 'one', 'two', 'three' ]
a.splice(1,2,"일","이",[1,2]);
console.log(a); //[ 'zero', '일', '이', [ 1, 2 ], 'three' ]

array.shift()

배열의 가장 첫 요소를 삭제한 후 반환한다.

array.pop()

배열의 가장 마지막 요소를 삭제한 후 반환한다.

array.unshift(value1, [value2]...)

배열의 맨 앞에 요소들을 추가한다.
잘 사용하지는 않으나 반환값으로는 추가한 후의 배열의 길이를 반환한다.

array.push(value1, [value2]...)

배열의 맨 뒤에 요소들을 추가한다.
잘 사용하지는 않으나 반환값으로는 추가한 후의 배열의 길이를 반환한다.

array.reverse()

배열의 순서를 뒤집는다.

array.sort([compareFunction])

배열을 정렬한 후 정렬한 배열을 반환한다.
아무런 인자도 없을 시에는 배열의 요소들을 모두 문자열로 인식하여 유니코드 내림차 순으로 정렬된다.

callback 함수다.
compareFunction은 정렬 순서를 정하는 함수가 들어간다.
정렬된 배열을 반환한다.

compareFunction(a, b)

compareFunction(a, b)은 두 개의 인자를 받고, 반환값이 있는 함수여야 한다.

반환값이 0보다 크다: a가 먼저 온다.
반환값이 0이다: 순서가 변하지 않는다.
반환값이 0보다 작다: b가 먼저 온다.

const a = [3, 5, 56, 13, 200, 9];

// 유니코드 순
a.sort();
console.log(a);
//[ 13, 200, 3, 5, 56, 9 ]

// 오름차순
a.sort((a, b) => a - b);
console.log(a);
//[ 3, 5, 9, 13, 56, 200 ]

// 내림차순
a.sort((a, b) => a - b);
console.log(a);
//[ 200, 56, 13, 9, 5, 3 ]

비변경 메소드

배열을 변경시키지 않는 메소드.

array.slice(startIndex, endIndex)

startIndex부터 endIndex전까지의 배열을 반환한다.

endIndex는 포함이 되지 않는다는 걸 명심하자.
문자열에서도 사용할 수 있다.

let a = ["zero", "one", "two", "three", "four", "five", "six"];
console.log(a.slice(1,4)); //[ 'one', 'two', 'three' ]

array.indexOf(item)

배열에서 item이 처음 발견된 index를 반환한다. item을 찾을 수 없는 경우 -1을 반환한다.

문자열에서도 사용할 수 있다.

array.lastIndexOf(item)

배열에서 item이 뒤쪽에서부터 처음 발견된 index를 반환한다. item을 찾을 수 없는 경우 -1을 반환한다.

문자열에서도 사용할 수 있다.

array.includes(item)

배열에 item(value)가 존재하는지 boolean 값을 반환한다.

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

배열에 value(배열 또는 값)을 덧붙인 배열을 반환한다. 주로 여러 배열을 합칠 때 사용한다.

array.join([seperator])

배열의 모든 요소를 문자열로 합쳐 반환한다. seperator(문자열)이 있다면 배열 요소 사이사이에 seperator를 넣어 합쳐 반환한다.

array.reduce(callbackFn, [initialValue])

배열을 차례로 돌면서 callBackFn을 실행한다. callBackFn이 마지막으로 반환한 값을 반환한다. (callBackFn의 이전 반환값을 사용할 수 있다는 것이 특징이다.)

callbackFn 함수가 들어간다.
inititalValue는 callbackFn가 처음 호출될 때의 accumulator로 들어가는 값. 없을 경우 배열의 첫 요소(0번 index의 요소)가 들어가며, 0(index)부터 시작하는 것이 아닌 1(index)부터 시작한다.

callBackFn(accumulator, element, [index], [array])

callBackFn은 두 개 이상의 인자를 받고, 반환값이 있는 함수여야 한다. 익명 함수로 많이 쓴다.

accumulator는 이전 요소의 callbackFn에서 반환해준 값을 받는다.
element는 배열의 각 요소를 받는다.
index는 배열 요소의 index를 받는다.
array는 반복되는 배열 자체를 받는다.

array.forEach(callBackFn)

배열을 차례로 돌면서 callBackFn을 실행한다. 반환값은 없다(undefined).

배열이 줄어들면 줄어든 배열 길이만큼 반복하지만, 배열이 늘어나도 처음 배열 길이 초과로 반복하지 않는다.

callBackFn(element, [index], [array])

callBackFn은 한 개 이상의 인자를 받는 함수여야 한다. 익명 함수로 많이 쓴다.

element는 배열의 각 요소를 받는다.
index는 배열 요소의 index를 받는다.
array는 반복되는 배열 자체를 받는다.

array.map(callBackFn)

배열을 차례로 돌면서 callBackFn을 실행한다. 돌면서 callBackFn에서 받아온 반환값을 배열로 반환한다.

배열이 줄어들면 줄어든 배열 길이만큼 반복하지만, 배열이 늘어나도 처음 배열 길이 초과로 반복하지 않는다.

callBackFn(element, [index], [array])

callBackFn은 한 개 이상의 인자를 받고, 반환값이 있는 함수여야 한다. 익명 함수로 많이 쓴다.

element는 배열의 각 요소를 받는다.
index는 배열 요소의 index를 받는다.
array는 반복되는 배열 자체를 받는다.