자바스크립트 배열과 반복문 4가지 using javascript array loop

자바스크립트의 배열을 반복하기 위해 사용하는 것이 for 와 forEach 이다. for문은 증가값과 조건값에 따라 반복을 할 수 있다. forEach는 처음요소부터 마지막요소까지 모두 반복한다. forEach 를 사용하면 코드의 길이를 줄일 수도 있지만 실행환경에서 무리가 생기기도 한다. 차이가 있지만 그럼에도 forEach 는 for 보다 편한 건 어쩔 수 없다.

자바스크립트 배열과 반복문 4가지
using javascript array loop

자바스크립트를 이용해 반복문을 사용하는 방법들은 여러가지가 있다.

무작정 돌리는 방법, 콜백함수를 사용하는 방법, 타입스크립트 형식으로 사용하는 방법등이 있지만, 선택의 문제다.

무엇을 사용하든 상관은 없다.

자신에게 맞는 방법을 선택하면 된다.

배열 반복문

자바스크립트에서 배열의 값을 가공하기 위해 반복문을 사용한다.

반복문을 사용하는 대표적인 키워드는 for 와 forEach 가 있다.

키워드는 대소문자를 구분하기 때문에 주의하도록 하자.

for 문과 forEach 의 경우 미세한 차이가 있지만 생략한다.

자바스크립트 배열을 반복하는 방법이 더 중요하기 때문이다.

for 반복문과 배열

가장 많이 사용하는 일반적인 방법이다.

초기값이 있고 조건값과 증가, 감소가 있다.

조건이 참이면 값이 증가 또는 감소하면서 반복을 하게 된다.

for( 초기값 ; 조건 ; 증가 또는 감소 ) {
	// 코드작성
}

forEach 반복문 콜백함수 사용

forEach 반복문을 사용하여 반복을 하는 방법이다.

forEach의 인자값으로 함수명을 적어주면 해당 함수가 반복되며 함수의 인자값에 배열의 인자값들이 하나씩 들어가게 된다.

Array.forEach(함수명);

var function = 함수명(Array){
	// 코드작성
}

forEach 화살표

화살표 키워드를 사용하는 방법이다.

화살표를 사용할 경우 배열의 각요소는 자동으로 반복된다.

자동으로 인자값이 선택되며 반복되기 때문에 코드적으로는 가장 편하다.

Array.forEach(
	요소 => // 코드작성
)

forEach 반복 요소들 선택

forEach 반복문은 각 요소를 알아서 선택한다.

인덱스와 요소값들을 지정하여 사용하는 방법이기도 하다.

vArray.forEach(function(element, index, array){
	// to do
});

샘플 코드

위에서 언급한 for 반복문과 forEach 반복문을 표현해 보기로 한다.

위의 내용이 이해가 되지 않더라도 코드로 보면 이해될 것이다.

의외로 좋은 기능이 많기 때문에 마음에 드는 것으로 골라서 사용하면 된다.

<!DOCTYPE html>
<html>
    <body>

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

        <script>

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

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

            for(let lp = 0; lp < vArray.length; lp++) {
                console.log(`배열의 ${lp} 번째 값은 ${vArray[lp]} 입니다.`);
            }

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

            vArray.forEach(fnLoopFunc)

            function fnLoopFunc(vArray) {
                console.log(vArray);
            }

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

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

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

            vArray.forEach(function(ele){
                console.log(ele);
            });

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

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

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

        </script>

    </body>
</html>

결과화면을 보면 이해가 더 쉽다.

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

자바스크립트 배열 문자열 변환하기 Converting javscript array to string (0)	2021.12.23
자바스크립트 배열 처음과 마지막 접근 accessing javascript array first and last value (0)	2021.12.21
자바스크립트 배열 길이와 정렬하기 javscript array length and sort (0)	2021.12.20
자바스크립트 배열의 데이터타입 javascript array data type (0)	2021.12.18
자바스크립트 배열 화면 출력 display javascript array values (0)	2021.12.17

자바스크립트 배열과 반복문 4가지 using javascript array loop