루프 문은 코드 블록을 반복적으로 실행할 수 있게 해주는 구성입니다.
그 중 JavaScript에서 가장 많이 사용되는 반복문은 for문입니다.
반복문을 사용하는 이유는 불필요한 명령어를 함께 묶을 필요가 없고 소스 코드도 깔끔해지기 때문입니다.
오늘 우리는 Loop Statements에서 for 문에 대해 배울 것입니다! 🙂
진술에
for 문은 지정된 조건이 참인 동안 코드 블록을 반복적으로 실행합니다.
일반적으로 반복 횟수가 명확한 경우에 사용됩니다. for 문의 구문은 다음과 같습니다.
for (초기값; 조건식; 증분식){ }
초기 값: 반복 횟수를 나타내는 변수를 선언합니다. 초기 값은 일반적으로 0 또는 1에서 시작합니다.
조건식: 문장이 반복될 조건을 지정하는 조건식을 입력합니다. for 문은 true인 동안 코드 블록을 반복적으로 실행합니다.
증가 및 감소 표현식: 명령문이 실행된 후 변수를 증가 또는 감소시키는 표현식을 삽입하십시오. ‘++’ 및 ‘–‘ 연산자는 일반적으로 사용되는 예입니다.
펜 참조 javascript_for_1 by 이양구 (@leeyanggoo) 에 코드펜.
다음 for 문은 이 순서로 발생합니다.
1. 변수 i를 초기값 0으로 지정합니다.
2. 변수 i가 5보다 작으면 true인 조건식을 만듭니다. 현재 값이 0이므로 True입니다. 다음에 일어날.
삼. 이 시점에서 증가 및 감소 공식으로 직접 이동하지 않습니다. document.write()의 변수 요소 배열에는 변수 i의 값인 0이 포함됩니다.
4. 배열 구성원의 첫 번째 값인 1을 도출합니다.
5. 증가 및 감소 공식에 i 값을 0으로 입력하고 결과를 도출합니다. 결과는 i = 0 + 1입니다.
6. i=1로 변환하여 초기값을 입력합니다.
이 연산에 의해 점차 증가하는 변수 i는 4로 증가하고 조건식 “i < 5"는 "false"로 평가되어 식이 반복됩니다.
각 명령에 대해
arrayname.forEach(콜백 함수){ }
forEach 문은 배열 길이가 너무 길어서 배열의 크기를 알 수 없거나 배열의 요소를 가져와서 함수를 수행해야 하는 경우에 사용됩니다. 여기서 콜백 함수는 인수로 사용되는 함수를 의미합니다.
펜 참조 무제 by 이양구 (@leeyanggoo) 에 코드펜.
다음은 forEach 문에서 members 배열의 각 요소를 member로 설정하여 화면에 표시한 예입니다. 이 경우 “Member” 대신 다른 이름을 사용할 수 있지만 일반적으로 배열 변수 이름은 복수이고 각 요소는 단수입니다.
…에 대한 진술
배열에서만 반복되는 반복문이 forEach 문이라면 for…in 문을 통해 객체의 값을 반복적으로 가져오고 처리할 수 있습니다.
개체의 속성을 반복하여 개체의 모든 열거 가능한 속성을 반복할 수 있습니다.
for..in 문은 주로 개체를 반복하며 배열에는 권장되지 않습니다.
for(객체 내 변수){ … }
펜 참조 무제 by 이양구 (@leeyanggoo) 에 코드펜.
for…in 문은 객체의 키만 얻을 수 있기 때문에 대괄호(())를 사용하여 해당 키의 값에 액세스합니다.
여기서 변수 key는 개체의 속성이 할당되는 변수이고 person은 반복할 개체입니다.
개체의 속성 이름은 문자열로 반환되고 변수에 할당됩니다.
…에 대한 진술
for…of 문은 문자열 및 배열과 같은 반복 가능한 데이터와 함께 사용됩니다.
위에서 설명한 forEach 문은 for…of 문으로도 작성할 수 있습니다.
for (변수의 변수(단수)){ … }
펜 참조 javascript_for_4 by 이양구 (@leeyanggoo) 에 코드펜.
for..of 문은 배열의 요소 값을 반환하므로 배열의 인덱스를 반환하는 for..in 문보다 더 직관적이고 간결합니다.
도출하려는 변수에 따라 적절한 루프를 사용하면 편안하게 작업할 수 있습니다. 🙂
짝수 홀수 홀수 프로그램
펜 참조 javascript_even by 이양구 (@leeyanggoo) 에 코드펜.
![[자료형] 문자열(string) - [자료형] 문자열(string) -](https://vest.sugok.kr/wp-content/plugins/contextual-related-posts/default.png)