배열 메소드(헷갈리는 것 위주로)

< push, pop, slice, splice 메서드 비교 >

참고 사이트 : https://ko.javascript.info/array

1. Array.prototype.push()

• 의미 : 배열의 끝에 하나 이상의 요소를 추가
• 반환값 : 호출한 배열의 새로운 length값.
• 사용

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);     //  4
console.log(animals);  // ["pigs", "goats", "sheep", "cows"]

2. Array.prototype.pop()

• 의미: 배열에서 마지막 요소를 제거함
• 반환값 : "제거된 요소를 반환"합니다.
• 사용

const plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];

console.log(plants.pop()); // "tomato"
console.log(plants);       //["broccoli", "cauliflower", "cabbage", "kale"];

3. Array.prototype.unshift()

• 의미: 새로운 요소를 배열의 맨 앞쪽에 추가
• 반환 : 새로운 길이를 반환합니다.
• 사용

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5)); // 5
console.log(array1); // Array [4, 5, 1, 2, 3]

4. Array.prototype.shift()

• 의미: 배열에서 첫 번째 요소를 제거함.
• 반환 : 그 "제거된 요소"를 반환합니다.
• 사용

const array1 = [1, 2, 3];

const firstElement = array1.shift();

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

---

< slice메서드와 splice메서드 비교 >

	의미	원본	사용	반환값
slice	배열을 복사	바뀌지x	slice(시작할 인덱스, end인덱스(end 미포함))	추출한 새로운 배열
splice	특정 요소를 삭제, 추가함	바뀜	splice(시작할 인덱스,삭제할 갯수, 추가값)	제거할 요소가 담긴 배열

1. Array.prototype.slice()

• 의미: 어떤 배열의 시작 인덱스 ~ end인덱스(end미포함) 까지 "얕은 복사"함.
• 반환값 : 추출한 요소를 포함한 “새로운 배열”
• 특징
  • 새로 복제된 배열은 "얕은 복사"임.
  • 원본이 바뀌진 않음
• 사용: arr.slice(시작 인덱스 번호, 종료할 인덱스번호 ←end값은 미포함!! )

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2)); //end를 지정하지 않으면 마지막 인덱스까지 다 출력함.
// output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4)); //인덱스 2~3까지 복사
// output: Array ["camel", "duck"]

console.log(animals.slice(1, 5)); //인덱스 1~4까지 복사
// output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2)); // 인덱스 순서를 역으로 셈
// output: Array ["duck", "elephant"]

console.log(animals); // 원본 배열이 바뀌지 않음!
//["ant", "bison", "camel", "duck", "elephant"]

2. Array.prototype.splice()

• 의미 : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 "'원본 배열을 변경"합니다.
• 반환값 : “제거한 요소”를 담은 배열을 반환
• 특징
  • 원본이 바뀜.
• 사용 : arr.splice(삭제 시작할 인덱스번호 , 삭제할 갯수 , 추가할값);

// 예제1
const months = ["Jan", "March", "April", "June"];
console.log(months.splice(1, 1, "Feb")); // ['March'] <-삭제한게 추출됨.
console.log(months); // ["Jan", "Feb", "April", "June"] <-원본 배열이 바뀜

console.log(months.splice(4, 1, "May")); // [] <-삭제된 요소가 없고 요소가 추가만 됨
console.log(months); // ["Jan", "Feb", "March", "April", "May"]

// // 예제2
var myFish = ["angel", "clown", "drum", "sturgeon"];

console.log(myFish.splice(2, 1, "trumpet")); // ["drum"] <-삭제한게 추출됨.
console.log(myFish); // ['angel', 'clown', 'trumpet', 'sturgeon']

---