[Javascript] 원본 배열을 변경하는 Array 메소드

 

 

🎡 Array.prototype 메소드

 

모든 Array 인스턴스는 Array.prototype으로부터 메소드와 프로퍼티를 상속받습니다.

이렇게 상속받은 Array.prototype 메소드는 크게 다음과 같이 구분할 수 있습니다.

 

1. 원본 배열을 변경하는 메소드

2. 원본 배열은 변경하지 않고 참조만 하는 메소드

3. 원본 배열을 반복적으로 참조하는 메소드

 

 

 

 

---

 

💖 자바스크립트 원본 배열을 변경하는 Array.prototype  메소드

 

메소드	설명
push()	하나 이상의 요소를 배열의 가장 마지막에 추가하고, 배열의 총 길이를 반환함.
pop()	배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환함.
shift()	배열의 가장 첫 요소를 제거하고, 그 제거된 요소를 반환함.
unshift()	하나 이상의 요소를 배열의 가장 앞에 추가하고, 배열의 총 길이를 반환함.
reverse()	배열 요소의 순서를 전부 반대로 교체함.
sort()	해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬함.
splice()	기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경함.
copyWithin()	해당 배열에서 일련의 요소들을 복사하여, 명시된 위치의 요소들을 교체함.
fill()	시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 특정 값으로 교체함.

 

 

 

 

 

---

 

✨ 원본 배열을 변경하는 Array.prototype 메소드

 

다음 메소드는 원본 배열을 직접 변경하는 메소드입니다.

 

1. push()

2. pop()

3. shift()

4. unshift()

5. reverse()

6. sort()

7. splice()

 

 

 

 

---

 

🔊 push() 메소드

array.push(elementN(필수))

 

인수로 전달받은 모든 값을 원본 배열의 마지막에 요소로 추가하고 변경된 length 값을 반환합니다.

 

 

[파라미터]

- elementN : 필수 입력값, 배열의 마지막 원소로 추가될 데이터

 

 

[리턴값]

원소가 추가된 이후에 배열의 원소 수(length)

 

 

 

🎁 push 메소드와 concat 메소드는 유사하게 동작하지만 미묘한 차이가 있다.

 

1. push 메소드는 원본 배열을 직접 변경하지만,

2. concat 메소드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.

 

const arr1 = [1, 2];
// push 메소드는 원본 배열을 직접 변경한다.
arr1.push(3, 4);
console.log(arr1); // [1, 2, 3, 4]

const arr2 = [1, 2];
// concat 메소드는 원본 배열을 변경하지 않고 새로운 배열을 반환한다.
const result = arr2.concat(3, 4);
console.log(result); // [1, 2, 3, 4]

 

 

 

🎁 인수로 전달받은 값이 배열인 경우,

 

1. push 메소드는 배열을 그대로 원본 배열의 마지막 요소로 추가하지만

2. concat 메소드는 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다.

 

const arr1 = [1, 2];
// 인수로 전달받은 배열을 그대로 원본 배열의 마지막 요소로 추가한다
arr1.push([3, 4]);
console.log(arr1); // [1, 2, [3, 4]]

const arr2 = [1, 2];
// 인수로 전달받은 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다
const result = arr2.concat([3, 4]);
console.log(result); // [1, 2, 3, 4]

 

 

 

🎁  push 메소드는 성능면에서 좋지 않습니다.

 

push 메소드는 배열의 마지막에 요소를 추가하므로 length 프로퍼티를 사용하여 직접 요소를 추가할 수도 있습니다.

이 방법이 push 메소드보다 빠르다.

 

const arr = [1, 2];

// arr.push(3)와 동일한 처리를 한다. 이 방법이 push 메소드보다 빠르다.
arr[arr.length] = 3;

console.log(arr); // [1, 2, 3]

 

 

 

🎁 push 메소드는 원본 배열을 직접 변경하는 부수 효과가 있다. 따라서 push 메소드보다는 ES6의 spread 문법(전개연산자)을 사용하는 편이 좋습니다.

const arr = [1, 2];

// ES6 spread 문법
const newArr = [...arr, 3];
// arr.push(3);

console.log(newArr); // [1, 2, 3]

 

 

 

---

 

🔊 pop() 메소드

 

array.pop()

 

원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환합니다.

원본 배열이 빈 배열이면 undefined를 반환합니다.

pop 메소드는 원본 배열을 직접 변경합니다.

 

 

[리턴값]

마지막 원소

 

const a = ['a', 'b', 'c'];
const c = a.pop();

// 원본 배열이 변경된다.
console.log(a); // a --> ['a', 'b']
console.log(c); // c --> 'c'

 

 

 

---

 

🔊 shift() 메소드

 

array.shift()

 

배열에서 첫요소를 제거하고 제거한 요소를 반환한다.

만약 빈 배열일 경우 undefined를 반환한다. shift 메소드는 대상 배열 자체를 변경한다.

 

array.pop()는 반대의 기능입니다.

 

 

[리턴값]

첫번째 원소

 

 

🎁 shift는 push와 함께 배열을 큐(FIFO: First In First Out)처럼 동작하게 한다.

const arr = [];

arr.push(1); // [1]
arr.push(2); // [1, 2]
arr.push(3); // [1, 2, 3]

arr.shift(); // [2, 3]
arr.shift(); // [3]
arr.shift(); // []

 

 

 

---

 

🔊 unshift() 메소드

 

array.unshift(elementN)

 

인수로 전달받은 모든 값을 원본 배열의 첫번째에 요소로 추가하고 변경된 length 값을 반환합니다.

array.push()는 반대의 기능입니다.

 

 

[파라미터]

- elementN : 필수 입력값, 배열의 첫번째 원소로 추가될 데이터

 

 

[리턴값]

원소가 추가된 이후에 배열의 원소 수(length)

 

const arr1 = [1, 2];
// push 메소드는 원본 배열을 직접 변경한다.
arr1.unshift(3, 4);
console.log(arr1); // [ 3, 4, 1, 2]

 

 

 

 

---

 

📑 pop, shift, push, unshift 비교

 

var jobs = ['programmer', 'designer', 'planner'];	job	jobs
var job = jobs.push('sajang')	['programmer', 'designer', 'planner', 'sajang']	4 (원소의 수,length)
var job = jobs.unshift()	['sajang', 'programmer', 'designer', 'planner']	4 (원소의 수,length)
var job = jobs.pop()	['programmer', 'designer']	'planner'
var job = jobs.shift()	['designer', 'planner']	'programmer'

 

pop()과 push() 메소드를 사용하면 배열을 스택(stack)이라는 데이터 구조처럼 사용할 수 있으며,
shift()와 push() 메소드를 사용하면 배열을 큐(queue)라는 데이터 구조처럼 사용할 수 있습니다.

 

 

 

---

🔊 reverse() 메소드

 

array.reverse()

 

배열 요소의 순서를 반대로 변경합니다. 이때 원본 배열이 변경된다. 반환값은 변경된 배열입니다.

 

 

[리턴값]

array, 자기 자신을 리턴

 

 

const jobs = ['programmer', 'designer', 'planner'];
jobs.reverse(); // array, ['planner', 'designer', 'programmer']

 

 

 

 

---

🔊 sort() 메소드

 

array.sort(sortfunc(옵션))

 

배열을 정렬합니다.
알파벳 순서로 정렬합니다.
숫자의 경우 암시적으로 문자열로 형변환 하기 때문에 숫자 1이 숫자 10보다 먼저 나옵니다.
sortfunc 로 비교 대상인 두개의 인자를 전달하는데, 리턴 값에 따라서 선후를 판단합니다.

 

배열 요소를 모두 문자열로 보고 정렬하므로, 숫자나 불리언과 같은 타입의 요소들은 잘못 정렬될 수도 있습니다.

 

 

[파라미터]

- sortfunc : 옵션 입력값, 원소들 간에 무엇이 우선인지를 판단.

 

 

[리턴값]

array, 정렬된 배열, 자기 자신에 대한 레퍼런스 값.

 

 

const numbers = [9,8,7,6,5,4,3,2,1];
alert(numbers.sort()); // array, [1,2,3,4,5,6,7,8,9]
alert(numbers); // array, [1,2,3,4,5,6,7,8,9], 원본을 변경한다. 
alert(numbers.sort() === numbers); // boolean, true, 원본과 반환값이 같다.
 
const numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
//array, [1,10,2,20,3,4,5,6,7,8,9], 암시적으로 원소를 문자로 형변환 하기 때문에 10이 1뒤에 온다.
alert(numbers.sort());

 

function sortNumber(a,b){
    // 비교 대상인 a와 b가 인자로 전달된다.
    //alert('a :'+a+', b:'+b);
    // a에서 b를 뺀 결과가 음수면 a가 b보다 작고, 0이면 같다.
    // sort메소드는 return 값이 음수,양수,0인지에 따라서 순서를 정한다.
    return a-b;
}
const numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [1,2,3,4,5,6,7,8,9,10,20]

 

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
const numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

 

 

 

---

🔊 splice() 메소드

 

array.splice(index(필수), howmany(필수), elementN(옵션));

 

기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경합니다.

원본이 수정된다. slice가 원본이 유지되는 것과 다릅니다.

 

 

[파라미터]

- index : 배열에 추가할 특정 배열의 위치를 가르키는 index

- howmany : index에서부터 제거될 원소들의 수. index부터 index+howmany에 해당하는 원소들은 삭제된다. 이 값이 0이면 어떠한 원소도 삭제되지 않는다.

- elementN : index와 index+howmany 사이에 추가될 값

 

 

[리턴값]

array, index와 index+howmany 사이에 해당하는 원소들을 패키징한 배열

 

 

🎁 총 3가지의 기능으로 사용될수 있다.
 1. 배열 요소 추가 (삭제 안하고 추가)
 2. 배열 요소 교체 (삭제하고 추가)
 3. 배열 요소 삭제 (추가 안하고 삭제)

 

반환값은 삭제한 요소들을 가진 배열이다.

 

 

 

🎁 이 메소드의 가장 일반적인 사용은 배열에서 요소를 삭제할 때다.

 

const items1 = [1, 2, 3, 4];

// items[1]부터 2개의 요소를 제거하고 제거된 요소를 배열로 반환
const res1 = items1.splice(1, 2);

// 원본 배열이 변경된다.
console.log(items1); // [ 1, 4 ]
// 제거한 요소가 배열로 반환된다.
console.log(res1); // [ 2, 3 ]

// -------------------------------------------

const items2 = [1, 2, 3, 4];

// items[1]부터 모든 요소를 제거하고 제거된 요소를 배열로 반환
const res2 = items2.splice(1);

// 원본 배열이 변경된다.
console.log(items2); // [ 1 ]
// 제거한 요소가 배열로 반환된다.
console.log(res2); // [ 2, 3, 4 ]

 

 

 

🎁 배열에서 요소를 제거하고 제거한 위치에 다른 요소를 추가한다. (교체)

const items = [1, 2, 3, 4];

// items[1]부터 2개의 요소를 제거하고 그자리에 새로운 요소를 추가한다. 제거된 요소가 반환된다.
const res = items.splice(1, 2, 20, 30);

// 원본 배열이 변경된다.
console.log(items); // [ 1, 20, 30, 4 ]
// 제거한 요소가 배열로 반환된다.
console.log(res); // [ 2, 3 ]

 

 

 

🎁 배열 중간에 새로운 요소를 추가할 때도 사용된다. (0개를 삭제)

const items = [1, 2, 3, 4];
 
// items[1]부터 0개의 요소를 제거하고 그자리(items[1])에 새로운 요소를 추가한다. 제거된 요소가 반환된다.
const res = items.splice(1, 0, 100);
 
// 원본 배열이 변경된다.
console.log(items); // [ 1, 100, 2, 3, 4 ]
// 제거한 요소가 배열로 반환된다.
console.log(res);   // [ ]

 

 

 

🎁 배열 중간에 배열을 추가할 때도 사용된다.

 

const items = [1, 4];
const items2 = [2, 3];

// 원본배열 item를 아규먼트 인자로 items2를 받아서,
// items[1]부터 0개의 요소를 제거하고 그자리(items[1])에 새로운 배열를 추가한다.

// 이렇게 하면 아규먼트가 2차원형태가 되어버린다. ( 1, [ 2, 3 ], 4 )
items.splice(1, 0, items2);

// apply로 items를 주고, [1, 0].concat([2, 3])의 결과 인자 1,0, 2,3을 주게되는 꼴이 된다.
Array.prototype.splice.apply(items, [1, 0].concat([2, 3]));

items.splice(1,0, 2,3)
// == [].splice.apply(items, [1, 0].concat([2, 3]));
// == items.splice(1, 0, ...items);

console.log(items); // [ 1, 2, 3, 4 ]

 

 

🔊 slice는 배열의 일부분을 복사해서 반환하며 원본을 훼손하지 않는다.
🔊 splice는 배열에서 요소를 제거하고 제거한 위치에 다른 요소를 추가하며 원본을 훼손한다.