프론트엔드 개발일지 #10- javascript 기초(for, while문)

for문

for (초기값; 조건식; 증감식) {
	
}

//i라는 변수는 0부터 시작할거야
//i라는 변수가 10에 도달되기 전까지 계속할거야
//i라는 변수는 한 사이클을 돌고 나면 1을 더할거야
for (let i = 0; i < 10; i++) {
    console.log("FOR문 돌아가고 있음 =>", i);
}
//FOR문 돌아가고 있음 => 0
//FOR문 돌아가고 있음 => 1
//FOR문 돌아가고 있음 => 2
//FOR문 돌아가고 있음 => 3
//FOR문 돌아가고 있음 => 4
//FOR문 돌아가고 있음 => 5
//FOR문 돌아가고 있음 => 6
//FOR문 돌아가고 있음 => 7
//FOR문 돌아가고 있음 => 8
//FOR문 돌아가고 있음 => 9

//ex: 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력
for (let i = 0; i < 11; i++) {
  if ( i >= 2) {
    if ( i % 2 === 0) {
        console.log(i = '는 2의 배수입니다');
        }
    }
}

이렇게 기본식이 구성되어있고, 반복문으로 사용된다.

배열과 for문

// 배열과 for문은 짝꿍이다.
const arr = ["one", "two", "three", "four", "five"];
for (let i = 0; i < arr.length; i++) {
    console.log(i);
    console.log(arr(i));
}

for ~ in문

// 객체의 속성을 출력하는 문
let person = {
    name: "John",
    age: 30,
    gender: "male",
};
//person['key']
for (let key in person) {
    console.log(key + ": " + person[key]);
} //name: "John"
  //age: 30,
  //gender: "male"

while문

let i = 0;

while (조건) {
    //main logic
    //증감
}

while (i < 10) {
    console.log(i);
    i++;
}

//while문을 활용해서 3초과 100미만의 숫자 중 5의 배수만 출력
let i = 3;
while (i < 100) {
    if (i % 5 === 0 && i >= 5) {
        console.log(i +"는 5의 배수입니다.");
    }
    i++;
}

do ~ while문

let i = 0;
do {
    console.log(i);
} while (i < 10);

break,continue

for (let i = 0; i < 11; i++) {
    if(i === 5) {
        break;
    }//끝내버린다
    console.log(i);
}

for (let i = 0; i < 11; i++) {
    if(i === 5) {
        continue;
    }//바로 다시 for문으로 돌아가 돈다.
    console.log(i);
}

내가 반복문에서 가장 어려운 건, 하나씩 증감하는건 알겠는데 배열의 길이에 맞춰서 증감하는 식이 아직은 너무 낯설다. key value를 좀 더 명확히 알아야 코드를 적을 수 있을 것 같고 어제 코딩 테스트 해보는데 너무 어려웠다.

다른 예시로 연습을 좀 해봤는데

//100부터 0까지 10씩 차감되는 값이 반환 될 수 있게 코드를 적어보세요

for (let i = 100; i >= 0; i -= 10) {
      console.log(i);
}

//카운트업이 아닌 카운트다운을 하는 for 루프를 작성해 보겠습니다. 다음 숫자를 출력하는 for 루프를 작성하세요(이 순서대로).

25
20
15
10
5
0

for (let i = 25; i >= 0; i -= 5) {
    console.log(i);
}

//배열 반복 연습
//people이라는 문자열 배열을 제공해 드렸습니다. for 루프로 사람 배열을 순회(loop over)하여 각 이름을 대문자로 출력하세요. 결과는 다음과 같아야 합니다.

SCOOBY
VELMA
DAPHNE
SHAGGY
FRED
const people = ["Scooby", "Velma", "Daphne", "Shaggy", "Fred"]; 

for (let i = 0; i < people.length; i++) {
    console.log(people[i].toUpperCase());
}

//for 루프를 사용하여 Eiffel 65가 부른 노래 "I'm Blue"의 클래식 코러스 가사를 출력하세요. for 루프를 사용하여 문자열 "Da ba dee da ba daa"를 정확히 6번 출력하세요. 더 많아도 안되고, 더 적어도 안됩니다.

for (let i = 0; i < 6; i++) {
    console.log("Da ba dee da ba daa");
}

마지막 노래 반복 예시에서는 인덱스가 0부터 시작이기때문에 i < 6을 해줘야 012345 이렇게 총 다섯번 가사를 반복해준다는 것을 놓쳤었고,

사람들 이름을 대문자로 변환하여 배열에선 console.log(people[i].toUpperCase에서 people안의 i들을 데려와야 한다는 걸 놓쳐서 i라고만 적었었다.

기본 개념은 이해했는데 기본예제를 벗어난 문제를 보면 당황하는 것 같다.