[js] 배열 내장 메서드(1)_ slice , splice ✂️, fill

배열에서 원하는 요소만을 추가하거나 삭제할때 보통 이 두 함수를 많이 쓴다

근데 쓸때마다 헷갈려서 아예 개념을 확실하게 챙겨야겠다! 

 

✂️ slice

배열에서 일 부분을 싹둑 잘라내어 새로운 배열을 반환할때 사용한다.

 

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

const value = arr.slice(1,3);
console.log(value); // [2,3]
console.log(arr); // [1,2,3,4] 원본 배열은 그대로 유지됨!

 

slice(처음요소, 마지막요소) 에서 항상 마지막요소의 인덱스 -1 까지만 추출한다. 

 

ex> 페이지네이션을 구현하는 코드의 어느 한 부분

 async findAllWithPagination({
    offset,
    limit,
  }: {
    offset: number;
    limit: number;
  }): Promise<{
    totalCount: number;
    prev: string | null;
    results: IPost[];
    next: string | null;
  }> {
    const values = Array.from(MemoryPostRepository.store.values());
    return {
      totalCount: values.length,
      results: values.slice(offset, offset + limit),
      prev:
        offset - limit >= 0 ? `?offset=${offset - limit}&limit=${limit}` : null,
      next:
        offset + limit < values.length
          ? `?offset=${offset + limit}&limit=${limit}`
          : null,
    };
  }

 

 

      results: values.slice(offset, offset + limit),

 

values배열에서 offset 요소에서 offset+ limit를 더한 요소의 이전 요소까지만 싹둑 잘라내서 반환!

 

✂️splice

원하는 위치에 요소를 추가하거나 삭제할때 사용한다.

 

1. 삭제

array.splice(삭제 요소, 마지막요소)

삭제 요소의 인덱스부터 마지막요소의 인덱스까지 포함해서 삭제된다.

const arr= [1,2,3,4,5]
arr.splice(2,1); //[3]이 삭제가되겠지.

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

const arr= [1,2,3,4,5]
arr.splice(2,2); // [3,4]가 삭제가 되겠지

console.log(arr); // [1,2,5]

 

2. 삭제+ 추가

const A = [10,20,30,40]

A.splice(2,2,4,5); //[30,40]이 삭제가 되겠지.
console.log(A); // [10,20,4,5] : 삭제된 [30,40]에 [4,5]가 추가됨.

 

따라서 둘의 큰 차이점은 slice는 원본배열을 변경하지 않고 유지한채 새로운 배열을 반환 하고, 

splice는 원본배열을 변경하고 삭제된 요소를 반환한다! 

 

 

🍯 fill

시작 index부터 마지막 index 전까지 인자로 받은 값으로 채운다!

every( value,start,end)
value: 채울 값
start,end에 아무런 값이 없을 경우엔 default값인 0이 들어간다.

 

const arr =['A','B','C','D']

console.log(arr.fill(2,3)); // ['A','B',3, 3]

 return HttpResponse.json(
      new Array(100).fill(0).map(() => {
        return new UserResponseDTO({
          id: uuid(),
          email: faker.internet.email(),
          role: "user",
          profile: {
            id: uuid(),
            thumbnail: faker.image.avatar(),
            name: faker.person.firstName(),
          },
        });

 

🔎잠깐!  map이란?

arr.map(callback(currentValue, index, array));

배열의 첫 번째 요소부터 마지막 요소까지 하나씩 순회하여 새로운 배열을 반환!

매개변수로 callback함수를 받으며 그 인자에는 현재값, 인덱스, 배열이 들어간다. 이때, 인덱스와 배열은 선택사항이라고 한다!

 

 

[10,20,30].map((v,i) => ( v + i));

//결과: [10, 21, 32]

 v = 배열, i = 인덱스   (0,1,2) 

즉, 새로운 배열을 반환한다! 

 

new Array(100).fill(0).map(() => {}

 

Array의 길이가 100인 배열을 만들어 0으로 꽉 채운 후에 map()을 실행한다.

위 예시로 보면 총 100개의 UserResponseDTO 객체가 담긴 배열을 만들 수 있는 것이다.

이때 fill(0)이 아니라 fill()로 넣으면 undefined로 채워지며 결과값은 똑같다!