Array 메서드 간단하게 알아보기
불변성 유지
데이터나 객체의 상태를 변경할 수 없도록 하는 프로그래밍 개념이다. 불변성을 유지하는 것은 데이터가 생성된 후에는 수정할 수 없다는 의미이며, 새로운 데이터를 생성하거나 수정된 데이터의 사본을 만들어서 사용한다. 이에 따라 데이터의 상태가 변하지 않기 때문에 예측 가능하고 안정적인 코드를 작성할 수 있다.
1. 각 메서드들 알아보기
1.1 push
const number = [1,2,3];
console.log(number); // [1,2,3]
const newNumber = number.push(10);
console.log(newNumber); // 4 (length값을 리턴)
console.log(number); // [1,2,3,10] (원본 수정)
Array.push() 정리
- push는 원본 배열의 끝에 값을 추가한다.
- push는 원본 배열을 수정한다.
- push의 리턴값은 수정된 배열의 length값이다.
1.2 concat
const number = [1,2,3];
console.log(number); // [1,2,3]
const newNumber = number.concat(10);
const newArr = [100,200];
const newConcatArr = number.concat(newArr);
console.log(newNumber); // [1,2,3,10]
console.log(newConcatArr); // [1,2,3,100,200]
console.log(number); // [1,2,3] (원본을 수정하지 않음)Array.concat() 정리
- concat은 사본을 만들고 그 사본의 끝에 값을 추가한다.
- concat은 원본 배열을 수정하지 않는다.
- concat은 두 개 이상의 배열을 병합하는 데 사용된다.
- concat은 리턴값은 수정(병합)된 배열이다.
1.3 shift
const number = [1,2,3];
console.log(number); // [1,2,3]
const newNumber = number.shift();
console.log(newNumber); // 1
console.log(number); // [2,3]Array.shift() 정리
- shift는 원본 배열을 수정한다.
- shift는 원본 배열의 첫 번째 요소를 제거한다.
- shift의 리턴값은 제거된 값이다.
1.3 unshift
const number = [1,2,3];
console.log(number); // [1,2,3]
const newNumber = number.unshift(90,100);
console.log(newNumber); // 5
console.log(number); // [90,100,1,2,3]Array.unshift() 정리
- unshift는 원본 배열을 수정한다.
- unshift는 원본 배열의 첫 번째 부터 값을 추가한다.
- unshift의 리턴값은 변경된 배열의 length값이다.
1.4 pop
const number = [1,2,3,100];
console.log(number); // [1,2,3,100]
const newNumber = number.pop();
console.log(newNumber); // 100
console.log(number); // [1,2,3]
Array.pop() 정리
- pop은 원본 배열의 끝 값을 제거한다.
- pop은 원본 배열을 수정한다.
- pop의 리턴 값은 제거된(끝) 값이다.
1.5 splice
//splice로 제거하기
const number = [1,2,3,100];
console.log(number); // [1,2,3,100]
const newNumber = number.splice(0,2);
console.log(newNumber); // [1,2] 제거된 값
console.log(number); // [3,100] 원본 배열 수정
//splice로 제거하고 추가하기
const number = [1,2,3,100];
console.log(number); // [1,2,3,100]
const newNumber = number.splice(0,2,777,80);
console.log(newNumber); // [1,2] 제거된 값
console.log(number); // [777,80,3,100] 원본 배열 수정
Array.splice() 정리
- splice 원본 배열을 수정한다.
- splice(start, deleteCount, item1, item2, ...)의 구문으로 사용할 수 있다.
- start는 변경을 시작할 인덱스
- deleteCount는 배열에서 제거할 요소의 수
- item은 원본 배열에 추가할 요소(여러개 가능하고 지정하지 않으면 splice는 제거만한다)
- splice의 리턴 값은 제거된 값이다.
- 인자를 모두 넣으면 원본 배열을 start부터 deleCount갯수 만큼 요소를 제거하고 그다음 인자 값(...item)을 첫번째 부터 넣는다.
1.6 slice
const number = [1,2,3,100];
console.log(number); // [1,2,3,100]
const newNumber = number.slice(0,2);
console.log(newNumber); // [1,2]
console.log(number); // [1,2,3,100]
Array.slice() 정리
- slice는 원본 배열을 수정하지 않는다.
- Array.slice(begin, end); 구문으로 사용한다.
- begin은 추출 시작점에 대한 인덱스이다.
- end는 추출을 종료할 인덱스이며 end를 제외하고 그 앞까지만 추출한다.
- end가 생략되면 배열의 끝까지 추출한다.
요약
- push, pop, shift, unshift, splice는 원본 배열을 수정한다
- concat, slice는 원본 배열을 수정하지 않는다.
- 불변성을 유지하고 싶다면 concat또는 slice를 사용하자
- 성능을 우선시 한다면 사본을 만드는 과정이 추가되는 concat과 slice보단 다른 메서드가 유리할 수 있다.
- 자바스크립트가 발전함에 따라 성능차이가 많이 줄었다고 하니 불변성 유지할 수 있는 메서드가 더 좋지 않을까..? 하는 생각이 있다.
