Javascript CheatSheet

헷갈리는 함수 정리하기 (push, pop, unshift, shift, splice, slice)

📍 push()

배열의 맨 끝에 값을 추가 (하나 이상의 요소 추가 가능)
반환: 배열의 새로운 길이,
원본 배열을 바꾼다

📍 pop()

배열의 맨 끝 값(마지막 요소)을 제거
반환: 그(제거된) 요소 반환 , 빈 배열의 경우 undefined를 반환

let colors = ['pink', 'sky'];

colors.push('purple'); // 3     , 배열은 'pink', 'sky', 'purple'

colors.pop(); // 'purple'

📍 unshift()

배열의 맨 앞에 값을 추가
반환: 추가된 배열의 길이
원본 배열을 바꾼다

📍 shift()

배열의 맨 앞의 값(첫 번째 요소)을 제거 => (pop())과 반대
반환: 그(제거된) 요소를 반환, 빈 배열인 경우 pop()과 마찬가지로 undefined가 반환
원본 배열을 바꾼다

let colors = ['red', 'blue'];

colors.unshift('black'); // 3    , 배열은 'black', 'red', 'blue'가 된다.

colors.shift(); // 'black'

📍 splice()

배열의 기존 요소 삭제 또는 교체, 새요소 추가하여 배열의 내용 변경
원본 배열 변경, 이 과정에서 삭제된 요소가 있으면 삭제된 요소 반환

📍 slice()

배열의 요소를 추출
반환 : 추출하고자 하는 배열의 start index, end index값을 넘겨 받아서 해당 길이만큼 새로운 배열을 반환.
모두 생략한 경우, 배열 똑같이 복제, end index만 생략하면 start 부터 마지막 index까지의 요소 추출
원본 배열에 영향을 주지 않음

let arr = ["1","2","3","4", "5", "6", "7", "8"];

// 파라미터가 없음 => 원본배열 변화없음, 삭제된 요소 없음.
let arr2 = arr.splice();
console.log(arr); // ["1", "2", "3", "4", "5", "6", "7", "8"]
console.log(arr2); // []


// startIndex만 3으로 지정 => 4번째 요소부터 마지막요소까지 모두삭제, 삭제된 요소 return
let arr3 = arr.splice(3);
console.log(arr); // ["1", "2", "3"]
console.log(arr3); // ["4", "5", "6", "7", "8"]


// startIndex 3, deleteCount 2 => 4번째 요소부터 2개의 요소삭제, 삭제된 요소 return
let arr4 = arr.splice(3, 2);
console.log(arr); // ["1", "2", "3", "6", "7", "8"]
console.log(arr4); // ["4", "5"]

// startIndex 2, deleteCount 2 => 2번째 요소부터 2개의 요소삭제, 2번째 index부터 "가", "나" 순서대로 추가, 삭제된 요소 return
let arr7 = arr.splice(2, 2, "가","나");
console.log(arr); // ["1", "2", "가", "나", "5", "6", "7", "8"]
console.log(arr7); // ["3", "4"]


// startIndex -4, deleteCount 2 => arr.length-4 즉, 뒤에서 4번째부터 2개의 요소삭제, 삭제된 요소 return
let arr8 = arr.splice(-4, 2);
console.log(arr); // ["1", "2", "3", "4", "7", "8"]
console.log(arr8); // ["5", "6"]