본문 바로가기
programming/javascript

javasciprt array unshift shift 자바스크립트 배열에 값의 추가 삭제

by 개코 - 개발과 코딩 2021. 12. 25.

자바스크립트에서 shift 와 unshift 는 배열에 값을 추가하고 삭제할 수 있다. pop과 push 메서드와 동작은 같지만 값을 조작하는 위치는 다르다. shift 와 unshift 는 배열의 처음 부분에서 값을 추가하고 삭제할 수 있다. 이 점이 pop과 push와의 차이점이다.

자바스크립트 배열에 값의 추가 삭제
j
avasciprt array unshift shift

배열에 값을 추가하고 삭제할 때 push 메서드와 pop 메서드를 사용했다.

unshift메서드와 shift 또한 자바스크립트 배열에 값을 추가하고 삭제할 수 있다.

이 들의 차이점은 분명하다.

push 와 pop 메서드는 배열의 마지막 부분에서 값을 추가하고 삭제할 수 있다.

unshift 와 shift 메서드는 배열의 처음 부분에서 값을 추가하고 삭제할 수 있다.

사용법

자바스크립트 배열에 값을 추가하고 삭제할 때 shift 와 unshift 메서드를 사용할 수 있다.

이들은 배열의 처음위치에서 동작한다.

사용법은 push 메서드와 pop 메서드와 같다.

unshift 메서드의 경우 리턴값을 받을 수 있다.

이 리턴값으로 unshift 메서드 동작시 삭제된 값을 알 수 있다.

Array.shift(값)

vReturnValue = Array.unshift()

샘플코드

위의 사용법으로 간단한 자바스크립트 예제를 만들어 본다.

그대로 사용하는 것이기에 어려움은 없다.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 배열 shift unshift 메서드</h2>
        <div id="cont">
            <p id="ret1"></p>
            <p id="ret2"></p>
        </div>

        <script>

            let vText;
            let vComp = ["현대자동차","기아자동차","쌍용자동차","쉐보레"];
            
            console.log("----------");

            console.log(typeof(vComp), vComp);

            console.log("----------");
            
            vText = vComp.shift();

            console.log(typeof(vText), vText);
            console.log(typeof(vComp), vComp);
            document.querySelector("#ret1").innerHTML = vComp;

            console.log("----------");

            vText = vComp.unshift("아우디");

            console.log(typeof(vComp), vComp);
            document.querySelector("#ret2").innerHTML = vComp;

            console.log("----------");

        </script>

    </body>
</html>

원본배열을 하나 만들고 출력을 해 주었다.

shift 메서드로 배열의 가장 처음 부분에 값을 제거하였다.

unshift 메서드로 배열의 가장 처음 부분에 값을 추가하였다.

결과 화면을 보자.

반응형

댓글