자바스크립트로 반복문 만들기

아래는 자바스크립트 또는 제이쿼리를 사용하여 반복문을 만드는 방법을 알아보려고합니다. 어떻게 반복문을 만들 수 있고 어떤 차이가 있는지 알아보세요.

# 자바스크립트 제이쿼리 반복문 만들기

자바스크립트에서 반복문(루프)을 만드려고 할 경우 아래와 같이 for문을 사용하는 방법이 가장 많이 사용됩니다.  반복문을 배우는 경우 가장 먼저 for문을 먼저 알고 나머지 방법들을 알아가는 것이 좋습니다.

! 자바스크립트에서 반복문을 사용하는 다양한 방법들

1. for in을 사용한 반복문
2. for length를 사용하는 방법
3. 제이쿼리(jQuery)를 사용한 each() 함수 반복문
4. do() while 반복문
5. while 반복문

위 방법들이 먼저 가장 쉽고 빠르게 적용 가능한 for in 반복문을 알아봅니다.

! for in 반복문 알아보기

for in 반복문의 장점은 가장 쉽고 간단한 방법입니다. for in은 배열이나 객체처럼 내부에 값을 가지는 경우 적용할 수 있습니다. 먼저 아래는 간단한 사용방법입니다.

for (var i in variable) { ... }


variable에는 배열이나 객체가 사용되며 배열의 경우 각 값들이 사용됩니다. 객체가 사용된다면 내부의 프로퍼티나 메소드 값을 반환하게됩니다. 그럼 아래 예제를 봐주세요.


@ for in을 사용한 예제소스 보기, 배열값
아래는 배열 변수 sitename이 다음의 값을 가지는 경우 반복문에 어떻게 적용하는지 알아보겠습니다.

위 예제를 실행하면 어떻게될까요? 아래와 같이 배열이 가진 모든 값을 console에 출력하게됩니다.
보시는 것과 같이 매우 간단하게 배열을 사용하여 반복문을 만들었습니다. 그렇다면 객체를 사용하면 어떻게 될까요? 동일한 방법으로 배열을 객체로 바꾸어 다시 확인해보겠습니다.


@ for in을 사용한 예제소스 보기, 객체
동일한 예제이며 배열을 객체로 바꾼 후 어떻게 나타나는지 알아보죠.

위 예제를 실행하면 어떻게될까요? 결과는 아래와 같습니다.

변수 i 값에는 각각의 프로퍼티 이름이 저장되어 있고 첫번째 console.log() 명령어로 이 프로퍼티 값이 출력됩니다. 이를 사용하여 프로퍼티 값을 그 아래의 console.log() 명령어를 사용하여 출력할 수 있습니다...

! for문 내부에 break 사용하기, 반복문 멈추기

만약 실행중인 반복문을 함수 중간에 강제로 멈추려면? 이때 break 키워드를 사용할 수 있습니다. for 루프문을 수행하다가 break를 만나면 즉시 중단되게됩니다. 예를들어 1부터 10까지의 값을 더하는 아래의 예제를 1부터 5까지만 더하고 멈추려면 break를 값 5가 끝난 이후 사용하면 됩니다.

출력값은 1부터 10을 합한 55가 아닌 5까지만 합한 15가 출력됩니다. 이처럼 break를 사용하여 간단하게 for 반복문을 멈출 수 있습니다.


여기까지 for in 반복문에 대하여 자세하게 알아보았습니다. 이처럼 배열이나 객체 등 개수가 지정된 경우 for in을 사용할 수 있습니다. 하지만 가장 기본이 되는건 for length를 사용하는 방법입니다. 이 방법이 가장 많이 사용되는 자바스크립트 반복문이라 할 수 있습니다. 그럼 아래에서 알아봅니다.

! 자바스크립트 for length 반복문 알아보기

가장 쉽게 사용할 수 있는 반복문입니다. while 반복문과 비슷하나 for문의 경우 변수 등의 대상의 개수가 변할 수 있는 경우 더 많이 사용됩니다. 변수의 length에 따라 적용할 수 있기 때문이죠. 일단 어떻게 사용되는지 간단한 문법을 보겠습니다.

for(var i = 0; i < sitename.length; i++) { ... }


for문의 괄호에는 세 가지 값이 사용됩니다. 각각의 값들은 세미콜론(;)으로 구분되죠. 위에서 사용된 각각의 값들을 나누어보면 아래와 같습니다.

• var i = 0
• i < sitename.length
• i++
  

순서대로 이해하면 됩니다. 맨 처음에는 변수를 선언하는 부분입니다. 다들 i를 많이씁니다. 즉 i = 0으로 변수를 선언합니다.
그 다음의 i < sitename.length는 조건을 말하며 해당 조건일 경우 무조건 {} 내부의 코드가 실행됩니다.
마지막으로 i++은 i를 1씩 커지도록 합니다. 즉 반복문에서 벗어날 수 있도록 하는 코드입니다.

흠.. 그렇다면 간단한 반복문을 하나 만들어볼까요? 1부터 5까지의 합을 더하는 반복문을 만들어보겠습니다.
위 코드를 실행하면 1부터 5까지의 합 15가 출력됩니다. 매우 간단하죠?

@ for문 내부의 for문 사용하기
for문 내부에 for문을 사용하기도합니다. 사실 매우 자주 사용되죠. 아래 코드를 봐주세요.

값이 어떻게 나올까요? 실행하면 9가 출력됩니다. for문 내부에 for를 사용할 경우 주의할 점이 있는데 바로 루프에 사용되는 변수 i 또는 j의 값입니다. 보통 i, j 등의 값들을 사용하는 데 혼동되지 않도록 주의해야합니다. 그래서 i나 j 처럼 약속한 값을 사용하는 것이 좋습니다... 만약 내부 for문에 또 하나의 for문이 사용된다면? k를 사용할 수도 있겠죠. 변수값 사용만 주의하면 됩니다. 이처럼 i, j, k ... 처럼 사용할 수도 있지만 개인적으로 i1, i2, i3처럼 숫자를 사용하는 방법을 좋아합니다. 하지만 반복문 내부에 반복문을 사용하면 코드가 복잡해져서 가급적 이런 코드를 피하려고 노력합니다.

! 제이쿼리 each() 메소드를 사용한 반복문

이번에는 제이쿼리의 each()를 사용하는 방법을 알아봅니다. 제이쿼리를 사용하는 경우 each가 많이 사용되는데 each()의 사용방법은 아래처럼 두가지로 구분할 수 있습니다. 결과는 동일하나 사용법의 차이가 존재합니다.

$(items).each(function(index, item) { ... });
$.each(items, function(index, item) { ... });


for in과 비슷하게 사용되는 each() 메소드입니다. 그럼 아래는 예제소스입니다.

실행하면 아래와 같이 출력됩니다.

아래는 또 다른 예제입니다. 아래 예제는 해당 요소의 배열이 가진 각각의 index 번호와 내용을 동시에 출력합니다.

위 코드를 실행하면 아래처럼 결과가 나타나죠.

위와 같은 예제처럼 배열을 사용하는 경우 index를 사용하면 해당하는 위치의 값에 접근할 수 있겠죠.  each() 메소드는 엘리먼트, DOM 노드에도 사용할 수 있는데 이때 this를 사용하면 현재 해당하는 엘리먼트 요소를 조작할 수 있습니다.

! forEach()를 사용한 반복문 만들기

배열을 조작하는 경우 내장 함수인 forEach()를 사용할 수 있습니다. 이 역시 반복문 중 하나이며 아래 예제는 간단하게 현재 index값을 반환하게됩니다.

위 코드를 실행하면 아래와 같이 index값이 각각 출력됩니다.