반복문 기초1 - for

특정 실행문을 지정된 횟수만큼 여러번 반복해야 할 때 사용하는 구문중 하나입니다.

루프(Loop), 순환문이라고도 합니다.

for문은 조건에 충족하는 지정 횟수만큼 반복 실행하는 횟수가 정해진 반복문입니다.

for문은 반복 횟수를 기준으로 반복 처리를 하는 for 문과, 여러개의 요소를 가지는 배열, 객체 등의 전체 갯수를 기준으로 전체를 반복 순환하는 for ~ in, for ~ of, forEach 문 2가지 종류가 있습니다

for 문

for 문의 기본 구조는 다음과 같습니다.

for(시작값; 조건문; 간격조건) {    //실행 구문}

괄호안의 조건 규칙을 만족하는 동안 루프를 돌게 됩니다.

규칙은 세미콜론으로 구분해 시작값, 조건문, 간격조건 3개가 오게됩니다.

for 루프문의 의미는 "시작값에서 시작해 조건문의 조건을 충족(true)하는 동안, 간격조건만큼 값을 순차적으로 증가시키면서 //실행 구문을 반복 실행한다." 입니다.

예를 들면

1부터 9까지 홀수만 출력하는 경우

for(let i = 1; i < 10; i=i+2){    console.log(i);    }

이렇게 구현할 수 있습니다.

for 문에는 루프를 도는 조건을 체크하는 용도로 사용하는 숫자 변수값이 하나 필요합니다.

숫자는 정수와 실수 모두 사용 가능합니다,

변수명은 임의로 정해서 사용해도 되지만, 보통은 코드의 간결함을 유지하기 위해 i, j, k 같은 단순 알파벳으로 사용합니다.

"myveryspecialvariable" 이런 변수명을 사용해도 됩니다.

"변수 시작은 1에서부터 조건문을 만족하는 동안( i 가 10보다 작은 동안) 루프를 반복 실행하는데, 변수를 2씩 증가시킨다." 는 뜻이며, 

따라서 변수 i는 1, 3, 5, 7, 9 까지 증가한 후 조건문을 충족하지 못하면서 for 루프를 빠져나갑니다.

시작값, 조건문, 간격 조건의 값은 정수와 실수가 모두 가능하지만, 반복문의 가독성을 위해서 정수형으로 사용하는 것을 권장합니다.

그러나

for(i = 0.5; i < 10.7; i=i+0.5){    //반복 실행 구문}

와 같은 실수형 사용 방법도 사용 규칙에 어긋나는 것이 아니므로, 구현해서 사용하는 방식은 어디까지나 개인의 취향입니다.

for 반복문은 배열의 내용을 순차적으로 나열하는데 많이 사용합니다.

예를 들어 아래와 같이 객체 배열을 목록으로 출력할 수 있습니다.

let friends = [    {name: '라이언', age: 5},      {name: '어피치', age: 4},    {name: '콘', age: 2},    {name: '무지', age: 3}];
for(let i = 0; i < friends.length; i++){    console.log('이름: ' + friends[i].name + '나이: ' + friends[i].age);}

배열을 for 반복문으로 출력할 경우 조건문의 조건 체크는 배열의 길이 만큼이 됩니다.

배열의 길이는 배열.length 속성으로 얻을 수 있으므로, 배열의 정확한 갯수만큼 for 반복문을 실행할 수 있게 됩니다.

for ~ of 문

여러개의 요소를 가지는 배열(Array), 문자열(String), 맵(Map), 셋(Set)의 경우, 모든 요소에 대해서 조건 체크를 하거나 순환하면서 요소의 값을 갱신하는 작업을 할 필요가 있는 경우가 있습니다.

for 문으로 배열, 객체 요소의 갯수 만큼 순환을 해도 되지만, 조금 더 간결하고 안전한 for ~ of 문을 사용하는 것이 좋습니다.

for ~ of 문은 배열(Array), 문자열(String), 맵(Map), 셋(Set) 객체에 사용할 수 있습니다. 규격 명세에는 [Symbol.iterator] 속성이 있는 객체에만 사용할 수 있다고 되어있기 때문에 일반 객체에는 사용할 수 없습니다.

일반 객체의 속성에 접근하려면 for ~ in 을 사용해야 합니다.

for ~ of 문의 구조는

for(let 요소변수이름 of 대상){    //반복 실행문}  

위의 for 문으로 작성한 출력문 예를 for ~ in 으로 구현하면 아래와 같습니다.

let friends = [    {name: '라이언', age: 5},    {name: '어피치', age: 4},    {name: '콘', age: 2},    {name: '무지', age: 3}];
for(let friend of friends){console.log('이름: ' + friend.name + '나이: ' + friend.age);}

"반복 실행 조건을 체크하는 괄호안의 구문은 friends 배열의(of) 있는 요소 한개(friend) 씩을 가져와 반복 실행문에 대입한다." 는 뜻입니다.

괄호안은 (let 개별요소변수명 of 객체명) 과 같이 작성합니다.

개별요소변수명은 원하는 임의의 이름으로 작성할 수 있으며, 반복 실행문에서만 사용하는 변수명이 됩니다.

for 문과의 차이는 괄호 안의 조건식이 루프를 도는 조건을 체크할 필요없이 간결해진 점과, 반복 실행문에 인덱스가 없다는 점입니다.

for ~ of 문의 장점은 반복 실행문에 배열, 객체의 인덱스가 필요없기 때문에 인덱스 표기 실수로 인해 엉뚱한 정보를 읽는 실수가 발생하지 않는 것입니다.

또한, 인덱스가 없기 때문에 배열, 객체의 속성이나 요소에 더 짧고 알아보기 쉽게 접근할 수 있습니다.

배열이나 객체의 전체 요소에 접근할 경우 for 문 보다는 for ~ of 문을 사용하면 더 견고하고 안정적인 코드를 작성할 수 있습니다.

!주의할 점

for, for ~ of 반복문에서 배열이나 객체의 요소를 삭제하는 작업을 하면 에러를 발생시킬 수 있습니다.

요소를 삭제하는 방법에 따라서는 배열 요소는 삭제되었지만, 배열 길이는 줄지 않는 경우도 있기 때문에, 예상과는 다른 결과를 가져올 수도 있습니다.

반복문에서는 순환을 하고 있는 배열이나 객체의 요소를 삭제하는 것은 피해야 합니다.

for ~ in 문

객체의 전체 속성 키를 나열하는데 사용하는 반복문입니다.

배열(Array), 문자열(String), 맵(Map), 셋(Set) 객체에 사용할 경우 배열의 인덱스 값만 반환되므로 주의해야 합니다.

구조는

for(let 속성 in 객체){    //속성 처리 구문}

입니다.

예를 들어

let ryon = {name: '라이언', age: 5, gendor: 'male'};
for(let prop in ryon){  console.log('속성: '+prop+' 값:'+ryon[prop]);}

이런 방법으로 객체의 속성과 속성값을 나열할 수 있습니다.

forEach 문

구문은 아니면 배열의 메서드입니다.

배열의 모든 요소를 순환하는 메서드로, 콜백 함수를 이용해 배열 요소에 다양한 처리를 할 수 있습니다.

배열 요소 순환 처리에 필요한 요소 객체와 인덱스 값을 모두 인자로 받을 수 있습니다.

배열.forEach(function (요소[, 인덱스]) {    //요소 처리 실행문});

인덱스는 생략 가능합니다. 요소가 첫번째 파라메터로 온다는 점에 유의해야 합니다.

예를 들어

let friends = [    {name: '라이언', age: 5},    {name: '어피치', age: 4},    {name: '콘', age: 2},    {name: '무지', age: 3}];friends.forEach(function(friend,idx){    console.log('이름: ' + friend.name + ' 나이: ' + friend.age);});

for ~ of 처럼 간결한 코드를 작성할 수 있지만, 배열의 메서드이기 때문에 배열에만 사용할 수 있습니다.