[Day03] 코딩 뇌를 깨우는 JS 기초 문제 풀이 (ft. for문, Class, 3의배수)

 

벌써 Day 03 입니다. '작심삼일'의 그 운명의 3일째가 밝았습니다. 오늘만 무사히 넘기면 우리는 작심삼일을 이겨낸 승리자가 되는 겁니다! (물론 내일 또 작심삼일을 새로 시작하면 되긴 합니다만...)

지난 시간까지 변수와 타입, 그리고 별 찍기 같은 기초 로직을 다뤘다면, 오늘은 조금 더 '프로그래밍스러운' 문제들을 다뤄보려고 합니다. 특히 Class(클래스) 개념이나 나머지 연산(%) 같은 건 실무에서도 아주 빈번하게 쓰이는 녀석들이니, 이 참에 확실하게 메모해두기로 합니다.

자, 거창한 이론보다는 일단 코드를 보면서 부딪혀 보는 게 제 스타일인 거 아시죠? 여러분들도 저와 함께 정답을 맞춰보시죠!!

 

문제 11 : for를 이용한 기본 활용

Q. 1부터 100까지 모두 더하는 코드를 완성하세요.

let s = 0;

// pass

console.log(s);

[풀이]

가장 기본적인 누적 합 문제입니다.

1부터 100까지 i를 증가시키면서 s에 계속 더해주면 됩니다.

let s = 0;

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

console.log(s);

결과는 5050이 나올 겁니다. 가우스가 초등학생 때 순식간에 풀었다는 그 문제... 우리는 컴퓨터에게 시켜서 풉시다. 엔터 빡!
정답: 5050

문제 12 : 게임 캐릭터 클래스 만들기

Q. 다음 소스코드에서 클래스를 작성하여 게임 캐릭터의 능력치와 '파이어볼'이 출력되게 만드시오. (단, 주어진 소스 코드를 수정해선 안됩니다.)

데이터
<여기에 class를 작성하세요.>

const x = new Wizard(545, 210, 10);
console.log(x.health, x.mana, x.armor);
x.attack();


출력
545 210 10
파이어볼

 

[풀이] 

 

오, 드디어 게임 개발자가 된 기분을 느낄 수 있는 Class(클래스) 문제가 나왔습니다. new Wizard로 인스턴스를 생성할 때 매개변수 3개를 넘기고 있으니, constructor에서 이 3개를 받아서 this로 세팅해줘야 합니다. 그리고 attack() 메서드를 호출하면 '파이어볼'을 외쳐야겠군요.

 

const Wizard = class Wizard {
    constructor (health, mana, armor){
        this.health = health;
        this.mana = mana;
        this.armor = armor;
    }
    attack(){
        console.log('파이어볼');
    }
}

const x = new Wizard(545, 210, 10);
console.log(x.health, x.mana, x.armor);
x.attack();

 

이제 x.attack()을 실행하면 콘솔 창에 멋지게(?) '파이어볼'이 출력될 겁니다.

 

 

 

문제 13 : 몇 번째 행성인가요?

Q. 우리 태양계를 이루고 있는 행성은 수성, 금성, 지구, 화성, 목성, 토성, 천왕성, 해왕성으로 총 8개 입니다. 저희는 우리 태양계의 n번째 행성이 무엇인지 알고 싶습니다.
입력으로 행성의 순서를 나타내는 숫자 n이 입력됩니다. 출력으로 그 순서에 해당하는 행성의 이름을 출력해 주세요.

입출력

입력 : 1
출력 : 수성

 

[풀이] 

 

"수금지화목토천해..." 학창 시절에 앞글자 따서 열심히 외웠던 기억이 납니다. 배열에 순서대로 행성 이름을 넣어두고 꺼내 쓰면 되는데, 주의할 점은 "배열의 인덱스는 0부터 시작한다"는 점입니다. 우리가 "첫 번째"라고 말할 때 컴퓨터는 "0번"을 봅니다. 그러니 입력받은 n에서 1을 빼줘야 정확한 위치가 나옵니다.

const planets = ['수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성'];

const n = prompt('몇 번째 행성인가요?');

console.log(planets[n-1]);

 

만약 1을 입력하면 planets인 '수성'이 짠 하고 나타납니다. 참, 쉽죠?

 

 

문제 14 : 3의 배수 인가요?

Q. 영희는 친구와 게임을 하고 있습니다. 서로 돌아가며 랜덤으로 숫자를 하나 말하고 그게 3의 배수이면 박수를 치고 아니면 그 숫자를 그대로 말하는 게임입니다.
입력으로 랜덤한 숫자 n이 주어집니다. 만약 그 수가 3의 배수라면 '짝'이라는 글자를, 3의 배수가 아니라면 n을 그대로 출력해 주세요.

입출력

입력 : 3
출력 : 짝

입력 : 2
출력 : 2

 

[풀이] 

국민 게임 369 게임의 로직과 비슷합니다. (물론 여기선 3의 배수만 따지지만요.) 어떤 수가 배수인지 아닌지 판별하는 가장 확실한 방법은 나머지 연산자(%)를 사용하는 것입니다. n을 3으로 나눴을 때 나머지가 0이라면? 그건 3의 배수라는 뜻이죠.

입출력

입력 : 3
출력 : 짝

입력 : 2
출력 : 2

 

궁금하면 일단 해보는 거죠 뭐. 콘솔 창에 3, 6, 9를 넣어보고 '짝'이 나오는지 확인해봅시다.

 

 

문제 15 : 자기소개

Q. 신학기가 시작되고, 아이들이 돌아가면서 자기소개를 하기로 했습니다. 만약 입력으로 김다정이라는 이름이 주어지면 "안녕하세요. 저는 즐코딩입니다."라고 출력하게 해주세요.

문제 15 : 자기소개
Q. 신학기가 시작되고, 아이들이 돌아가면서 자기소개를 하기로 했습니다. 
만약 입력으로 김다정이라는 이름이 주어지면 
"안녕하세요. 저는 즐코딩입니다."라고 출력하게 해주세요.

 

[풀이] 

문자열을 합치는 방법은 + 연산자를 써도 되지만, ES6부터 도입된 템플릿 리터럴(Template literals)을 사용하면 훨씬 우아하게 코드를 짤 수 있습니다. 백틱(`) 기호를 사용하고 그 안에 ${변수명}을 넣으면 끝!

const name = prompt('이름을 입력하세요.');

console.log(`안녕하세요. 저는 ${name}입니다.`); 
/*
* es6부터는 backtick 문자열(``) 안에서 $와 중괄호로 표현식을 사용할 수 있습니다. 
* 이를 템플릿 리터럴(Template literals)이라 합니다.
*/

 

[여기서 잠깐!] 따옴표(')가 아니라 키보드 물결표시(~) 아래에 있는 백틱(`)을 사용해야 한다는 점, 잊지 마세요!

 

 

마치며

이렇게 자바스크립트 기초 문제 5가지를 추가로 풀어보았습니다. 오늘 푼 문제들은 Class의 기초, 배열의 인덱스 계산, 나머지 연산자 활용 등 실전 코딩에서도 아주 자주 마주치게 되는 개념들입니다.

작심삼일의 고비를 넘어 여기까지 오신 여러분, 정말 대단합니다. 하루 5문제, 이 작은 습관이 쌓여서 나중에는 복잡한 코드도 척척 읽어내는 실력이 될 것이라 믿습니다.

여러분들도 저와 함께 매일매일 조금씩 성장해 나가시기를 바라겠습니다.

 

오늘도 즐거운 코딩생활, 즐코딩.
KINcoding.