[JS] 08(2)_배열 앞, 뒤에 값 추가, 삭제하기

1. 배열 값 추가, 삭제하기(앞, 뒤, 중간)

: 배열 값을 추가할 때는 아래 그림과 같이 5개의 함수를 주로 사용한다.

• 배열의 맨 앞에 값 추가하기: unshift()
• 배열의 맨 앞 값 제거하기: shift()
• 배열의 맨 뒤에 값 추가하기: push()
• 배열의 맨 뒤 값 제거: pop()
• 배열의 중간에 값 추가, 삭제: splice()

1) unshift()

: 배열의 맨 앞에 파라미터로 전달 받은 element들을 추가한다.

• 형식: arr.unshift([...element]);
  • 파라미터: 배열의 앞 부분에 추가할 elements
  • 리턴값: 파라미터로 전달된 elements가 추가 된, 새로운 배열의 길이를 리턴한다.

    const arr = ['apple', 'banana'];
    cosnt length = arr.unshift('orange');

document.writeln(length); //3
docuemnt.writeln(arr); //['orange', 'apple', 'banana']

-> unshift() 메소드를 이용하여, 배열의 맨 앞에 'orange' element를 추가했다.
-> unshift() 메소드는 새로운 배열의 길이인 3을 리턴하고,
-> arr은 ['oarange', 'apple', 'banana']값을 가지게 되었다.

```javascript
const arr = ['orange', 'banans'];
const length = arr.unshift('apple', 'grape');

document.writeln(length); // 
document.writeln(arr); //['apple', 'grape', 'orange', 'banana']

-> 맨 앞에 element 여러개를 추가할 수도있다.

2) shift()

: 배열의 가장 첫 element를 삭제하고, 삭제한 element를 리턴한다.

• 형식: arr.shift()
  • 파라미터: 없음(어차피 첫 element 삭제함)
  • 리턴값: 삭제한 element

const arr = ['apple', 'banana'];

//1. apple 삭제
let removed = arr.shift();
document.writeln("1.removed: " + removed + '<br>');
document.writeln("1.arr: " + arr + '<br>');
// -> 1.removed: apple (삭제한 element를 반환하기 때문에!)
// -> 1.arr: banana (apple이 삭제되고 banana만 남음)

//2. banan 삭제
removed = arr.shift();
document.writeln("2.removed: " + removed + '<br>');
document.writeln("2.arr: " + arr + '<br>');
// -> 2.removed: banana (삭제한 element 반환)
// -> 2.arr: (banana까지 삭제되었기 때문에 배열 없음)

//3.  더 이상 삭제할 원소 없음
removed = arr.shift();
document.writeln("3.removed: " + removed + '<br>');
document.writeln("3.arr: " + arr);
//-> 3.removed: undefined (삭제를 시도하였지만 element가 없어  undefined 리턴)
//-> 3.arr: 

3) push()

: 배열의 맨 끝에 새로운 element를 추가한다.

• 형식 : arr.push(element1[,...[,elementN]])
  • 파라미터: 배열의 맨 뒷 부분에 추가할 elements
  • 리턴 값: 파라미터로 전달된 elements가 추가 된, 새로운 배열의 길이를 리턴한다.

const arr = ['apple', 'banana'];
const length = arr.push('orange');

document.writeln(length) //3
document.writeln(arr) //['apple', 'banana', 'orange']

const arr = ['orange', 'apple'];
const length = arr.push('banana', 'tomato');

document.writeln(length); // 4;
document.writeln(arr); // ['orange', 'apple', 'banana', 'tomato']

-> 파라미터를 여러개 전달하여, 배열으 맨 마지막에 여러개의 원소를 추가할 수도있다.

4) pop()

: 배열의 가장 뒤 element를 삭제하고, 삭제한 element를 리턴한다.

• 형식: arr.pop()
  • 파라미커: 없음(가장 뒤 element를 자동으로 삭제할 것이기 때문)
  • 리턴값: 삭제한 element

const arr = ['apple', 'banana'];

//1. banana 삭제
const removed = arr.pop();
document.writeln("1.removed: " + removed + '<br>'); //1.removed: banana
document.writeln("1.arr: " + arr + '<br>'); //1.arr: apple

//2. apple 삭제 
removed = arr.pop();
document.writeln("2.removed: " + removed + '<br>');//2.removed: apple
document.writeln("2.arr: " + arr + '<br>');//2.arr:

//3. 더 이상 삭제할 원소 없음
removed = arr.pop();
document.writeln("3.removed: " + removed + '<br>');//3.removed: undefined
document.writeln("3.arr: " + arr); //3.arr: