본문 바로가기
programming/javascript

자바스크립트 배열 값 변경 changing javascript array value

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

자바스크립트 배열은 인덱스를 사용하여 배열의 값을 변경할 수 있다. 인덱스를 사용할 때는 숫자를 사용하며 대괄호와 같이 사용한다. 배열에 대괄호를 이용해 인덱스 번호를 설정하면 해당 배열의 위치에 있는 값에 접근할 수 있고, 배열의 특정 위치의 값을 변경할 수도 있다.

자바스크립트 변수 값 변경
changing javascript array value

자바스크립트는 배열에 있는 값을 설정할 수 있다.

배열에 접근하기 위해선 숫자로 되어 있는 인덱스 번호를 이용해 접근할 수 있다.

이 때 대괄호를 사용하여 배열의 인덱스번호를 설정하면 배열의 값을 접근할 수 있다.

마찬가지로 자바스크립트 배열의 인덱스를 사용하면 배열에 접근하여 값을 변경할 수 있다.

배열 접근

자바스크립트에서 설정된 배열은 인덱스를 이용하여 값을 가져오고 설정할 수 있다.

이 때 대괄호를 사용한다.

자바스크립트의 배열은 데이터 타입에 관대하고 데이터의 집합인 컬렉션임에 주목하자.

vValue = Array[인덱스 번호];

Array[인덱스번호] = value;

샘플코드

위의 사용방법을 이용하여 배열의 값을 수정해 보도록 한다.

배열의 값을 수정할 때는 인덱스번호를 사용한다는 것을 잊지 않도록 한다.

코드는 길지만 배열과 대괄호, 인덱스번호가 있는 부분만 살펴보면 이해할 수 있다.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 배열 만들기</h2>
        <div id="cont">
            <p id="ret1"></p>
        </div>

        <script>
            
            console.log("----------");

            comp = "스타쉽";
            team = "아이브";
            members = ["리즈","레이","원영","유진","가을","이서"];
            count = members.length;

            vArray = new Array(comp, team, count, members);

            vArray.forEach(
                lpEach => console.log(lpEach)
            );

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

            comp = "SM Ent";
            team = "에스파";
            members = ["지젤", "카리나", "윈터", "닝닝"];
            count = members.length;

            vArray = new Array(comp, team, count, members);

            vArray[0] = comp;
            vArray[1] = team;
            vArray[2] = count;
            vArray[3] = members;

            vArray.forEach(
                lpEach => console.log(lpEach)
            );

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

            comp = "JYP Ent";
            team = "트와이스";
            members = ["모모", "지효", "나연", "다현", "채영", "사나", "정연", "미나", "쯔위"];
            count = members.length;

            vArray[0] = comp;
            vArray[1] = team;
            vArray[2] = count;
            vArray[3] = members;

            vArray.forEach(
                lpEach => console.log(lpEach)
            );

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

        </script>

    </body>
</html>

배열의 값을 설정하였다.

배열의 값을 재설정하면서 인덱스번호를 사용하여 배열의 값을 변경하고 있는 것을 알 수 있다.

결과화면을 보자.

값이 제대로 변경되고 있음을 알 수 있다.

반응형

댓글