자바스크립트 배열 처음과 마지막 접근 accessing javascript array first and last value

자바스크립트 배열을 사용시 자주 사용되는 것이 마지막 요소에 접근하는 것이다. 쉽지만 의외로 귀찮다. 배열의 마지막요소는 배열의 길이에서 1을 빼면 된다. 배열의 처음 요소는 0이다. 이것은 배열의 인덱스가 0부터 시작하기 때문이며 배열의 갯수와 마지막 인덱스는 차이가 1이다.

자바스크립트 배열 처음과 마지막 접근
accessing javascript array first and last value

자바스크립트 배열에 접근시 가장 곤혹스러운게 처음값과 마지막값을 가져오는 것이다.

의외로 간단하다.

배열의 길이를 알 수 있는 length 속성과 index 번호를 이용하면 된다.

이를 이용하면 자바스크립트 배열의 처음값과 마지막값을 쉽게 접근하고 값을 가져올 수 있다.

자바스크립트는 배열의 값을 가져올 때 숫자로 된 인덱스번호를 이용한다는 것을 생각하자.

배열의 처음, 마지막 접근

이제 배열의 갯수와 인덱스를 이용해 접근을 해 보도록 한다.

배열의 인덱스는 0부터 시작한다.

배열의 갯수는 Array.length 속성으로 알 수 있다.

배열의 마지막은 갯수에서 1을 빼면 된다.

vArrayLength = Array.length
vFirstValue = Array[0]
vLastValue = Array[vArrayLength-1]

샘플코드

자바스크립트 예제를 간단히 만들어 본다.

위에서 언급된 코드를 사용하여 자바스크립트 배열의 처음과 마지막 요소에 접근하여 값을 가져와 보도록 한다.

코드는 길지만 위에서 언급한 코드만 살펴보면 그만이다.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 배열 객체</h2>
        <div id="cont">
            <p id="ret1"></p>
            <p id="ret2"></p>
        </div>

        <script>

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

            vArray = new Array(comp, team, count, members);
            
            console.log("----------");

            vArray.forEach(function(ele, idx, array){
                console.log(`배열의 ${idx} 번째 값은 ${ele} 입니다.`);
            });

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

            vIndex = 0
            vAccess = vArray[vIndex];
            vResult = `배열의 ${vIndex} 번째 값은 ${vAccess} 입니다.`;
            console.log(typeof(vResult), vResult);
            document.querySelector("#ret1").innerHTML = vResult;

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

            vIndex = vArray.length - 1;
            vAccess = vArray[vIndex];
            vResult = `배열의 ${vIndex} 번째 값은 ${vAccess} 입니다.`;
            console.log(typeof(vResult), vResult);
            document.querySelector("#ret2").innerHTML = vResult;

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

        </script>

    </body>
</html>

코드를 보면 원본배열을 먼저 출력한다.

그 다음 배열의 처음값과 마지막값을 출력하도록 하였다.

결과화면을 보자.

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

자바스크립트 배열 값 추가 삭제 using javascript array push pop method (0)	2021.12.24
자바스크립트 배열 문자열 변환하기 Converting javscript array to string (0)	2021.12.23
자바스크립트 배열과 반복문 4가지 using javascript array loop (0)	2021.12.20
자바스크립트 배열 길이와 정렬하기 javscript array length and sort (0)	2021.12.20
자바스크립트 배열의 데이터타입 javascript array data type (0)	2021.12.18