Array 메서드 | #1 원본 배열 자체를 수정하는 메서드

 

배열의 메서드를 사용하기 전에, 항상 배열의 요소 자체를 수정하는지, 그 사본을 반환하는 메서드인지 주의해야합니다.

 

#1 원본 배열 자체를 수정하는 메서드

 

자주 사용하는 push(), pop(), shift(), unshift()와 같이 함수 호출 시 원본 그자체를 변경하는 메서드를 뜻합니다.

항상 원본 배열 자체를 수정하는 메서드를 사용할때에는 원본 값이 변경되므로 주의해서 사용하거나, 미리 원본을 다른 변수에 넣어 놓아야 합니다.

 

▼push(), pop(), shift(), unshift() 설명

[JavaScript] 배열과 객체의 개념과 차이 (Array vs Object)

---

fill()

- 배열 채우기

 

arr.fill(value, startIndex, endIndex)

◾ value: 배열을 채울 값입니다.

◾ startIndex: 채우기 시작할 인덱스값입니다. [Optional]

◾ endIndex: 채우는 시점을 종료할 인덱스값입니다. 해당 인덱스 전까지 실행합니다. [Optional]

◾ 반환값: 채우고 난 후 결과로 나온 배열입니다.

 

let animals = ["dog", "cat", "fox", "pig"];
 
/* index 1 ~ index 2*/
console.log(animals.fill("lion", 1, 3)); // ["dog", "lion", "lion", "pig"]
 
/* index 2 ~ */
console.log(animals.fill("cow", 2));     // ["dog", "lion", "cow", "cow"]
 
/* all */
console.log(animals.fill("wolf"));       // ["wolf", "wolf", "wolf", "wolf"]

---

reverse()

- 배열의 순서를 반전합니다.

 

a.reverse()

◾ 반환값: 순서가 반전된 배열이 리턴됩니다.

let num = [1, 2, 3, 4, 5];
console.log(num.reverse()); // [5, 4, 3, 2, 1]
console.log(num.reverse()); // [1, 2, 3, 4, 5]

---

sort()

- 배열의 요소를 정렬합니다.

 

arr.sort(compareFunction)

◾ compareFunction: 원소들 간에 무엇이 우선인지를 함수를 통해 판단합니다. 생략 시 아스키코드 순서를 바탕으로 정렬됩니다. [Optional]

◾ 반환값: 정렬된 배열을 리턴합니다.

/* #1 문자열 정렬*/
let fruit = ["banana", "apple", "coconut", "kiwi"];
 
/* 내림차순 방법1: reverse() 사용 */
console.log(fruit.sort().reverse()); // ["apple", "banana", "coconut", "kiwi"]
 
/* 오름차순으로 정렬 */
console.log(fruit.sort()); // ["apple", "banana", "coconut", "kiwi"]
 
/* 내림차순 방법2: 문자열 내림차순 함수 */
function compStringReverse(a, b) {
    if (a > b) return -1;
    else if (b > a) return 1;
    else return 0;
}
console.log(fruit.sort()); // ["kiwi", "coconut", "banana", "apple"]
 
/* #2 숫자 정렬 */
let num = [1, 40, 5, 20, 1000];
 
console.log(num.sort());              // [1, 1000, 20, 40, 5] :: 아스키코드순
console.log(num.sort((a,b) => a - b); // [1, 5, 20, 40, 1000] :: 오름차순
console.log(num.sort((a,b) => b - a); // [1000, 40, 20, 5, 1] :: 내림차순

---

splice()

- 배열의 특정구간을 추출하거나, 특정구간에 특정 배열을 추가합니다.

 

array.splice(startIndex, deleteCount, item1, item2, ...)

◾ startIndex: 배열 변경을 시작할 인덱스입니다.

◾ deleteCount: 배열에서 제거할 요소의 수입니다. [Optional]

◾ item: 배열에 추가할 요소들입니다. [Optional]

◾ 반환값: 추가 또는 삭제한 배열을 리턴합니다. 빈 인자를 주면 빈 배열을 리턴합니다.

◾ 원본 배열에는 추출되고 남은 값들만 남아있습니다.

 

/* index 2 부터 끝까지 추출 */
let num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(num.splice(2));    // [2, 3, 4, 5, 6, 7, 8, 9]
console.log(num); [0, 1] // 남겨진 원본 값
 
/* index 2부터 4개 추출 */
let num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(num.splice(2, 4)); // [2, 3, 4, 5]
 
/* index 2부터 4개를 추출하면서, 그 값들을 Item으로 변경 */
let num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(num.splice(2, 4, 'two', 'three', 'four', 'five')); // [2, 3, 4, 5]
console.log(num)         // [0, 1, "two", "three", "four", "five", 6, 7, 8, 9]

 

---

[JavaScript] Array 메서드 | #2-1 Immutable (불변성) 메서드