[ES6] 23. push(), pop() ,slice(), shift() unshift()

 

push(), pop(), unshift() 및 shift() 메서드는 자바스크립트에서 배열의 요소를 삽입 및 삭제하는 데 사용되는 함수

 

push(), pop(), unshift() 및 shift() 메서드는 자바스크립트에서 배열의 요소를 삽입 및 삭제하는 데 사용되는 함수들입니다.

push(): 배열의 끝에 새로운 요소를 추가하고, 새로운 배열의 길이를 반환합니다.
예시:

javascript
const numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // 출력: [1, 2, 3, 4]



pop(): 배열의 마지막 요소를 제거하고, 제거된 요소를 반환합니다.
예시:

javascript
const numbers = [1, 2, 3];
const popped = numbers.pop();
console.log(popped);   // 출력: 3
console.log(numbers);  // 출력: [1, 2]



unshift(): 배열의 시작 부분에 새로운 요소를 추가하고, 새로운 배열의 길이를 반환합니다.
예시:



javascript
const numbers = [1, 2, 3];
numbers.unshift(0);
console.log(numbers); // 출력: [0, 1, 2, 3]
(): 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.







shift() 메서드는 배열에서 첫 번째 요소를 삭제하고 해당 요소를 반환하는 함수입니다. 

이 메서드를 사용하여 배열의 시작 부분에서 요소를 제거할 수 있습니다. 배열이가 변경되며 길이가 줄어듭니다.

예시:

javascript
const numbers = [1, 2, 3];
const shifted = numbers.shift();
console.log(shifted);  // 출력: 1
console.log(numbers);  // 출력: [2, 3]
이 예시에서 먼저 [1, 2, 3] 배열을 정의했습니다. shift() 메서드를 호출하여 배열의 첫 번째 요소인 1을 삭제하고 이 값을 shifted 변수에 저장했습니다. 결과적으로 shifted는 삭제된 요소값인 1을 가지게 되고, numbers 배열은 [2, 3]으로 변경됩니다.

 

---

.push 는 추가한다.
.pop 는 끝을 삭제한다.
.unshift는 추가한값을 배열에서 한칸씩 뒤로 움직여서 맨앞으로 오게됫다.
.shift는 (추가한값을 배열에서 한칸씩 뒤로 움직여서 맨앞으로 오게됫다.)을 다시 원위치로 한칸씩 되돌리는것이다.

 

const fruits1 = ["apple", "banana", "cherry"];

fruits1.push("push");
document.write("1번입니다 :" + fruits1 + "<br>");

const fruits2 = ["apple", "banana", "cherry"];

fruits2.pop();
document.write("2번입니다 :" + fruits2 + "<br>");

const fruits3 = ["apple", "banana", "cherry"];

fruits3.unshift("unshift");
document.write("4번입니다 :" + fruits3 + "<br>");

fruits3.shift();
document.write("3번입니다 :" + fruits3 + "<br>");

// const fruits4 = ["apple", "banana", "cherry"];

slice (인덱스지정한곳을 포함해서 , 인덱스끝)

 

const fruits1 = ["apple", "banana", "cherry"];

let fruits2 = fruits1.slice(0, 1);
document.write("1번입니다 :" + fruits2 + "<br>");

// const fruits4 = ["apple", "banana", "cherry"];

slice (인덱스를 지정한곳까지 짜르고 ) 그뒤에배열을 보여줌

.slice(1, 1) 지정한 인덱스 1포함해서 1(end - 1)개 가지 잘라냄.

const fruits1 = ["apple", "banana", "cherry"];

let fruits2 = fruits1.slice(2);
document.write("1번입니다 :" + fruits2 + "<br>");

// const fruits4 = ["apple", "banana", "cherry"];

 

const fruits1 = ["apple", "banana", "cherry"]; 이런 배열이있다면

 

"banana"를 표시하고싶다면,

 

fruits1.slice( 1.1) 을 하면 banana만 표시할수있다.

 

예시코드,

 

const fruits1 = ["apple", "banana", "cherry", "pua", "gaga", "tue"];

let fruits2 = fruits1.slice(3, 4);
document.write("1번입니다 :" + fruits2 + "<br>");

// const fruits4 = ["apple", "banana", "cherry"];

 

 

array.splice(시작점, 카운트, ...추가요소들)

 

splice() 메서드는 JavaScript의 배열에서 특정 인덱스를 시작점으로 하여 카운트 개수만큼의 요소를 제거할 수 있습니다. 제거된 요소들을 반환하는 메서드입니다. 필요한 경우, 삭제한 위치에 새로운 요소를 추가할 수도 있습니다.

splice() 메서드라미터는 다음과 같이 사용됩니다:

array.splice(시작점, 카운트, ...추가요소들)

시작점은 배열에서 변경이 시작되는 인덱스입니다.
카운트는 배열에서 제거할 요소의 개수.
...추가요소들은 제거된 요소의 자리에 들어갈 새로운 요소입니다. (선택사항)
예시:

javascript
// 배열을 생성합시다.
let fruits = ['apple', 'banana', 'cherry', 'grape', 'melon'];

// 'cherry'와 'grape'를 제거하고 'orange', 'lemon'을 추가시다.
let removedItems = fruits.splice(2, 2, 'orange', 'lemon');

console.log(fruits); 
// Output: ['apple', 'banana', 'orange', 'lemon', 'melon']

console.log(removedItems); 
// Output: ['cherry', 'grape'] (제거된 요소들)
이 예제에서는 splice() 메서드를 사용하여 시작 인덱스 2에서 2 개의 요소를 제거하고 자리에 'orange'와 'lemon'을 추가하여 fruits 배열을 수정했습니다.

 

array.splice(시작점, 카운트, ...추가요소들) 지정한 값까지 지우고 추가하기

const fruits1 = ["1", "2", "3", "4", "5"];

let removedItems = fruits1.splice(2, 2, "orange", "lemon");

document.write("1번입니다 :" + fruits1 + "<br>");

 

 

array.splice(시작점, 카운트, ...추가요소들) <- 여기서 카운트가 없다면?

 

const fruits1 = ["1", "2", "3", "4", "5"];

let removedItems = fruits1.splice(3, 0, "orange", "lemon");

document.write("1번입니다 :" + fruits1 + "<br>");

// const fruits4 = ["apple", "banana", "cherry"];

 

 

 

카운트가 0이면  인덱스가 지정한 위치에서 뒤에 추가  "문자열"을 추가한다. 

 

concat은 자바스크립트에서 배열을 합치는 데 사용되는 메소드입니다. 아래 예시에서는 fruits1 배열과 fruitsToAdd 배열을 합치는 방법을 보여드리겠습니다:

 

concat은 자바스크립트에서 배열을 합치는 데 사용되는 메소드입니다. 아래 예시에서는 fruits1 배열과 fruitsToAdd 배열을 합치는 방법을 보여드리겠습니다:

javascript
const fruits1 = ["1", "2", "3", "4", "5"];
const fruitsToAdd = ["6", "7"];

// concat 메소드를 사용하여 두 배열을 합칩니다.
const fruitsConcat = fruits1.concat(fruitsToAdd);

document.write("원본 배열: " + fruits1 + "<br>");
document.write("추가할 배열: " + fruitsToAdd + "<br>");
document.write("concat을 사용하여 합친 배열: " + fruitsConcat + "<br>");
이 코드는 다음과 같은 결과를 출력합니다:

원본 배열 1,2,3,4,5
추가할 배열: 6,7
concat을 사용하여 합친 배열: 1,2,3,4,5,6,7
concat 메소드는 원본 배열을 변경하지 않습니다. 대신, 두 배열을 합쳐 배열을 반환합니다. 이 예시에서는 fruits1 배열이나 fruitsToAdd 배열이 변경되지 않음을 확인할 수 있습니다.

 

const fruits1 = ["1", "2", "3", "4", "5"];
const fruitsToAdd = ["6", "7"];

// concat 메소드를 사용하여 두 배열을 합칩니다.
const fruitsConcat = fruits1.concat(fruitsToAdd);

document.write("원본 배열: " + fruits1 + "<br>");
document.write("추가할 배열: " + fruitsToAdd + "<br>");
document.write("concat을 사용하여 합친 배열: " + fruitsConcat + "<br>");