Leeyanggoo
[JS] 자바스크립트 반복문과 for문에 대해 알아보자!! 본문
반복문은 코드 블록을 반복적으로 실행할 수 있도록 하는 구문입니다.
그중 자바스크립트에서 가장 많이 사용하는 반복문은 for문입니다.
반복문을 사용하는 이유는 불필요한 명령을 늘어놓지 않아도 된다는 점, 그만큼 소스 코드도 깔끔해진다는 점입니다.
오늘은 반복문 중에 for문에 대해 알아보겠습니다! :)
for문
for문은 지정된 조건이 'true'인 동안 코드 블록을 반복 실행합니다.
일반적으로 반복 횟수가 명확한 경우에 사용됩니다. for문의 구문은 다음과 같습니다.
for(초깃값; 조건식; 증감식){ }
초깃값 : 몇 번 반복할지 지정하기 위해 변수를 선언합니다. 초깃값은 보통 0이나 1부터 시작합니다.
조건식 : 문장을 어떤 조건으로 반복할지 정하는 조건식을 넣습니다. for문은 'true'인 동안 코드 블록을 반복 실행합니다.
증감식 : 문장을 실행한 후 변수를 증가시키거나 감소시키는 식을 넣습니다. 연산자 '++', '--'가 자주 쓰이는 예입니다.
See the Pen javascript_for_1 by leeyanggoo (@leeyanggoo) on CodePen.
다음과 같은 for문은 이런 순서로 진행됩니다.
1. 초깃값으로 변수 i에 0을 할당함.
2. 조건식으로 변수 i가 5보다 작으면 true의 식을 만듬. 현재 값은 0이기에 true. 다음으로 넘어감.
3. 이때 바로 증감식으로 넘가는 것이 아니라 document.write[]에 있는 변수 members의 배열로 변수 i의 값인 0이 들어감.
4. 배열 members의 첫 번째 값인 1을 도출함.
5. 증감식에 값이 0인 i가 들어가고 결과를 도출함. 결과는 i = 0 + 1.
6. i = 1로 변환되어 초깃값에 들어감.
이런 과정을 거치며 점점 증가한 변수 i는 조건식 "i<5"가 false의 값을 내는 4까지 증가하며 식을 반복합니다.
forEach문
배열명.forEach(콜백 함수){ }
forEach문은 배열의 길이가 너무 길어져 배열의 크기를 알 수 없거나, 배열의 요소를 가져와 함수를 실행해야 할 때 사용합니다. 여기서 콜백 함수란 인자처럼 사용하는 함수를 말합니다.
See the Pen Untitled by leeyanggoo (@leeyanggoo) on CodePen.
다음은 forEach문에서 members 배열에 있는 각 요소를 member라고 정해 놓고 member를 화면에 표시하는 예제입니다. 이때 이름은 member 대신 다른 이름을 써도 되지만, 보통 배열 변수 이름은 복수형으로 각 요소는 단수형으로 사용합니다.
for...in문
배열에서만 반복되는 반복문이 forEach문이라면 for...in문은 반복해서 객체의 값을 가져와 처리할 수 있게 합니다.
객체의 속성을 반복하며, 객체의 모든 열거 가능한 속성을 반복할 수 있도록 합니다.
for..in 문은 주로 객체를 반복하며, 배열에는 사용하지 않는 것이 좋습니다.
for(변수 in 객체){ ... }
See the Pen Untitled by leeyanggoo (@leeyanggoo) on CodePen.
for...in문은 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하기 위해 대괄호([])를 사용합니다.
여기서 변수 key는 객체의 속성이 할당될 변수이고, person은 반복할 객체를 의미합니다.
객체의 속성 이름은 문자열로 반환되며, 변수에 할당됩니다.
for...of문
for...of문은 문자열이나 배열 같은 반복 가능한 자료에서 사용합니다.
앞에서 설명드렸던 forEach문도 for...of문으로 작성할 수 있습니다.
for(변수(단수형) of 변수){ ... }
See the Pen javascript_for_4 by leeyanggoo (@leeyanggoo) on CodePen.
for..of 문은 배열의 요소 값을 반환하기 때문에, 배열의 인덱스를 반환하는 for..in 문보다 직관적이고 간결합니다.
우리는 어떤 변수의 값을 도출하고자 하는지에 따라 그에 적절한 반복문을 쓴다면 편리하게 작업할 수 있습니다. :)
짝수 홀수 구분 프로그램
(result 누르면 알림창 뜨니까 콘솔창에서 보도록 하자)
See the Pen javascript_홀짝 by leeyanggoo (@leeyanggoo) on CodePen.
