[JavaScript] 20. 배열메소드 / 요소조작

6가지 요소 조작 메서드

1. push

// 6가지 요소 조작 메서드

// 1. push
// 배열의 가장 뒤에 새로운 요소를 추가하는 메서드
let arr1 = [1, 2, 3];
arr1.push(4, 5, 6, 7);

console.log(arr1);

✅ push 메서드는 변화된 배열의 길이 또한 반환한다

let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6, 7);

console.log(newLength);

2. pop

// 2. pop
// 배열의 가장 마지막에 있는 요소를 제거하고 반환
let arr2 = [4, 5, 6];
arr2.pop();

console.log(arr2);

✅ pop 메서드는 제거된 요소 값을 반환한다

let arr2 = [4, 5, 6];
const poppedItem = arr2.pop();

console.log(poppedItem);

3. shift

// 3. shift
// 배열의 가장 첫 번째에 있는 요소를 제거하고, 제거된 요소를 반환
let arr3 = [7, 8, 9];
arr3.shift();

console.log(arr3);

✅ shift 메서드는 제거된 요소의 값을 반환한다

let arr3 = [7, 8, 9];
const shiftedItem = arr3.shift();

console.log(shiftedItem, arr3);

4. unshift

// 4. unshift
// 배열의 맨 앞에 요소를 추가하는 메서드
let arr4 = [1, 2, 3];
arr4.unshift(0);

console.log(arr4);

✅ unshift 메서드는 변화된 배열의 길이 또한 반환한다

let arr4 = [1, 2, 3];
let newLength2 = arr4.unshift(0);

console.log(newLength2, arr4);

5. slice

// 5. slice
// 마치 가위처럼, 배열의 특정 범위를 잘라내서 새로운 배열로 반환
let arr5 = [1, 2, 3, 4, 5];
const slicedItem = arr5.slice(2, 5);

console.log(slicedItem);

✅ 잘라내더라도 원본 배열에는 변화가 일어나지 않는다

console.log(slicedItem);
console.log(arr5);

✅ 특정 인덱스부터 배열의 마지막 요소까지 잘라낼 때에는 마지막 인덱스 프로퍼티를 작성하지 않아도 끝까지 자를 수 있다

let arr5 = [1, 2, 3, 4, 5];
const slicedItem = arr5.slice(2, 5);
const slicedItem2 = arr5.slice(2);

console.log(slicedItem2);

✅ 뒤에서부터 시작하여 특정 인덱스까지 잘라낼 때에는 음수값을 활용하여 자르고자 하는 요소의 길이를 프로퍼티에 담을 수 있다

let arr5 = [1, 2, 3, 4, 5];
const slicedItem3 = arr5.slice(-1);

console.log(slicedItem3);

let arr5 = [1, 2, 3, 4, 5];
const slicedItem3 = arr5.slice(-1);

console.log(slicedItem3);

6. concat

// 6. concat
// 두 개의 서로 다른 배열을 이어 붙여서 새로운 배열을 반환
let arr6 = [1, 2];
let arr7 = [3, 4];
const concatedArr = arr6.concat(arr7);

console.log(concatedArr);