for문에 대해 알아보자.

for()

while문과 같은 반복되는 작업을 처리하기 위해 사용된다.

차이점은 세미콜론으로 구분되는 세개의 선택식을 넣을 수 있는 점 정도?..

주로 반복 횟수가 딱 정해져 있는 경우에 쓰면 좋다.

 

구문

for(카운터 변수 초기화, 평가식, 반복 후 평가식)
    반복할 문;
    
for(카운터 변수 초기화, 평가식, 반복 후 평가식){
    반복할 블럭문;
}

//- - -

for(let i = 0; i < 10; i ++)
    console.log(i);
    
//0
//1
//2
//3
//4
//5
//6
//7
//8
//9

 

하기 for문을 살펴보자.

for(...) 내부를 ";"으로 나눠서 보면

for(let i = 0; i < 10; i ++) console.log(i);

1. let i = 0;
   for문이 반복되는 동안 지역변수로 사용될 i의 초기값을 지정.
   여기서는 i는 0으로 초기화를 시켜두었다.
2. i < 10;
   평가식 i 가 10보다 작을때, 반복이 진행된다.
3. i ++
   매 반복마다 실행되는 평가식 i에 1을 더해준다.

위 과정대로 아래와 같은 흐름으로 for문이 진행된다.

 

i는 0이다.

i는 10미만인가? - y

console.log(i) 실행.

i++ 실행 (i에 1을 더해줌)

 

i는 1이다.

i는 10미만인가? - y

console.log(i) 실행.

i++ 실행 (i에 1을 더해줌)

 

i는 2다.

i는 10미만인가? - y

console.log(i) 실행.

i++ 실행 (i에 1을 더해줌)

 

i는 3이다.

i는 10미만인가? - y

console.log(i) 실행.

i++ 실행 (i에 1을 더해줌)

 

...

 

i는 10이다.

i는 10미만인가? - n

반복문 종료

 

break

while문과 마찬가지로 break와 continue를 사용할 수 있다.

for(let i = 0; i < 4; i ++){
    console.log(i);
    i ++;
    i ++;
    console.log(i);
}

위와 같은 for문이 있다고 가정을 해보면 아래와 같이 반복 된다.

 

i는 0이다.

i는 4미만인가? - y

console.log(i) 실행. - 0

i++ 실행 (i에 1을 더해줌)

i++ 실행 (i에 1을 더해줌)

console.log(i) 실행. - 2

i++ 실행 (i에 1을 더해줌)

 

i는 3이다.

i는 4미만인가? - y

console.log(i) 실행. - 3

i++ 실행 (i에 1을 더해줌)

i++ 실행 (i에 1을 더해줌)

console.log(i) 실행. - 5

i++ 실행 (i에 1을 더해줌)

 

i는 6이다.

i는 4미만인가? - n

반복문 종료.

 

여기서 조건없이 break 를 넣어 버리면.

for(let i = 0; i < 4; i ++){
    console.log(i);
    i ++;
    i ++;
    console.log(i);
    break;
}

i는 0이다.

i는 4미만인가? - y

console.log(i) 실행. - 0

i++ 실행 (i에 1을 더해줌)

i++ 실행 (i에 1을 더해줌)

console.log(i) 실행. - 2

break - for문이 종료된다.

 

이렇게 종료되버린다.

주로 특정 조건을 만족해서 더이상 for문이 반복할 필요가 없을때 조건식과 함께 사용한다.

 

예를들어 두번째 표현식을 안쓰고 이렇게 할 수 있다.

for(let i = 0; ; i ++){
    console.log(i);
    i ++;
    i ++;
    console.log(i);
    if(i < 3) break;
}

 

i는 0이다.

i는 4미만인가? - y

console.log(i) 실행. - 0

i++ 실행 (i에 1을 더해줌)

i++ 실행 (i에 1을 더해줌)

console.log(i) 실행. - 2

i가 3보다 작은가? - y

for문 종료.

 

이후의 반복이 아예 끝나버린다는 점이 주요 특징이다.

 

continue

break와는 다르게 현재 블럭문을 끝내버린다.

for(let i = 0; i<4 ; i ++){
    continue;
    console.log(i);
    i ++;
    i ++;
    console.log(i);
}

i는 0이다.

i는 4미만인가? - y

continue로 현재 반복 종료

i++ 실행 (i에 1을 더해줌)

 

i는 1이다.

i는 4미만인가? - y

continue로 현재 반복 종료

i++ 실행 (i에 1을 더해줌)

 

i는 2이다.

i는 4미만인가? - y

continue로 현재 반복 종료

i++ 실행 (i에 1을 더해줌)

 

i는 3이다.

i는 4미만인가? - y

continue로 현재 반복 종료

i++ 실행 (i에 1을 더해줌)

 

i는 4이다.

i는 4미만인가? - n

반복 종료

 

for ... of 문

for 시리즈로 반복 가능한 객체들에 대해 반복을 시행한다.

*주로 배열에 사용한다고 생각하면 편함

const someArr = [1,2,3,4,5];
for(let el of someArr){
    console.log(el);
}

//1
//2
//3
//4
//5

블럭문 내부에서 변수를 수정하지 않는 경우 const도 사용이 가능하다.

반복 가능한 객체란, Array, Map, Set, String, TypedArray, arguments가 있다.

그냥 배열에서 쓰면 편하다.

 

주로, 인덱스가 필요없을때 for문을 좀더 간결하게 쓸 경우 사용하면 좋다.

기존 for문과 동일하게 코드를 표현해보면

 

const someArr = [1,2,3,4,5];
for(let el of someArr){
    console.log(el);
}

for(let i = 0; i < someArr.length; i++){
    console.log(someArr[i]);
}

//1
//2
//3
//4
//5

위 두 코드는 동일하게 작동한다.

 

for ... in 문

키가 "문자열" 로 이루어진 객체에 대한 반복이 가능하다.

Object.keys() 혹은 Object.values()를 모를때 유용하게 사용했었다.

단점은 for...of랑 for...in 이랑 헷갈려서 한번씩 써봐야 했다는 점?

 

const someObj = {a:5, b:10, c: 15};
for(let key in someObj){
    console.log(key)
}

//a
//b
//c

각 값이 알고 싶다면 하기와 같이 쓰면 된다.

const someObj = {a:5, b:10, c: 15};
for(let key in someObj){
    console.log(key)
    console.log(someObj[key])
}

//a
//5
//b
//10
//c
//15

 

음.. 어떤 객체에서 특정 값을 가지고 있는 키를 찾고 싶을때 사용한다.

그외에는 딱히?..