초코의 풀스택 도전기 19: 조건문과 반복문의 심화(2)

조건문과 반복문을 활용하는 기본적인 방법을 익힌 초코는, 이번에는 좀 더 고급 기술을 배우고 싶었다. 이제는 코드를 더욱 간결하게 쓰고, 실수를 줄일 수 있는 방법이 궁금해졌다. 그 생각을 들은 멘토는 고급 조건문과 반복문의 기술을 소개하며 설명을 시작했다.

1. 3항 연산자 (Ternary Operator)

멘토는 초코에게 먼저 조건문을 더 간단하게 처리할 수 있는 방법을 알려주었다.

"초코, 기억나? 우리가 if-else를 사용해서 조건문을 만들었잖아. 근데 가끔 그게 너무 길어질 때가 있어. 그럴 때 3항 연산자라는 걸 사용할 수 있어."

let temperature = 30;
let message = temperature > 25 ? "더운 날씨입니다." : "적당한 날씨입니다.";
console.log(message);

 

초코는 코드를 보며 의아한 표정을 지었다. "멘토님, 이게 뭐예요? ?와 :는 뭔가요?"

 

멘토는 웃으며 설명했다. "이게 바로 3항 연산자야. 간단하게 말하면, 조건 ? 참일 때의 값 : 거짓일 때의 값의 형태로, 한 줄로 짧게 작성할 수 있어. if-else보다 훨씬 간결하지? 여기서는 온도가 25도보다 높으면 '더운 날씨입니다'가 출력되고, 그렇지 않으면 '적당한 날씨입니다'가 출력돼."

결과:

더운 날씨입니다.

 

초코는 고개를 끄덕였다. "아, 그렇군요. 간단한 조건은 이렇게 처리하면 되겠네요!"

2. 배열 순회를 위한 for...of와 객체 속성을 위한 for...in

다음으로 멘토는 배열과 객체를 다룰 때 유용한 반복문을 설명해주었다. "기존의 for문 외에도 배열과 객체를 더 쉽게 다룰 수 있는 방법이 있어. 바로 for...of와 for...in이지."

for...of로 배열 순회하기:

let fruits = ['사과', '바나나', '오렌지'];

for (let fruit of fruits) {
  console.log(fruit);
}

 

초코는 코드를 보고 말했다. "아, 이건 배열 안에 있는 과일들을 하나씩 출력하는 거죠?"

 

"맞아. for...of는 배열의 각 요소를 순회할 때 사용해. 여기서 fruit은 배열에 들어 있는 각 과일을 의미해."

결과:

사과
바나나
오렌지

 

"그럼 객체는 어떻게 처리하죠?" 초코는 또다른 궁금증을 내비쳤다.

for...in으로 객체 속성 순회하기:

let person = { name: '초코', age: 25 };

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

 

"객체를 순회할 때는 for...in을 사용해. 여기서는 객체의 속성 이름인 key를 가져오고, person[key]로 그 속성의 값을 불러올 수 있지."

결과:

name: 초코
age: 25

 

"배열과 객체를 이렇게 다룰 수 있으니, 더 많은 데이터를 효율적으로 처리할 수 있을 거야!" 멘토는 강조했다.

3. break와 continue로 반복문 제어하기

초코는 반복문에 대한 더 깊은 이해를 원했다. "그런데 반복문을 쓸 때, 특정 조건에서 멈추거나 넘어가는 방법도 있나요?"

"물론이지! 그럴 때는 break와 continue를 사용해. 반복문이 중간에 멈추거나, 특정 반복만 건너뛸 수 있어."

break로 반복 중단하기:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

 

"여기서는 i가 5일 때 반복을 멈추도록 하고 있어. break는 즉시 반복문을 끝내는 역할을 해."

결과:

0
1
2
3
4

 

"이번엔 continue를 써서 특정 조건만 건너뛰는 방법을 보여줄게."

continue로 반복 건너뛰기:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

 

"이번에는 i가 5일 때만 건너뛰고, 나머지 숫자는 정상적으로 출력되지."

결과:

0
1
2
3
4
6
7
8
9

 

"이렇게 break와 continue를 사용하면 반복문의 흐름을 유연하게 제어할 수 있어."

4. 배열을 처리하는 고차 함수: map, filter, reduce

멘토는 마지막으로 반복문 대신 배열을 처리할 수 있는 더 간편한 방법을 설명해주었다. "반복문 대신 고차 함수라는 걸 사용하면 배열을 더 간결하게 처리할 수 있어. map, filter, 그리고 reduce가 대표적이야."

map으로 배열의 값을 변환하기:

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(number => number * 2);
console.log(doubled);

 

"여기서 map은 배열의 각 요소를 두 배로 만든 후, 그 결과를 새로운 배열로 반환해."

결과:

[2, 4, 6, 8, 10]

filter로 조건에 맞는 값만 남기기:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);

 

"filter는 조건에 맞는 값만 남겨. 여기서는 짝수만 남겼지."

결과:

[2, 4]

reduce로 값 축약하기:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum);

 

"마지막으로, reduce는 배열의 모든 값을 합산하거나 다른 방식으로 축약할 때 사용해."

결과:

15

마무리하며

이번 시간에는 초코가 조건문과 반복문을 더 효율적으로 사용하는 법을 배웠다. 간결한 3항 연산자, 배열과 객체를 순회하는 새로운 반복문, 그리고 break와 continue로 반복문을 제어하는 방법까지. 마지막으로 배열을 처리하는 고차 함수까지 익히고 나니, 초코는 훨씬 더 능숙하게 데이터를 처리할 수 있을 것 같은 자신감이 생겼다.

 

"멘토님, 오늘 배운 건 정말 실전에서 자주 쓰일 것 같아요!" 초코는 미소를 지었다.

 

"맞아, 이번에 배운 내용은 실제로 많은 코드에서 유용하게 쓰일 거야. 다음 시간에는 함수와 같은 고급 주제를 다뤄볼까?" 멘토는 다음 단계를 예고하며 초코를 격려했다.