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, 7for ... 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
