[JS] Array Methods

욱이로그·2022년 10월 29일

자바스크립트를 사용할 때 배열을 정말 많이 사용하는 거 같은데 Method들 사용방법이 사용할 때 마다 항상 헷갈리고 어려워서 이번 기회에 정리를 해보려고 한다!
잘 알고있는 Method는 생략했다.

생략 Method)

concat
forEach
reverse (역순)
toString (배열 -> 문자열)
split

🎈 pop, push

pop: 배열 맨 뒷부분의 값을 삭제
push: 배열 맨 뒷부분에 값을 삽입

const arr = [ 1, 2, 3, 4 ];
arr.pop();   // [ 1, 2, 3 ]
arr.push(5);   // [ 1, 2, 3, 5]

🎈 shift, unshift

shift: 배열 앞 부분에 값 삭제
unshift: 배열 앞 부분에 값 삽입

const arr = [ 1, 2, 3, 4 ];
arr.unshift( 0 );   // [ 0, 1, 2, 3, 4 ]
arr.shift();   // [ 1, 2, 3, 4 ]

🎈 splice, slice

splice: 배열의 특정 위치에 요소를 추가하거나 삭제
( index, 제거할 요소 개수, 배열에 추가될 요소 )

const arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 3, 2 );   3번째 인덱스에서부터 2개 제거
console.log( arr ); // [ 1, 2, 3, 6, 7 ]   3번째 인덱스에서부터 2개 제거

const arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 2, 1, "a", "b");   // 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가
console.log( arr ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ]

slice: 배열의 시작 index부터 종료 index까지에 대한 shallow copy를 새로운 배열 객체로 반환
(단, 종료 index는 포함 안함)
( startIndex, endIndex )

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

🎈 every

배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트

const arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const isEven = function( value ) {
  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.every( isEven ) );   // false

🎈 some

지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복
하나라도 true이면 true 반환

const arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const isEven = function( value ) {
  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.some( isEven ) );   // true

🎈 map, filter, reduce (중요!!)

map: 배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

const arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const isEven = function( value ) {
  return value % 2 === 0;
};
const newArr = arr.map( isEven );
console.log( newArr ); 
// [ false, true, false, true, false, true, false, true, false, true ]

filter: 지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

const arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const isEven = function( value ) {
  return value % 2 === 0;
};
const newArr = arr.filter( isEven );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

reduce: 누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용

const arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
const value = arr.reduce( function( previousValue, currentValue, index ) {
  return previousValue + currentValue;
});
console.log( value );   // 55

🎈 join

배열 원소 전부를 하나의 문자열로 합친다.

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

🎈 valueOf

toString()과 비슷하지만 배열을 반환한다.

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

🎈 sort

배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬한다. 모든 원소를 문자열로 취급해 사전적으로 정렬

const arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort();
console.log( arr );   // [ 1, 10, 11, 12, 13, 2, 3, 5 ];

// sort에 함수로 정렬
const arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort( function( a, b ) {
  return a - b;
})
console.log( arr ); // [ 1, 2, 3, 5, 10, 11, 12, 13 ]

http://blog.302chanwoo.com/2017/08/javascript-array-method/
https://velog.io/@younoah/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4%EA%B4%80%EB%A0%A8-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%B4%9D%EC%A0%95%EB%A6%AC