FrontEngineer JungBam
javascript 메소드에 대한 고찰, slice() 의 활 본문
JavaScript에서 배열을 다루는 데는 여러 가지 메소드가 사용됩니다. 이들 중 일부는 원본 배열을 직접 수정(modify)하는 반면, 다른 일부는 원본 배열을 변경하지 않고 새 배열을 반환(return)합니다. 이러한 차이를 이해하는 것은 중요하며, 때로는 원본 배열을 보존하기 위해 slice() 메소드를 활용하는 방법도 필요합니다.
원본 배열을 수정하는 메소드
- push(): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.
- pop(): 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다.
- shift(): 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
- unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.
- reverse(): 배열의 요소 순서를 반전시킵니다.
- sort(): 배열의 요소를 정렬합니다.
이 메소드들은 모두 원본 배열에 직접적인 영향을 미칩니다. 예를 들어, reverse() 메소드는 배열의 요소 순서를 바꾸고, 원본 배열 자체도 변경합니다.
원본 배열을 변경하지 않는 메소드
- concat(): 하나 이상의 배열을 합쳐 새 배열을 생성합니다.
- join(): 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
- slice(): 배열의 일부분을 얕은 복사하여 새 배열 객체를 반환합니다.
- map(): 배열 내 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새 배열을 반환합니다.
- 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 |