본문 바로가기
programming/javascript

자바스크립트 배열 값 출력 가져오기 using javascript array value

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

자바스크립트 배열은 데이터의 집합이며, 인덱스를 가지고 있다. 인덱스를 사용하면 배열의 특정 위치에 있는 값을 가져올 수 있다. 반복문을 통해 배열의 값들을 출력할 수도 있지만 특정 개별값들에 대해 데이터 가공이 필요하다면 인덱스를 사용할 수 있다. 자바스크립트 배열의 인덱스는 대괄호를 이용한다.

자바스크립트 배열 값 출력 가져오기
using javascript array value

이전 포스팅에서 자바스크립트 배열을 얘기하면서 반복문을 통한 배열 값 출력을 해 보았다.

자바스크립트는 인덱스라는 것을 이용하여 배열 값에 접근하고 출력할 수 있다.

인덱스는 쉽게 생각하면 배열의 주소와 같다고 보면 된다.

배열의 인덱스는 0부터 시작하는 것에 주목하자.

배열이 5개라면 첫번째 인덱스는 0 이며, 5번째 인덱스는 4이다.

배열의 값 출력

반복문을 사용하여 배열의 값을 출력하는 방법이 있고, 인덱스를 이용하는 방법이 있다.

위에서도 언급했듯이 인덱스를 이용하면 배열의 특정 위치의 값을 가져올 수 있다.

인덱스를 이용하는 방법은 대괄호와 함께 인덱스 번호를 넣어주면 된다.

array[인덱스번호]

샘플코드

자바스크립트 배열을 만들고 값을 가져오도록 해 본다.

먼저, 배열을 생성하고 배열의 전체 값을 반복문을 통해 가져오고, 다음으로 인덱스를 이용하여 값을 가져오기 해볼 것이다.

코드는 길지만 중요한 것은 배열부분과 반복문 대괄호를 이용한 배열값 접근부분이다.

<!DOCTYPE html>
<html>
    <body>

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

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

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

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

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

            let vArray = new Array(comp, team, count, members);
            
            console.log(typeof(vArray), vArray);

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

            let vEach = null;
            
            vEach = vArray[0];
            console.log(typeof(vEach), vEach);

            vEach = vArray[1];
            console.log(typeof(vEach), vEach);
            
            vEach = vArray[2];
            console.log(typeof(vEach), vEach);
            
            vEach = vArray[3];
            console.log(typeof(vEach), vEach);

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

        </script>

    </body>
</html>

결과화면을 보자.

반복문을 통해 전체 배열 값을 출력하고 있으며, 인덱스를 이용하여 하나씩 출력이 되는 것을 볼 수 있다.

반응형

댓글