FrontEngineer JungBam

javascript 메소드에 대한 고찰, slice() 의 활 본문

자바스크립트 개념

javascript 메소드에 대한 고찰, slice() 의 활

정밤톨 2023. 11. 12. 00:31

JavaScript에서 배열을 다루는 데는 여러 가지 메소드가 사용됩니다. 이들 중 일부는 원본 배열을 직접 수정(modify)하는 반면, 다른 일부는 원본 배열을 변경하지 않고 새 배열을 반환(return)합니다. 이러한 차이를 이해하는 것은 중요하며, 때로는 원본 배열을 보존하기 위해 slice() 메소드를 활용하는 방법도 필요합니다.

원본 배열을 수정하는 메소드

  1. push(): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.
  2. pop(): 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다.
  3. shift(): 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
  4. unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.
  5. reverse(): 배열의 요소 순서를 반전시킵니다.
  6. sort(): 배열의 요소를 정렬합니다.

이 메소드들은 모두 원본 배열에 직접적인 영향을 미칩니다. 예를 들어, reverse() 메소드는 배열의 요소 순서를 바꾸고, 원본 배열 자체도 변경합니다.

원본 배열을 변경하지 않는 메소드

  1. concat(): 하나 이상의 배열을 합쳐 새 배열을 생성합니다.
  2. join(): 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
  3. slice(): 배열의 일부분을 얕은 복사하여 새 배열 객체를 반환합니다.
  4. map(): 배열 내 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새 배열을 반환합니다.
  5. filter(): 테스트를 통과하는 모든 요소를 모아 새 배열을 반환합니다.

이 메소드들은 원본 배열을 변경하지 않고, 새 배열 또는 다른 값을 반환합니다. 예를 들어, map() 메소드는 각 요소에 대해 함수를 적용한 결과를 모은 새 배열을 반환합니다.

slice() 메소드의 활용

slice() 메소드는 원본 배열을 변경하지 않고 배열의 일부분을 얕은 복사하여 새 배열을 만드는 데 사용됩니다. 이 메소드는 원본 배열을 보존하면서 배열의 특정 부분을 작업할 때 유용합니다. 예를 들어, reverse() 메소드와 같이 원본 배열을 변경하는 메소드를 사용하기 전에 원본 배열을 복사할 때 사용할 수 있습니다.

const originalArray = [1, 2, 3, 4, 5]; 
const copiedArray = originalArray.slice(); 
copiedArray.reverse(); // 원본 배열은 변경되지 않음

이 예제에서 slice()를 사용하여 originalArray의 복사본을 만들고, 이 복사본에 reverse() 메소드를 적용합니다. 결과적으로 originalArray는 변경되지 않고 그대로 유지됩니다.

JavaScript의 배열 메소드를 사용할 때 원본 배열이 변경되는지, 아니면 새로운 배열이 반환되는지 이해하는 것은 매우 중요합니다. 특히, 함수형 프로그래밍이나 React와 같은 라이브러리에서 불변성(Immutability)을 유지하는 것이 중요할 때 slice()와 같은 메소드를 효과적으로 활용할 수 있습니다.

반응형

'자바스크립트 개념' 카테고리의 다른 글

순수 함수  (0) 2023.03.01
max-age와 expires  (0) 2023.03.01
this 바인딩의 경우의 수  (0) 2023.02.24
매개변수(parameter)와 인수(argument), 그리고 arguments  (0) 2023.02.22
호이스팅과 TDZ  (0) 2023.02.22
Comments