
아래는 자바스크립트 또는 제이쿼리를 사용하여 반복문을 만드는 방법을 알아보려고합니다. 어떻게 반복문을 만들 수 있고 어떤 차이가 있는지 알아보세요.
# 자바스크립트 제이쿼리 반복문 만들기자바스크립트에서 반복문(루프)을 만드려고 할 경우 아래와 같이 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이 다음의 값을 가지는 경우 반복문에 어떻게 적용하는지 알아보겠습니다.
var sitename = ['web', 'is', 'free'];
for (var i in sitename) {
console.log(i);
}
for (var i in sitename) {
}
위 예제를 실행하면 어떻게될까요? 아래와 같이 배열이 가진 모든 값을 console에 출력하게됩니다.
'web'
'is'
'free'
'is'
'free'
@ for in을 사용한 예제소스 보기, 객체
동일한 예제이며 배열을 객체로 바꾼 후 어떻게 나타나는지 알아보죠.
var sitename = {
a: 'web',
b: 'is',
c: 'free'
};
for (var i in sitename) {
console.log(i);
console.log(sitename[i]);
}
a: 'web',
b: 'is',
c: 'free'
};
for (var i in sitename) {
console.log(i);
console.log(sitename[i]);
}
위 예제를 실행하면 어떻게될까요? 결과는 아래와 같습니다.
a
web
b
is
c
free
web
b
is
c
free
변수 i 값에는 각각의 프로퍼티 이름이 저장되어 있고 첫번째 console.log() 명령어로 이 프로퍼티 값이 출력됩니다. 이를 사용하여 프로퍼티 값을 그 아래의 console.log() 명령어를 사용하여 출력할 수 있습니다...
! for문 내부에 break 사용하기, 반복문 멈추기
만약 실행중인 반복문을 함수 중간에 강제로 멈추려면? 이때 break 키워드를 사용할 수 있습니다. for 루프문을 수행하다가 break를 만나면 즉시 중단되게됩니다. 예를들어 1부터 10까지의 값을 더하는 아래의 예제를 1부터 5까지만 더하고 멈추려면 break를 값 5가 끝난 이후 사용하면 됩니다.
sum = 0;
for (var i = 1; i < 11; i++) {
sum = sum + i;
if (i == 5) break;
}
console.log(sum);
for (var i = 1; i < 11; i++) {
sum = sum + i;
if (i == 5) break;
}
console.log(sum);
출력값은 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까지의 합을 더하는 반복문을 만들어보겠습니다.
sum = 0;
for(var i = 1; i < 6; i++) {
sum = sum + i;
}
console.log(sum);
위 코드를 실행하면 1부터 5까지의 합 15가 출력됩니다. 매우 간단하죠?for(var i = 1; i < 6; i++) {
sum = sum + i;
}
console.log(sum);
@ for문 내부의 for문 사용하기
for문 내부에 for문을 사용하기도합니다. 사실 매우 자주 사용되죠. 아래 코드를 봐주세요.
sum = 0;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
sum = sum + 1;
}
}
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
sum = sum + 1;
}
}
값이 어떻게 나올까요? 실행하면 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() 메소드입니다. 그럼 아래는 예제소스입니다.
var sitename = ['web', 'is', 'free'];
$.each(sitename, function(index, item) {
console.log(index);
console.log(item);
})
$.each(sitename, function(index, item) {
console.log(index);
console.log(item);
실행하면 아래와 같이 출력됩니다.
0
web
1
is
2
free
web
1
is
2
free
아래는 또 다른 예제입니다. 아래 예제는 해당 요소의 배열이 가진 각각의 index 번호와 내용을 동시에 출력합니다.
var test = [1, 2, 3];
$.each(test, function(index, item) {
console.log(index + '=>' + item.innerHTML);
})
$.each(test, function(index, item) {
console.log(index + '=>' + item.innerHTML);
})
위 코드를 실행하면 아래처럼 결과가 나타나죠.
0 => 1
1 => 2
2 => 3
1 => 2
2 => 3
위와 같은 예제처럼 배열을 사용하는 경우 index를 사용하면 해당하는 위치의 값에 접근할 수 있겠죠. each() 메소드는 엘리먼트, DOM 노드에도 사용할 수 있는데 이때 this를 사용하면 현재 해당하는 엘리먼트 요소를 조작할 수 있습니다.
! forEach()를 사용한 반복문 만들기배열을 조작하는 경우 내장 함수인 forEach()를 사용할 수 있습니다. 이 역시 반복문 중 하나이며 아래 예제는 간단하게 현재 index값을 반환하게됩니다.
test = [1, 2, 3];
test.forEach(function(item, index) {
console.log(index);
});
test.forEach(function(item, index) {
console.log(index);
});
위 코드를 실행하면 아래와 같이 index값이 각각 출력됩니다.
0
1
2
1
2
Author ByEnSSo
네. 도움이 되었어요
아니요. 별로에요