TIL 011 | 반복문

1. 반복문의 기초 - for 문

코딩을 할 때 같은 코드를 계속 반복하는 것은 효율적이지도 않고 개발자로서도 지양해야될 부분이다. 자바스크립트에서는 여러 형태의 반복문을 사용할 수 있도록 지원해주는데 그 중 가장 기본적인 것은 for문을 사용하는 것이다.

중요한 점은 ( ) 안에 counter를 위한 변수를 선언해주고 조건과 변화방식을 정해주는 것이다. 다음은 실제 예시이다.

여기서 step이 counter로 선언되었고, 1씩 커지면서 10이 될때까지 동작을 반복하게 된다는 것을 알 수 있다.

2. 반복문과 배열

반복문과 배열은 함께 사용되는 경우가 많다.

let arr = [];

for (let i = 1; i < 6; i++) {
  arr.push(i);
}

console.log(arr);    // [1, 2, 3, 4, 5]

빈배열 arr에 1부터 5까지 숫자를 차례대로 배열 안으로 요소로 추가하는 코드이다.

반복문을 이용해 배열의 요소를 순회할 수도 있다.

let arr = ["a", "b", "c", "d"]

for (let i = 0; i < 5; i++) {
  console.log(arr[i]);
}                                // "a", "b", "c", "d"

여기서 i는 0부터 4까지 1씩 커지면서 arr[0]부터 arr[4]까지 출력되는 것을 알 수 있다.

그런데 여기서 사용된 for문은 i < 5 부분이 고정되어 있기 때문에 배열의 길이가 달라지면 또 다시 수정해줘야되는 불편함이 있다.

이를 없애기 위해서 i < 5 의 5 대신에 length 프로퍼티를 사용해줄 수 있다.

let arr = ["a", "b", "c", "d", "e", "f"]

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}                                // "a", "b", "c", "d", "e", "f"

arr.length를 사용하기 때문에 배열의 길이가 달라져도 for문을 수정하지 않고 배열의 길이만큼 배열의 요소를 순회할 수 있다.

3. 다양한 반복문

• for ... of 문

let arr = [1, 3, 5, 7];

for (let num of arr) {
  console.log(num);
}                             // 1, 3, 5, 7

for ... of 문으로 조금 더 간결한 코드로 배열을 순회할 수 있다.

• for ... in 문

let obj = {
  name: "apple",
  color: "red",
  fruit: true
}

for (let key in obj) {
  console.log(key);
}                            // "name", "color", "fruit"

for (let key in obj) {
  console.log(obj[key]);     // "apple", "red", true
}

for ... in 문은 주로 객체의 프로퍼티의 key값을 순회할 때 사용된다.

• while 문

let number = 1;
let sum = 0;

while (number < 11) {
  sum+=number;
  number++;
}

console.log(sum);       // 55 (1부터 10까지의 합)

while 문은 while 뒤에 나오는 조건이 참이라면 { } 안의 동작을 반복해서 수행한다. 만약 조건이 거짓이 되면, 실행을 멈추고 while 문 다음 문장으로 넘어간다.

• do ... while 문

let number = 1;
let sum = 0;

do {
  sum+=number;
  number++;
} while (number<11);

console.log(sum);       // 55 (1부터 10까지의 합)

do ... while 문과 while 문의 차이점은 조건문의 위치이다. while 문은 루프에 진입하기 전에 먼저 조건문부터 검사한다. 하지만 do ... while 문은 먼저 루프를 한 번 실행한 후 조건문을 검사한다. 따라서 do.. while 문은 조건문의 결과와 상관없이 무조건 처음 한 번은 루프를 실행하게 된다.

예를 들면,

let number1 = 100;
while (number1 < 11) {
  number1++;
}
console.log(number1);    // 100

let number2 = 100;
do {
  number2++;
} while (number2<11);
console.log(number2);    // 101

둘 다 조건문이 거짓이기 때문에 while 문은 아예 동작이 실행이 안됬지만, do ... while 문은 동작이 한 번 실행된 것을 확인할 수 있다.

references

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration
https://curryyou.tistory.com/202
https://velog.io/@04_miffy
https://yjshin.tistory.com