2025 / 01 / 21
오늘은 수업 시간에 for문에 대해 배웠습니다.
그 중 for문의 문법에서 in과 of를 배웠는데 of는 처음 보는 문법이었습니다.
처음에는 이해가 되고 있는건지 모르겠었고.. 이런 지식을 바탕으로 실습 예제에 적용하는게 어려웠습니다. 저는 for문의 기본 형식으로 문제 풀이를 작성하였습니다.
💌 for문
특정 조건을 만족할 때까지 반복적으로 코드를 실행할 수 있게 해줍니다.
반복되는 작업을 간단하게 처리할 수 있습니다.
1. 기본 구조
for (초기화; 조건; 증감) {
// 반복할 코드
}① 초기화
- 반복문이 시작되기 전에 한 번 실행되는 코드입니다.
- 반복문에 사용할 변수를 선언합니다.
② 조건
- 반복문이 계속 실행될 조건을 지정합니다.
- 조건이 true일 때 반복문이 계속 실행되고, false가 되면 종료됩니다.
③ 증감
- 반복문을 실행한 후 변수 값을 증가시키거나 감소시킵니다.
- 보통 반복을 한 번 마친 후 초기화로 설정된 변수를 변경합니다.
2. for문 예시
① 1부터 5까지 출력하기
for (let i = 1; i <= 5; i++) {
console.log(i); // 1, 2, 3, 4, 5를 순차적으로 출력
}- let i = 1 -> i 변수를 1로 초기화합니다.
- i <= 5 -> i가 5 이하일 때 반복문을 실행합니다.
- i++ -> 매 반복마다 i를 1씩 증가시킵니다.
② 주사위 눈의 합이 6인 숫자 출력하기
for (let i =1; i < 7; i++){
for(let j = 1; j < 7; j++){
if(i + j === 6){
console.log("[" + i + "," + j + "]")
}
}
}- 변수 i와 j를 각각 1로 초기화해줍니다.
- 주사위의 눈의 갯수만큼 반복문의 조건을 작성합니다.
- 증감식을 사용해 순차적으로 변수의 값을 1씩 증가시킵니다.
- if문을 사용하여 i와 j의 합이 6인 경우를 출력합니다.
3. break & continue
① break 사용
- 반복문의 흐름을 제어하는데 사용합니다.
- 반복문을 강제로 종료시킵니다.
for(let i = 0; i < 10; i++){
if(i === 5){
console.log("중단");
break;
}
console.log(i);
}// 0, 1, 2, 3, 4, 중단을 순차적으로 출력② continue 사용
- 반복문을 건너뛰고, 다음 반복을 실행합니다.
for(let i = 0; i < 10; i++){
if(i % 2 == 0){
continue;
}
console.log(i);
}// 1, 3, 5, 7, 9를 순차적으로 출력4. 중첩 for문
- 하나의 for문 안에 또 다른 for문을 사용하는 구조입니다.
- 2차원 이상의 데이터를 처리할 때 매우 유용하게 사용됩니다.
for (let i = 0; i < n; i++) {
for (let j = 0; j < m; j++) {
// 내부 반복문에서 실행할 코드
}
}- 외부 반복문 - i 값을 0부터 n-1까지 증가시키며 반복합니다.
- 내부 반복문 - 각 i에 대해 j 값을 0부터 m-1까지 증가시키며 반복합니다.
5. let의 범위
- for문 안에서 선언된 변수는 그 for문 블록 안에서만 유효합니다.
- let으로 선언된 변수는 for문 외부에서 접근할 수 없습니다.
for (let i = 1; i <= 3; i++) {
console.log(i);
}
console.log(i);
// 오류 발생: i는 이곳에서 정의되지 않음💌 for...in문법
- 객체의 속성(키) 또는 배열의 인덱스를 순회할 때 사용되는 반복문입니다.
- 객체나 배열을 반복하면서 각 속성이나 인덱스에 접근할 수 있게 해줍니다.
for (let key in object) { // key는 object의 속성(키)을 나타냅니다 // object[key]는 해당 속성에 대응하는 값입니다 }
- key - 객체의 속성 이름(또는 배열의 인덱스)을 나타냅니다.
- object - 순회할 객체나 배열을 의미합니다.
1. 예시
① 객체 순회
- key는 name, age, city와 같은 객체의 속성 이름을 순차적으로 가져옵니다.
- person[key]는 각 속성에 해당하는 값(예: Alice, 25, New York)을 출력합니다.
const person = {
name: 'Alice',
age: 25,
city: 'New York'
};
for (let key in person) {
console.log(key, person[key]);
}② 배열 순회
- for...in문은 배열의 인덱스를 순회합니다.
- 배열에서 key는 배열의 인덱스(0부터 시작)를 의미합니다.
- object[key]는 해당 인덱스에 위치한 값을 나타냅니다.
- index는 배열의 인덱스(0, 1, 2)입니다.
- fruits[index]는 해당 인덱스에 있는 배열의 값을 출력합니다.
const fruits = ['apple', 'banana', 'orange'];
for (let index in fruits) {
console.log(index, fruits[index]);
}2. 주의사항
- 배열은 인덱스 외에도 배열에 추가된 임의의 속성까지 for...in문법으로 순회할 수 있습니다.
- 배열만 순회하고 싶다면 for문이나 for...of문을 사용하는 것이 더 안전합니다.
💌 for...of문법
- 배열이나 반복가능한 객체의 값을 순차적으로 순회할 때 사용합니다.
- 값을 다루기 때문에, 주로 배열을 순회할 때 사용됩니다.
- 매우 직관적으로 간단하게 반복할 수 있어 많이 사용합니다.
- array - 반복 가능한 객체(배열, 문자열, 맵, 셋 등)를 의미합니다.
- item - 순차적으로 array 객체의 각 값을 나타냅니다.
for (let item of array){ // item은 array 객체의 각 값을 순차적으로 받습니다 }
1. 연습 문제
① 배열에 있는 글자를 하나의 단어로 만드시오.
let letters = ['H', 'e', 'l', 'l', 'o'];
let string = '';
for(let i of letters){
string = string + i
}
console.log(string); // Hello 출력- letters 배열에 문자들이 들어 있습니다.
- string 변수 선언 후 빈 문자열로 초기화합니다.
- letters 배열을 순회하고 배열의 각 문자를 string에 추가합니다.
② 배열 요소의 합을 구하시오.
let result = 0;
const array2 = [40, 60, 70, 40, 80];
for(let sum of array2){
result += sum;
}
console.log(result);
- 결과를 저장할 변수를 선언하고 0으로 초기화합니다.
- array2 배열을 순회하면서 각 요소를 sum에 저장합니다.
③ text 변수에 담긴 문자열을 뒤집어서 출력하시오.
1) 내가 작성한 코드
const text = "Hello, World!";
let dap = "";
for (let i = text.length - 1; i >= 0; i--) {
dap += text[i];
}
console.log(dap);- 뒤집어진 문자열을 저장할 변수 dap을 선언하고 빈 문자열로 초기화합니다.
- for문을 사용해 문자열을 끝에서부터 거꾸로 순회합니다.
- 현재 문자를 dap이라는 변수에 추가하고 출력합니다.
2) 교수님께서 작성한 코드
const text = "Hello, World!";
let reversedText = "";
for(const c of text){
reversedText = c + reversedText;
}
console.log(reversedText);- 뒤집어진 문자열을 저장할 변수 reversedText을 선언하고 빈 문자열로 초기화합니다.
- text 문자열을 순차적으로 순회합니다.
- 현재 문자 c를 reversedText 앞에 추가하고 출력합니다.
- 이 코드 설명을 듣고 교수님이 진짜 천재처럼 보였다... 짱 멋져...(ᴗ͈ˬᴗ͈)ꕤ.ﾟ
2. 주의사항
- 반복 가능한 객체에서만 사용 가능합니다.
- 배열의 인덱스를 알 수 없습니다.
- 비동기 작업에서의 사용가능합니다.
💌 실습 예제
평균 / 최댓값 / 최솟값 계산하기
- 사용자에게 다섯개의 키를 입력받습니다.
- 입력받은 키의 평균을 구해 출력합니다.
- 입력받은 키의 최댓값과 최솟값을 각각 출력합니다.
- 심화 - 프롬프트 1개로 다섯개의 값 받기 / 100미만의 값 입력 시 예외처리
- 반복문 사용해서 풀이하기 / split( )과 같은 메소드 사용금지 / 배운 것만 가능
1. 입력 받기
사용자에게 다섯개의 키를 입력받습니다.
let cm = prompt("키를 입력해주세요! (쉼표로 구분된 키 목록)", "150,160,170,180,190");
2. 평균 / 최댓값 / 최솟값
입력받은 키의 평균 / 최댓값 / 최솟값을 구해 출력합니다.
// 평균, 최댓값, 최솟값 계산 let sum = 0; let average = 0; let max = num[0]; let min = num[0]; for (let i = 0; i < num.length; i++) { sum += num[i]; if (max < num[i]) { max = num[i]; } else if (min > num[i]) { min = num[i]; } } average = Math.floor(sum / num.length);
- max와 min의 초기 값을 num이라는 배열의 첫 인덱스의 값으로 지정합니다.
- max는 상관없지만, min의 초기 값에 0이나 1을 넣으면 비교가 이루어지더라도 가장 작은 값인 초기 값이 출력되기 때문입니다.
- for문을 사용해 num이라는 배열의 길이만큼 반복을 진행합니다.
- if문을 사용해 max와 min을 각각의 인덱스의 값과 비교해 변수에 재할당합니다.
3. 심화 풀이
심화 - 프롬프트 1개로 다섯개의 값 받기 / 100미만의 값 입력 시 예외처리
let num; let result = ""; // 반복문을 사용하여 100 미만의 숫자가 입력될 경우 다시 입력받기 while (true) { let cm = prompt("키를 입력해주세요! (쉼표로 구분된 키 목록)", "150,160,170,180,190"); num = []; // 새로운 배열로 초기화 let result = ""; // 숫자를 담을 임시 변수 for (let i = 0; i < cm.length; i++) { let char = cm[i]; // 쉼표나 공백이 아닌 경우 result에 추가 if (char !== "," && char !== " ") { result += char; } else if (result) { // result에 값이 있으면 배열에 숫자로 변환하여 추가 num.push(Number(result)); result = ""; // result 초기화 } } if (result) { // 마지막 값 추가 num.push(Number(result)); } // 100 미만의 값이 있는지 확인 let bool = true; for (let numValue of num) { if (numValue < 100) { bool = false; break; } } if (bool) { break; // 모두 100 이상이면 반복 종료 } else { alert("100 미만의 숫자가 포함되어 있습니다. 다시 입력해주세요!"); } }입력 받은 문자를 배열에 담기
- 전에 했던 예시처럼 문자를 분리해서 빈 문자열이 있는 result에 담아줍니다.
- (char !== "," && char !== " ")이라는 조건으로 ,과 공백이 아닐 경우 해당 문자를 result에 담아줍니다.
- 위의 조건이 false일 경우 result의 값을 num이라는 배열로 push한 후, 해당 result는 다시 빈문자열로 초기화합니다.
- 다섯번째 키의 경우 뒤에 구분해주는 ","이 없으므로 따로 값이 담겨 있으면 push를 진행합니다.
100미만의 값이 있는지 확인하기
- let bool = true; 로 현재 100미만의 값이 없는 상태를 true로 지정해줍니다.
- 100 미만의 값이 있는 경우 if를 사용해 bool = false로 변환해주고 break를 사용해 조건문을 빠져나옵니다.
- 이후 또 다른 if를 사용하여 bool이 true일 경우에는 반복문을 종료하고, false일 경우는 안내창을 출력합니다.
- 이 과정을 무한 반복하기 위해 해당 모든 코드를 while(true)문에 담아줍니다.
- 프롬프트의 입력이 잘못된 경우 기존 배열에 담긴 값을 없애주기위해 꼭꼭꼭 num = [];을 사용해줍니다.
- 새로운 배열로 초기화 해주지 않으면 기존 값이 그냥 더해져 오답일 뿐더러 오류가 발생합니다.
💌 전체 코드
위에서 설명한 코드를 모두 합쳐놓은 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num;
let result = "";
// 반복문을 사용하여 100 미만의 숫자가 입력될 경우 다시 입력받기
while (true) {
let cm = prompt("키를 입력해주세요! (쉼표로 구분된 키 목록)", "150,160,170,180,190");
num = []; // 새로운 배열로 초기화
let result = ""; // 숫자를 담을 임시 변수
for (let i = 0; i < cm.length; i++) {
let char = cm[i];
// 쉼표나 공백이 아닌 경우 result에 추가
if (char !== "," && char !== " ") {
result += char;
} else if (result) {
// result에 값이 있으면 배열에 숫자로 변환하여 추가
num.push(Number(result));
result = ""; // result 초기화
}
}
if (result) {
// 마지막 값 추가
num.push(Number(result));
}
// 100 미만의 값이 있는지 확인
let bool = true;
for (let numValue of num) {
if (numValue < 100) {
bool = false;
break;
}
}
if (bool) {
break; // 모두 100 이상이면 반복 종료
} else {
alert("100 미만의 숫자가 포함되어 있습니다. 다시 입력해주세요!");
}
}
console.log(num);
// 평균, 최댓값, 최솟값 계산
let sum = 0;
let average = 0;
let max = num[0];
let min = num[0];
for (let i = 0; i < num.length; i++) {
sum += num[i];
if (max < num[i]) {
max = num[i];
} else if (min > num[i]) {
min = num[i];
}
}
average = Math.floor(sum / num.length);
document.write(`키의 평균은? ${average} <br>`);
document.write(`키의 최댓값은? ${max} <br>`);
document.write(`키의 최솟값은? ${min} <br>`);
</script>
</body>
</html>
14일차 후기
- for문은 많이 사용해봤지만 for문의 문법에 대해서는 거의 처음이라 헷갈렸습니다.
- length( )는 배열에만 사용되는 줄 알았는데 모두 가능한 것이었습니다.
- 예제를 풀어보며 이해하려고 노력했는데!! 아직 for...of문법은 어려운 것 같습니다.
- 기존이랑 다를 것이 하나 없다고 하지만 머리는 이해를 못하는 것 같습니다ㅠㅠ
- 오늘 실습 예제에서 프롬프트에서 받은 문자를 나눠서 배열에 담는 부분이 있었는데.. 생각보다 너무 어려워서 친구의 도움을 살짝 받았습니다. by. 여니의 일기장
- 오늘 문제에서는 예외처리가 더 쉬웠던 것 같았어서.. 친구는 저에게 배열을 담는 부분을, 저는 친구에게 초기화 값과 예외처리부분을 서로 알려주었습니다.
- 함께하니까 혼자보다 덜 힘들고 의지가 많이되는 것 같습니다! (๑ゝω╹๑) .｡oO ( ♡ )
૮꒰ ྀི〃´꒳`〃꒱ა