반복문
반복문은 특정 코드를 반복적으로 실행할 때 사용할 수 있는 문법입니다.
자바스크립트는 while, do..while, for, for..in, for..of와 같은 것들이 있습니다.
while
소괄호안의 표현식(expr)이 참이면 블록({})안의 코드를 실행시킵니다.
while(expr){
// expr이 참이면 실행
}do...while
do..while문은 어떤 내용을 한 번은 실행시키고 반복하려고 할 때 유용하게 사용할 수 있는 문법입니다.
do{
//무조건 한 번은 실행
//한 번 이후에는 expr이 참이면 실행
}while(expr);for
for문은 가장 많이 사용되는 일반적인 반복문입니다.
for(초기문;조건문;증감문){
}for문은 다음과 같은 순서로 실행됩니다.
1.초기문을 실행합니다.
2.조건문의 참 거짓을 판별합니다.
3.조건문이 참이면 블록({})안의 코드를 한 번 실행합니다. 거짓이면 반복문을 종료합니다.
4.증감문을 실행합니다.
5.2번부터 과정을 반복합니다.
for..in
for..in문은 배열이나 객체를 반복할 때 사용합니다.
let arr = ["banana", "apple", "orange"];
let obj = {name:"철수", age:20};
//배열의 index에 접근
for(let index in arr){
console.log(index);
}
//객체의 key에 접근
for(let key in obj){
console.log(obj[key]);
}for..in으로 객체에 접근할 때, obj.key로 접근하는 대신 obj[key]로 접근해야 합니다.
이유는 key가 변수로 사용되기 때문입니다.
key는 문자열이 아닌 변수
- for...in 문은 객체의 프로퍼티 키를 반복합니다. 여기서 key는 각 반복에서 해당 객체의 프로퍼티 이름(키)를 담고 있는 변수입니다.
- 만약 obj.key로 접근하면, 자바스크립트는 객체의 key라는 이름을 가진 프로퍼티를 찾게 됩니다. 즉, 문자열 "key"라는 프로퍼티를 찾으려는 것입니다.
- 반대로 obj[key]라고 작성하면, key는 변수로 동작하여 실제 반복에서 얻은 프로퍼티 이름에 해당하는 값을 참조하게 됩니다.
- obj.key는 점 표기법으로 프로퍼티에 접근하는 방식입니다. 점 표기법에서는 프로퍼티 이름이 정적으로 명시되어야 합니다. 즉, obj.name, obj.age처럼 이름이 고정된 프로퍼티에만 접근할 수 있습니다.
- 반대로 대괄호 표기법([])은 동적으로 프로퍼티 이름을 변수로 참조할 수 있게 해줍니다. 따라서 key가 변수일 때는 obj[key]를 사용해야 합니다.
for..of
for of문은 배열을 반복할 때 사용하는 반복문입니다.
let arr = ["banana", "apple", "orange"];
let obj = {name:"철수", age:20};
for(let value of arr){
console.log(value);
}continue, break
continue와 break는 자바스크립트의 반복문에서 루프의 흐름을 제어하는 데 사용되는 키워드입니다.
continue
continue는 현재 반복을 건너뛰고 다음 반복으로 넘어가게 합니다. 즉, continue를 만나면 그 아래에 있는 코드 블록은 실행되지 않고 다음 반복이 시작됩니다.
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // i가 2일 때, 아래 코드를 건너뛰고 다음 반복으로
}
console.log(i); // i가 2일 때는 출력되지 않음
}- i === 2일 때 continue가 실행되면, console.log(i)가 실행되지 않고 바로 i++ 후에 다음 반복이 시작됩니다.
- 즉, 반복을 중단하지 않고 현재 루프만 건너뛰는 역할을 합니다.
break 문
break는 반복문을 완전히 종료합니다. break를 만나면 반복이 즉시 중단되며, 루프의 나머지 부분은 실행되지 않고 반복문 바깥의 코드로 이동합니다.
for (let i = 0; i < 5; i++) {
if (i === 3) {
break; // i가 3일 때, 반복문을 완전히 종료
}
console.log(i); // i가 3 이상일 때는 출력되지 않음
}- i === 3일 때 break가 실행되면 반복문이 즉시 종료되며, console.log(i)는 더 이상 실행되지 않습니다.
- break는 반복문을 즉시 빠져나와 이후의 코드로 넘어가는 역할을 합니다.
다중 반복문
다중 반복문(nested loop)이란, 반복문 안에 또 다른 반복문을 포함하는 구조를 말합니다.
자바스크립트에서 다중 반복문은 주로 2차원 배열이나 중첩된 데이터를 처리할 때 사용됩니다.
각각의 내부 반복문은 외부 반복문이 한 번 실행될 때마다 모두 실행됩니다.
for (let i = 0; i < outerLimit; i++) { // 외부 반복문
for (let j = 0; j < innerLimit; j++) { // 내부 반복문
// 내부 반복문이 실행되는 코드
console.log(`i: ${i}, j: ${j}`);
}
}- 외부 반복문(i를 기준으로)은 한 번 반복될 때마다,
- 내부 반복문(j를 기준으로)은 내부 루프의 종료 조건까지 여러 번 반복됩니다.
forEach
forEach 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.
배열의 요소를 간단히 처리할 수 있지만, 중간에 반복을 멈출 수 없습니다.
const arr = [1, 2, 3];
arr.forEach(value => console.log(value));map
map 메서드는 배열의 각 요소를 변환한 결과를 새 배열로 반환합니다.
const arr = [1, 2, 3];
const newArr = arr.map(value => value * 2);
console.log(newArr);forEach와 map의 차이점
forEach는 배열의 각 요소에 대해 함수를 실행하지만, 반환 값이 없습니다.
반면, map은 배열의 각 요소를 변환한 새 배열을 반환합니다.
