JS_기본 문법 (20)_ for 루프+

2022.02.11 - [🌌 | WEB DEV/Vanilla JS] - JS_기본문법 (4)_반복문

 

반복문 중 for 문에 대해서 조금 더 알아보자

 

구조

for ([initialization]; [condition]; [final-expression]){
  ...
}

괄호 안 3개의 식

initialization

식 또는 변수를 선언한다. 주로 카운터에 사용할 변수를 초기화한다.

(상수 선언 시 증감 불가)

 

condition

매 반복 마다 평가할 조건을 세운다.

평가 결과가 참일 경우 수행문을 실행한다.

거짓일 경우 for문을 탈출한다.

만약 비어있는 경우 항상 참이다.

 

final-expression

매 반복의 끝에 수행되는 식이다. 주로 카운터 변수의 증감에 사용된다.

(condition 이전에 실행)

비어있는 경우 변화X

 

---

활용

 

기초적인 예시는 다음과 같다.

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

>>> 0
>>> 1
>>> 2
>>> 3
>>> 4

 

중첩 사용도 가능하다.

for (let i = 0; i < 2; i++) {
  for (let j = 3; j >= 0; j--) {
    console.log(`${i} | ${j}`);
  }
}

>>> 0 | 3
>>> 0 | 2
>>> 0 | 1
>>> 0 | 0
>>> 1 | 3
>>> 1 | 2
>>> 1 | 1
>>> 1 | 0

 

두 개의 변수 활용

두 개의 변수를 활용할 때는 콤마를 활용한다.

 

예시 1)

for (let x = 0, y = 10; x <= y; x++, y--) { //콤마를 활용
  console.log(x, y);
}

 

예시 2)

for (
  let flip = true, x = 3, y = 3;
  x >= 0 && y >= 0;
  flip = !flip, flip ? x-- : y--
) {
  console.log(x, y);
}

>>> 3 3
>>> 3 2
>>> 2 2
>>> 2 1
>>> 1 1
>>> 1 0
>>> 0 0

 

 

무한루프

무한루프는 브라우저를 멈추게 할 수 있다.

따라서 주의해야하는 오류 중 하나이다!

for (;;){
  ...
}

 

 

 

---

객체, 배열과 for문

for문을 이용하여 객체, 배열 등에서 항목을 추출할 수 있다.

위의 일반적인 for문과 다른 점은

보통 상수를 선언한다는 점이다! (변할 값이 아니기 때문)

 

 

1. 객체와 for문

객체의 키값을 순서대로 반환한다.

구조

for (const 변수(키) in 객체){ //각 반복마다 선언 & 변할 값이 아니므로 const
  ...
}

 

예시 1)

const profile1 = {
  name : 'Rooney',
  backNum : 10,
  position : 'FW',
};

for (const key in profile1){
  console.log(key, profile1[key]);
}

>>> name Rooney
>>> backNum 10
>>> position FW

 

예시 2)

배열도 객체이기 때문에 활용이 가능하다.

(요소 추출이 아닌 인덱스 추출!)

const list = [1, 2, 3, 4];

for (const item in list) {
  console.log(item);
}

>>> 0
>>> 1
>>> 2
>>> 3

 

 

2. 배열과 for문

배열, 정확히는 iterable에 사용되는 방식이다.

구조

for (const 변수(요소) of 배열){ //배열 뿐만 아니라 iterable은 모두 가능
  ...
}

 

예시 1)

const list = [1, 2, 3, 4];

for (const item of list) {
  console.log(item);
}

>>> 1
>>> 2
>>> 3
>>> 4

 

예시 2)

문자열도 iterable이기 때문에 활용이 가능하다!

const meg = 'Hello';

for (const item of meg) {
  console.log(item);
}

>>> H
>>> e
>>> l
>>> l
>>> o

 

배열에 of를 이용하였을 때 장점

일반적인 for문의 경우에는 새로운 변수를 활용하기 때문에

해당 변수의 변화에 따라서 다양한 오류가 발생할 수 있다.

ex) 배열의 인덱스 overflow

 

그에 반해 of의 경우에는 배열에서 직접 요소를 반환하는 것이기 때문에

조금 더 안전한 구조라고 할 수 있다.