자바스크립트에서 shift()
, splice()
를 사용하여 배열의 맨 앞에 요소를 추가/제거하는 방법을 소개합니다.
1. unshift() : 배열 맨 앞에 요소 추가
unshift(element)는 배열의 맨 앞에 element
를 추가합니다. 참고로, push(element)는 배열 맨 뒤에 요소를 추가합니다.
const arr = [1, 2, 3];
arr.unshift('A');
console.log(arr);
arr.unshift('B');
console.log(arr);
arr.unshift('C');
console.log(arr);
Output:
[ 'A', 1, 2, 3 ]
[ 'B', 'A', 1, 2, 3 ]
[ 'C', 'B', 'A', 1, 2, 3 ]
1.1 unshift()로 여러 요소를 배열에 추가
unshift()
는 1개 이상의 요소를 배열의 맨 앞에 추가할 수도 있습니다. 아래와 같이 인자로 여러 요소를 전달하면 됩니다.
const arr = [1, 2, 3];
arr.unshift('A', 'B', 'C');
console.log(arr);
Output:
[ 'A', 'B', 'C', 1, 2, 3 ]
2. shift() : 배열 맨 앞의 요소 제거
shift()는 배열 맨 앞의 요소 1개를 제거하며, 배열에서 제거된 요소의 값을 리턴합니다. 참고로, pop()은 배열의 맨 마지막 요소를 제거합니다.
const arr = [ 'C', 'B', 'A', 1, 2, 3 ];
let removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);
removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);
removed = arr.shift()
console.log("removed: " + removed);
console.log(arr);
Output:
removed: C
[ 'B', 'A', 1, 2, 3 ]
removed: B
[ 'A', 1, 2, 3 ]
removed: A
[ 1, 2, 3 ]
3. splice() : 배열 맨 앞에 요소 추가
splice()를 이용하여 배열의 맨 앞에 요소를 추가하거나 삭제할 수도 있습니다.
splice()
의 Syntax를 먼저 보면, 배열의 startIndex에서 deleteCount 개수만큼 요소를 삭제합니다. 그리고 item1, item2 등, 인자로 전달된 요소를 추가합니다.
예를 들어, splice(0, 0, 'A')
는 배열의 Index 0에서 0개 요소를 삭제하고, A를 추가합니다. 즉, 배열 맨 앞에 A를 추가합니다.
array.splice(startIndex, deleteCount, item1, item2, ...)
위에서 설명한 것처럼 splice(0, 0, element)
는 배열 맨 앞에 요소를 추가합니다.
const arr = [1, 2, 3];
arr.splice(0, 0, 'A');
console.log(arr);
arr.splice(0, 0, 'B');
console.log(arr);
arr.splice(0, 0, 'C');
console.log(arr);
Output:
[ 'A', 1, 2, 3 ]
[ 'B', 'A', 1, 2, 3 ]
[ 'C', 'B', 'A', 1, 2, 3 ]
3.1 splice()로 여러 요소를 배열에 추가
다음과 같이 splice()
로 배열에 여러 요소를 한번에 추가할 수 있습니다.
const arr = [1, 2, 3];
arr.splice(0, 0, 'A', 'B', 'C');
console.log(arr);
Output:
[ 'A', 'B', 'C', 1, 2, 3 ]
4. splice() : 배열 맨 앞의 요소 제거
splice(0, 1)
은 배열의 Index 0에서 요소 1개를 삭제합니다. 따라서, 아래와 같이 배열 맨 앞의 요소 1개를 제거하는 코드를 구현할 수 있습니다.
const arr = [ 'C', 'B', 'A', 1, 2, 3 ];
let removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);
removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);
removed = arr.splice(0, 1);
console.log("removed: " + removed);
console.log(arr);
Output:
removed: C
[ 'B', 'A', 1, 2, 3 ]
removed: B
[ 'A', 1, 2, 3 ]
removed: A
[ 1, 2, 3 ]
4.1 splice()로 배열에서 여러 요소를 한번에 삭제
아래와 같이 배열의 앞에서 여러 요소를 한번에 삭제할 수 있습니다.
const arr = [ 'C', 'B', 'A', 1, 2, 3 ];
let removed = arr.splice(0, 3);
console.log("removed: " + removed);
console.log(arr);
Output:
removed: C,B,A
[ 1, 2, 3 ]
Related Posts
- JavaScript - 빈 문자열 확인, 2가지 방법
- JavaScript - 날짜/시간 비교, 3가지 방법
- JavaScript - 랜덤 문자열 생성, 2가지 방법
- JavaScript - 마지막 문자 제거, 4가지 방법
- JavaScript - 문자열 공백 제거, 3가지 방법
- JavaScript - 배열을 문자열로 변환, 3가지 방법
- JavaScript - 여러 줄 문자열, 3가지 방법
- JavaScript - 객체를 문자열로 변환, 2가지 방법
- JavaScript - 문자열의 첫번째 문자 가져오기, 4가지 방법
- JavaScript - 문자열의 마지막 문자 가져오기, 4가지 방법
- JavaScript - 배열 맨 앞에 요소 추가/제거, 2가지 방법
- JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법
- JavaScript - 현재 시간 Timestamp 가져오기
- JavaScript - 대소문자 변환 (LowerCase, UpperCase)
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - setTimeout()으로 함수 실행 지연
- JavaScript - 'try...catch'로 예외 처리 방법
- JavaScript - 문자열을 날짜(Date)로 변환하는 방법
- JavaScript - 배열에서 중복 제거, 4가지 방법
- JavaScript - Float을 Integer로 변환, 3가지 방법
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열에서 문자 또는 단어 추출, 4가지 방법
- JavaScript - 문자열 뒤집기, 거꾸로 출력
- JavaScript - 배열의 마지막 요소 가져오기
- JavaScript - 배열에서 최대, 최소 값 찾기
- JavaScript - 소수점 자리수 올림, 내림, 반올림, 제거 방법
- JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법
- JavaScript - 타입 확인 방법 (typeof)
- JavaScript - 빈 배열인지 확인 (Empty Array)
- JavaScript - 배열 길이 확인, 길이 변경 (Array.length)
- JavaScript - 문자열에서 숫자만 추출
- JavaScript - 특정 문자열의 포함 여부 확인 (includes, 정규표현식)
- JavaScript - 배열 합치기 (concat, spread, push)
- JavaScript - 문자열에서 특정 문자 위치 찾기 (indexOf, lastIndexOf)
- JavaScript - 현재 날짜, 시간 가져오기
- JavaScript - 배열 정렬 방법 (오름차순, 내림차순)