오늘은 04 - 2장의 연습문제를 풀이해 보자.
반복문부터는 구문도 늘어나고 형태도 복잡해지기 때문에 04 - 2장의 예제를 꼼꼼하게 정리하고 넘어가도록 하자.
그럼 정리 시작!
중첩 반복문을 사용하는 피라미드
누적예제 1. 반쪽짜리 피라미드 만들기
내가 작성한 코드
자바스크립트에서 * 연산자는 다른 언어처럼 문자를 반복하는데 사용하는게 아니라 곱셈에 사용된다. 그렇기 때문에 console.log('*' * i) 이런식으로 코드를 작성하면 NaN이라는 오류가 발생한다.
자바스크립트에서 반복되는 문자로 문자열을 생성하려면 'repeat()' 메소드를 사용할 수 있다.
다만, 이와 같은 풀이법은 console.log를 여러번 사용하기 때문에 한번에 출력되지 않고 여러번에 나눠서 출력된다. 경우에 따라 오답으로 처리될 수도 있으니 repeat() 메소드만 알아두고 넘어가도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
for (let i = 1; i < 10; i++) {
console.log('*'.repeat(i));
}
</script>
</head>
<body>
</body>
</html>
소개된 코드
빈 문자열에 문자를 이어붙여 문자열을 만든다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
let output = ''
for (let i = 1; i < 10; i++) {
for (let j = 0; j < i; j++) {
output += '*'
}
output += '\n'
}
console.log(output)
</script>
</head>
<body>
</body>
</html>
누적예제 2. 피라미드 만들기
내가 작성한 코드
누적예제 1과 같이 repeat() 메소드를 활용하여 풀이하였다. ' '(공백)이 출력되게 하기위해 console.log 안에 ' ' 과 '*' 를 문자열 연산자로 이어주었다. 마찬가지로 반쪽 자리 정답이다. repeat() 메소드만 알아두고 넘어가도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
for (let i = 1; i < 15; i++) {
console.log(' '.repeat(14 - i) + '*'.repeat(2 * i - 1));
}
</script>
</head>
<body>
</body>
</html>
소개된 코드
빈 문자열에 문자를 이어붙여 문자열을 만들고 문자열을 이어붙여 피라미드를 만드는 아이디어를 떠올리는게 핵심이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
let output = ''
for (let i = 1; i < 15; i++) {
for (let j = 14; j > i; j--) {
output += ' '
}
for (let k = 0; k < 2 * i - 1; k++) {
output += '*'
}
output += '\n'
}
console.log(output)
</script>
</head>
<body>
</body>
</html>
확인문제 3. 1부터 100까지의 숫자를 곱한 값을 계산하는 프로그램을 만들어보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
let output = 1;
for (let i = 1; i <= 100; i++) {
output *= i
}
console.log(`1~100의 숫자를 모두 곱하면, ${output}입니다.`)
</script>
</head>
<body>
</body>
</html>
확인문제 4. 활용 예제의 피라미드를 활용해서 다이아몬드 모양의 피라미드를 만들어보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
let output = ''
for (let i = 1; i <= 5; i++) {
for (let j = i; j < 5; j++)
output += ' '
for (let j = 0; j < 2 * i - 1; j++)
output += '*'
output += '\n'
}
for (let i = 4; i > 0; i--) {
for (let j = i; j < 5; j++)
output += ' '
for (let j = 0; j < 2 * i - 1; j++)
output += '*'
output += '\n'
}
console.log(output)
</script>
</head>
<body>
</body>
</html>
실행결과
확인문제 4번은 교재의 코드와 내가 작성한 코드가 거의 똑같아서 딱히 정리할 내용은 없다. 중첩 반복문을 두 번 활용하는 것이 핵심이었다.
이상으로 04 - 2 장 연습문제 풀이를 마무리 하면 될 것 같다.
유명한 별찍기 문제를 몇 문제 풀어보았다. 간단한 유형만 풀어보았지만 덕분에 자바스크립트의 반복문에 조금더 익숙해 질 수 있었다.
내일은 3주차 미션을 해결해보자!
오늘 하루도 쌓였다.
