TIL: 19일차 "Array method -2-"

전 포스트에 이어서 배열에 관련된 method에 대해 다뤄보려고 한다.

Array.slice

Array.slice는 인자로 배열의 일부분을 전달 받는데, 전달 받은 부분을 복사하여 반환하는 특징이 있다.
원본 배열은 변하지 않으며,

const arrA = [1,2,3,4];

let result = arrA.slice(1,2);
console.log(result); // [2] 출력

과 같이 사용 되는데, 첫번째로 지정하는 인수는 기준점, 즉 특정 인덱스를 입력 받고, 두번째 인수는 입력 되는 인덱스 바로 직전의 값을 반환한다.
입력 되는 두번째 인덱스에 해당 하는 값은 반환 되지 않기에, 위의 예에서는 [2]만 출력이 되는것이다.

아무것도 입력하지 않을때는 해당 배열을 모두 복사하며,
음수값이 입력 될 경우엔 마지막 요소부터 카운트를 시작하여 복사한다.
전달 되는 인수가 하나라면, 해당 요소 이후의 모든 값을 복사한다.

Array.splice

Array.splice는 기존의 배열에서 요소를 제거하고, 그 위치에 새로운 요소를 추가하는 method다. 배열 중간에 새로운 요소를 추가할때도 사용 되며, 이 method는 원본 배열을 변형시키는 method이다.

주로 배열에서 특정 요소를 삭제 하는데 사용 되는데, 첫번째로 전달 받는 인자는 기준이 되는 인덱스, 두번째는 기준점으로부터 삭제 시킬 요소의 숫자이다.
하나의 옵션을 더 넣을 수 있는데, 이때 추가 되는 세번째 인자는 삭제 된 자리에 들어갈 새로운 값을 의미한다.

const arrA = [1,2,3,4,5];
const result = arrA.splice(1,3);

console.log(result); // [2,3,4] 출력
console.log(arrA); // [1,5]출력

위와 같이 사용한다.

Array.sort

Array.sort는 해당 배열을 순서에 맞게 재정렬 하는 method로, reverse와 반대로 오름차순으로 정렬한다.
문자열등도 유니코드에 맞게 재정렬 시키는 특징이 있다.
다음과 같이 동작한다.

const arrA = [5,2,3,4,1]
const result = arrA.sort();

console.log(result); // [1,2,3,4,5] 출력

Array.forEach

Array.forEach는 함수를 인자로 받는 method고, 해당 배열 요소 모두를 인자로 받는 함수의 인자로서 사용하는 method이다.

const arrA = [1, 2, 3];
let arrB = [];

for (let i = 0; i < arrA.length; i++) {
  arrB.push(arrA[i] ** 2);
}

console.log(arrB); // [ 1, 4, 9 ] 출력

위와 같이 동작한다.
또한, 원본 배열을 변화 시키지 않는다는 특징을 가지고 있다.

Array.map

Array.map 또한 인자로서 함수가 들어가게 되는데, forEach는 함수를 실행하는 method라면, map은 인자로 받은 함수를 실행 한 뒤, 그 결과값을 모아서 새로운 배열을 생성하는 method이다.

const arrA = [1,2,3,4,5];
function mapper(i) {
  return i * 2
};
let result = arrA.map(mapper);
console.log(result); // [2,4,6,8,10] 출력

위와 같이 동작한다.

Array.filter

Array.filter는 조금 특이하게 동작하는데, 인자로 받은 함수의 실행결과가 true인 요소들만 모아서 배열을 만들게 된다.
즉 배열에 if문을 적용한다고 생각하면 된다.

const result = [1, 2, 3, 4, 5].filter(function (item, index, self) {
  console.log(`[${index}] = ${item}`);
  return item % 2;
});

console.log(result); // [ 1, 3, 5 ] 출력

위와 같이 동작한다.
간단히 말하자면, 특정한 조건에 맞는 요소들만 모아서 걸러내는 method인것이다.

양이 많기에, 다음 포스트를 마지막으로 배열을 마치도록 하겠다.
물론 실제로 사용하는 방법은 다양하기에, 직접 사용해보면서 익숙해지는것이 최선일것이다.