항해 99 - JavaScript 반복문 & 확인 문제

반복문은 개인적으로 컴퓨터가 존재하는 이유 그자체라고 생각하기 때문인지 어떤 언어이든 공부할 때 반복문 부분을 제일 좋아했는데 역시나 지금까지 중에 제일 재미있다.

간단한 문제들이 잔뜩 있어서 그런 것 같기도 하고...ㅎ...

익숙한 듯 익숙하지 않은 이 느낌이 너무 즐거운 것 같다. 새롭게 배우는 느낌?!

간단하게 문법과 예제, 확인문제를 정리하고 넘어가자.

 

1. for 반복문

for 반복문 종류가 이렇게나 많다고??!?? 하면서 강의를 듣기 시작했다.

꽤 세세하게 나눠져있는 이유가 무엇일까?? 각 for문을 살펴보면서 어떤 경우에 더 어울릴지 생각해보자.

1-1. for 기본문

for (초기값; 조건식; 증감문) {
	// 메인 로직
}

가장 기본적인 for문이다. 가장 범용적인 형식이며 많은 언어들이 비슷한 형식을 사용하고 있다.

반복 변수는 const로 할당하면 에러가 난다.(증감식을 사용하여 재할당을 해야하므로!)

 

가장 범용적인 형식인 만큼 for문을 고려할 때 가장 먼저 떠오를 방식인 것 같다.

하지만 배열 혹은 객체를 사용하는 반복문이라면 뒤의 2가지를 먼저 고려하도록 해보자.

 

간단하게 10까지 더하는 예시를 써보자.

// 합을 저장할 변수(+이기 때문에 0에서 시작, *이라면 1에서 시작해야 함)
let result = 0

// 1부터 10까지 반복문 시작
for (let i=1 ; i<11 ; i++){
    result += i
}

console.log(result)  // 55

 

1-2. for ~ in 반복문

for (const 반복변수 in 배열/객체) {
    // 메인 로직
}

배열, 객체와 함께 쓸 수 있는 반복문이다.

python과 같은 문법인줄 알았는데 약간 다른 반복 변수를 갖는다.

배열의 원소, 객체의 value가 아닌 배열의 index 혹은 객체의 key 값이 들어간다는 것이다.

또한 객체가 들어간다는 것도 차이점이다.

 

이런 문법은 각 변수의 위치가 더 중요하고 다른 문장을 계산할 때 위치와 key값을 사용할 때 유용하게 사용할 것 같다.

이 방법이 다른 for문에 비해 가장 위험하다고 설명에 써있지만 range(n)을 이용한 반복문을 많이 사용해와서 그런지 너무 유용할 것 같다는 느낌을 받았다. JS에서는 어떤 코드를 많이 쓰게 될지 조금 기대되는 부분이었다.

 

아래는 for ~ in 반복문을 이용한 간단한 예시이다.

// 배열
let toDos = ['세수하기', '출근하기', '퇴근하기', '항해99 참석하기']

for (const i in toDos) {
	console.log(`${i+1} 번째로 해야할 일 : ${toDos[i]}`)
}

// 결과
// 1 번째로 해야할 일 : 세수하기
// 2 번째로 해야할 일 : 출근하기
// 3 번째로 해야할 일 : 퇴근하기
// 4 번째로 해야할 일 : 항해99 참석하기

// 객체
let person = {
    name : '댕근',
    age : 28,
    gender : '여자'
};

for (let key in person) {
    console.log(key + " : " + person[key]);
}

// 결과
// name : 댕근
// age : 28
// gender : 여자

1-3. for ~ of 반복문

for (const 반복변수 of 배열/객체) {
    // 메인 로직
}

for ~ of 반복문이 python의 문법과 가장 비슷하다.

반복변수에 각 배열의 원소값 혹은 객체의 value가 들어온다.

 

이 형태는 원소값을 반복할 때 안정적으로 사용할 수 있다. index나 key없이 순서대로 받아서 사용할 수 있으니 간편하다.

아래는 for ~ of 반복문을 이용한 간단한 예시이다.

const fruits = ['사과', '바나나', '배']

console.log('과일가게 품목 정리')
for (const fruit of fruits) {
    console.log(fruit)
}

// 결과
// 과일가게 품목 정리
// 사과
// 바나나
// 배

 

---

2. while 반복문

2-1. while 기본문

while (조건식) {
    // 메인 로직
}

while은 무한 루프를 사용해야 할 때, 즉 특정한 조건까지 도달해야 할 때 사용한다.

특정 시간동안 어떤 데이터를 받을 때까지, 어떤 요소가 완전히 제거될 때까지 루프를 돌리는 것이다.

while의 조건식이 false가 될때까지 돌리는 경우도 있고 무한 루프에서 if문을 사용하여 break를 사용하는 경우도 있다.

(개인적으로 break 사용하는 while문이 더 보기 좋다.)

 

간단한 예시를 살펴보자.

// 조건을 false로 만드는 경우
let a = 1;

while (a < 5) {
    console.log(a);
    a++;
}

// 결과
// 1
// 2
// 3
// 4

// 무한 루프에서 break를 사용하는 경우
let a = 1;

while (true) {
    if (a >= 5) break;
    
    console.log(a);
    a++;
}

// 결과
// 1
// 2
// 3
// 4

 

2-2. do ~ while 반복문

do {
    // 메인 로직
} while (조건식);

이 문법이 있는 줄은 알지만... 항상 써본 적이 없어서 문법만 정리하고 넘어갈 것이다.

조건식에 부합하지 않더라도 꼭 한번은 실행해야할 때 사용하는 반복문이다.

 

---

3. break와 continue

3-1. break 키워드

앞에서 언급했듯이 반복문을 빠져나올 때 사용하는 키워드

while 문에서 주로 사용하지만 for문에서도 자주 사용한다.

confirm을 이용한 간단한 예시이다.

for (let i=0 ; true ; i++) {
    alert(`${i}번째 알람입니다.`);
    
    // 진행여부(확인 -> true, 취소 -> false)
    const isContinue = confirm('계속 하시겠습니까?');
    // 취소를 눌렀을때 반복문 정지
    if (!isContinue) break;
}

 

3-2. continue 키워드

for문을 사용하면서 가장 많이 썼던 키워드

해당 조건에 도달하면 그 step을 건너뛰는 키워드이다.

너무 많이 사용해서 이 키워드에 대한 정리는 넘어가도록 한다.

 

---

4. 확인 문제

1. 다음 프로그램의 실행 결과를 예측해보세요.

const array = ['사과', '배', '귤', '바나나']

console.log('# for in 반복문')
for (const i in array) {
    console.log(i)
}

console.log('# for of 반복문')
for (const i of array) {
    console.log(i)
}

# for in 반복문
0
1
2
3
# for of 반복문
사과
배
귤
바나나

 

2. 다음 프로그램의 실행 결과를 예측해보세요. 혹시 오류가 발생한다면 어디를 수정해야 할까요?

const array = []
for (const i=0 ; i<3 ; i++){
    array.push((i + 1) * 3)
}
console.log(array)

에러 발생.
for문의 반복변수의 선언은 const가 아닌 let으로 선언해야 함.

for (let i=0 ; i<3 ; i++)

 

3. 1부터 100까지의 숫자를 곱한 값을 계산하는 프로그램을 만들어보세요.

let output = 1

for (let i=1 ; i<=100 ; i++) {
    output *= i
}

console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다.`)

 

4. 활용 예제의 피라미드를 활용해서 마름모 피라미드를 만들어 보세요.

let output4 = '';
const size = 5;

for (let i = 1; i <= size; i++) {
    // 앞에 빈칸은 층 수의 -1 부터 1씩 작아진다.
    for(let j=size ; j > i; j--){
        output4 += ' '
    }
    // 별의 수는 i층에서 2*i-1 개씩
    for(let star=1 ; star <= 2*i-1 ; star++) {
        output4 += '*'
    }
    // 한 층의 끝마다 줄바꿈 추가
    output4 += '\n'
}

for (let i=1 ; i<= size-1; i++){
    // 앞의 빈칸은 층의 수와 같다.
    for(let j=1 ; j <= i ; j++){
        output4 += ' '
    }
    // 별의 수는 i층에서 2*(size-i)-3
    for(let star=1 ; star <= 2*(size-i)-1 ; star++) {
        output4 += '*'
    }
    // 한 층의 끝마다 줄바꿈 추가
    output4 += '\n'
}
console.log(output4)

활용 예제4.결과이미지

 

---

5. 1주차 숙제

1. 대문자와 소문자가 섞여있는 문자열 s가 주어집니다.

    s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요.

    'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다.

    단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.

    예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.

// 단이 풀이
function question1(s) {
    // 대소문자 구분을 하지 않기 위해 소문자로 통일
    s = s.toLowerCase();
    // p와 y의 개수를 담을 변수 할당
    let p_num = 0;
    let y_num = 0;
    // s의 길이 만큼 for문 진행
    for (let i=0 ; i < s.length ; i++){
        // 해당 위치가 p이면 p의 개수 1 증가
        if (s[i] === 'p') p_num++;
        // 해당 위치가 y이면 y의 개수 1 증가
        if (s[i] === 'y') y_num++;
    }

    // p와 y의 개수가 같으면 true, 다르면 false
    if (p_num === y_num){
        return(true)
    } else {
        return(false)
    }
}

let result1 = question1("pPoooyY") 
console.log(result1)

// 선생님의 답
function question1_1(s){
    // 대소문자 통일
    s = s.toLowerCase();

    // p일땐 +1, y일때 -1 했을때 서로 숫자가 같으면 최종 변수는 0이 될 것
    let num = 0
    for (let i=0 ; i < s.length ; i++) {
        if (s[i] === 'p') num++;
        if (s[i] === 'y') num--;
    }
    // p와 y의 갯수가 같을 때 true 다르면 false
    let result = (num === 0);

    return result
}

let result1_1 = question1_1("puppy")
console.log(result1_1)

 

2. 어떤 정수들이 있습니다.

    이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와

    이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다.

    실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

// 단이 풀이
function question2(absolutes, signs) {
    // 정수의 합을 담을 변수
    let sum = 0;
    // 주어진 배열의 길이만큼 for문 시행
    for (let i=0 ; i < absolutes.length ; i ++){
        // 해당 위치의 signs이 true이면 sum에다가 더해주고, false이면 빼준다.
        if (signs[i]) {
            sum += absolutes[i];
        } else {
            sum -= absolutes[i];
        }
        
    }
    return sum
}

let result2 = question2([4,7,12], [true,false,true])
console.log(result2)

// 선생님 풀이
// 삼항 연산자가 나올 줄이야!!!!
function question2_1 (absolutes, signs) {
    // 정수의 합을 담을 변수
    let sum = 0;
    // 주어진 배열의 길이만큼 for문 시행
    for (let i=0 ; i < absolutes.length ; i ++) {
        // 삼항 연산자를 이용하여 true면 더하고 false면 빼자.
        signs[i] ? sum += absolutes[i] : sum -= absolutes[i]
    }
}

let result2_2 = question2([1,2,3], [false,false,true])
console.log(result2_2)