1. Add Array Value
배열의 값을 추가하는 방법이다
1.1 push()
배열 객체의 마지막 인덱스에 새 데이터 값를 추가한다
const abc = ['c', 'd', 'e'];
fruits.push('f', 'g');
console.log(abc);
//['c', 'd', 'e', 'f', 'g'] 1.2 unshift()
배열 객체의 첫번째 인덱스에 새 데이터 값을 추가한다
abc.unshift('a', 'b');
console.log(abc);
//['a', 'b', 'c', 'd', 'e', 'f', 'g'] 2. Delete Array Value
배열의 값을 제거하는 방법이다
2.1 pop()
배열 객체의 마지막 인덱스에 저장된 데이터 값을 제거한다
abc.pop();
console.log(abc);
//['a', 'b', 'c', 'd', 'e', 'f']2.2 shift()
배열 객체의 첫번째 인덱스에 저장된 데이터 값을 제거한다
abc.shift();
console.log(abc);
//['b', 'c', 'd', 'e', 'f']
unshift, shift 의 방법이 push, pop 의 방법보다 느리다. 왜냐하면 배열 값을 뒤에서 부터 추가하고 빼는 것은 빈공간에 데이터를 넣었다가 지웠다가 하는것이기 때문에 기존의 데이터는 움직이지 않는다.
한공간에 인덱스를 이용해 더하고 빼고를 하기 때문에 빠른 작동이 쉽지만, 앞에서부터 데이터를 추가하고 빼려면 기존의 데이터 인덱스값을 모두 조작해주어야 한다.
👉🏻가능하면 배열값의 추가와 제거시에 pop과 push를 사용하는것을 권장한다
3. Modify Array Value
배열값을 수정하는 방법이다.
배열자체 내부의 값이 수정되는 것과 배열객체의 일부를 가져와 새로운 배열을 생성하는 것을 구분해서 알아두자
3.1 splice(startIndex, deleteCount, itemN)
배열 객체의 지정된 인덱스에 저장된 데이터 값을 카운트 수 만큼 제거가 가능하고,
새로운 값(itemN)을 원하는 만큼 삽입해서 배열을 수정할 수 있다.
abc.splice(0, 1);
console.log(abc);
//['c', 'd', 'e', 'f'] : 첫번째 인덱스값 abc[0]인 'b'부터 1만큼 지워짐
abc.splice(1, 2, 'a', 'b');
console.log(abc);
//['c', 'a', 'b', 'f'] : 인덱스값1인 'd'부터 2만큼 지워지고
//그자리에 새로운 값인 'a', 'b' 가 추가됨startIndex : 배열의 변경을 시작할 인덱스 번호
- 값이 음수인 경우 배열의 마지막에서부터의 길이를 나타낸다
- 배열의 길이보다 크게 설정할 경우, 실제 startIndex는 배열의 길이로 설정된다
- 절대값이 배열의 길이보다 큰 경우, 0으로 세팅된다
deleteCount : 배열에서 제거할 요소의 갯수
- 지정하지 않거나, array.length -startIndex 보다 큰 경우, startIndex부터 모든 값을 제거한다
- 음수를 지정할 경우, 어떠한 요소도 제거되지 않는다
itemN, itemN+1 ... : 배열에 추가할 요소
- 지정하지 않을 경우 배열값의 제거 기능만 한다
반환값 : 제거한 요소를 담은 배열
const spliceValue = abc.splice(1, 2, 'c', 'd');
console.log(abc);
//['c', 'd', 'e', 'f']
console.log(spliceValue); //splice()에의해 제거된 값을 받는다
//['a', 'b']
const spliceZero = abc.splice(1, 0);
console.log(spliceZero); //아무것도 제거한 값이 없으므로 빈문자열을 반환
//[]3.2 slice(startIndex, end기준Index)
배열 객체의 데이터값 중에 원하는 인덱스 구간만큼 잘라서 새로운 배열 객체를 만든다
startIndex부터 end기준Index의 이전요소까지 추출한다
startIndex : 추출을 시작할 index
- undefined일 경우, 인덱스0부터 slice된다
- 음수를 지정한 경우, 배열의 끝에서 부터 길이를 나타낸다
- 배열의 길이와 같거나 큰 수를 지정한 경우, 빈 배열을 반환한다
end기준Index : 추출을 종료할 기준에 대한 index
- 지정하지 않을 경우, startIndex부터 배열의 마지막까지 slice된다
- 음수를 지정한 경우, 배열의 끝에서 부터의 길이를 나타내므로
slice(2,-1)인 경우, -1 즉 마지막 배열의 이전요소까지 slice된다 - 배열의 길이보다 큰 수를 지정한 경우, 배열의 마지막까지 slice된다
const sliceResult = abc.slice(0, 3);
const sliceResult2 = abc.slice(1,-1);
console.log(sliceResult);
//['c', 'd', 'e'] :인덱스0인 값부터 인덱스3-1인 값까지 추출됨
console.log(sliceResult2);
//['d', 'e'] : 인덱스1인 값부터 -1 즉,(마지막인덱스-1)인 값까지 추출됨
console.log(abc);
//['c', 'd', 'e', 'f']splice와 slice의 차이점은
splice의 경우 배열 객체에서 지정한 요소들이 바로 제거되거나 수정되어 배열객체 자체가 변한다 (제거된 값은 새로운 배열객체로 반환)
slice의 경우 배열 객체에서 지정한 요소들을 추출하여 새로운 배열에 반환되기 때문에 원래의 배열객체가 변하지는 않는다는 점이다 (추출한 값은 새로운 배열객체로 반환)
3.3 concat()
두 개의 배열 객체를 결합해 새로운 배열 객체를 만든다,
추가로 넣고 싶은 요소들을 넣어도 된다
const num = [1, 2, 3];
console.log(abc.concat(num, 'hello', false));
//['c', 'd', 'e', 'f', 1, 2, 3, 'hello', false]3.4 reverse()
배열자체에서 객체의 요소들의 순서를 반대로 바꾼다 (바꾼값을 추출하는 것이 아님)
abc.reverse();
console.loc(abc);
//['f', 'e', 'd', 'c']