자바스크립트 배열 값 수정 삭제

자바스크립트는 배열의 값을 수정하고 삭제할 때 먼저 배열의 길이를 알 필요가 있다. 수정할 때는 배열의 인덱스를 지정하여 값을 수정할 수 있다. 값의 삭제는 delete 키워드를 사용하면 된다. 삭제 후 남아있는 빈공간은 filter를 사용한다.

자바스크립트 배열 값 수정 삭제

배열을 조작하다보면 배열의 값을 수정하고 삭제할 필요가 있다.

하물며, 약간은 귀찮은 배열의 마지막 값을 변경할 필요도 있다.

배열의 값에 접근하려면 인덱스를 이용한다.

인덱스는 숫자 데이터이다.

자바스크립트에서 배열의 값을 조작하고 가공하려면 length 속성을 사용하여 배열의 길이를 알 필요가 있다.

배열의 길이를 알면 동적으로 값을 수정하고 삭제할 수 있다.

배열 값 수정

자바스크립트에서 배열의 값을 수정해 본다.

수정을 할 때는 인덱스를 이용한다.

자바스크립트 배열의 특정 위치의 값을 바꾸기 위해서 대괄호와 인덱스를 사용하여 배열의 값을 설정하면 된다.

Array[인덱스번호] = 값

배열 값 삭제

배열의 값을 삭제할 때는 pop() 메서드와 shift() 메서드를 사용할 수 있다.

pop() 메서드는 배열의 마지막 값을, shift() 메서드는 배열의 처음 값을 삭제한다.

둘 다 리턴값은 삭제되는 값을 결과로 보여준다.

자신이 원하는 특정위치의 값을 삭제할 필요도 있다.

이 때는 delete 키워드를 사용하고 배열의 인덱스를 지정하면 된다.

delete Array[삭제할 인덱스 위치]

완전 삭제

delete 키워드를 사용하면 배열의 전체 길이에는 변화가 없다.

난감하다.

이 부분은 empty 혹은 undefined 값으로 채워져 있다.

단순히 값만 삭제된 것이다.

이 때는 filter 메서드를 사용하여 완전히 삭제할 수 있다.

Array.filter(function (el) {
	return el != null;
});

샘플코드

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

위에서 언급한 것을 순서대로 작성해 본다.

<!DOCTYPE html>
<html>
    <body>

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

        <script>

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

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

            console.log("----------");
            
            let vLength = vComp.length;

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

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

            vComp[1] = "아우디";

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

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

            vLength = vComp.length;
            delete vComp[vLength-1];
            delete vComp[1];

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

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

            var vFilter = vComp.filter(function (el) {
                return el != null;
            });
            vComp = vFilter;

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

        </script>

    </body>
</html>

원본 배열을 만들고 길이와 값을 확인한다.

이후 특정 위치의 값을 변경하고, delete 키워드를 사용하여 값을 삭제한다.

삭제 후 배열에 남아있는 empty 값을 완전삭제하기 위해 filter 를 사용했다.

결과 화면을 보자.

'programming > javascript' 카테고리의 다른 글

자바스크립트 배열 값 추가 splice 사용법 (0)	2021.12.28
자바스크립트 배열 합치기 Merging Javascript Array (0)	2021.12.27
javasciprt array unshift shift 자바스크립트 배열에 값의 추가 삭제 (0)	2021.12.25
자바스크립트 배열 값 추가 삭제 using javascript array push pop method (0)	2021.12.24
자바스크립트 배열 문자열 변환하기 Converting javscript array to string (0)	2021.12.23

자바스크립트 배열 값 수정 삭제