JavaScript_Day.2

조현기·5일 전

JavaScript

JavaScript_Day.2

오전에는 형 변환과 조건문, 오후에는 switch문과 반복문까지 배운 하루.
오늘은 "직접 바꿔 가며 실행해 보기"로 개념을 잡은 날이었다.

학습 두 번째 날이다. 오늘 배운 내용은 크게 세 덩어리다.

형 변환: parseInt, parseFloat
조건문: if...else, 논리 연산자(&&, ||, !), switch
반복문: while, do while, for, 그리고 복합 대입 연산자

오전

1. parseInt: 문자열을 정수로

parseInt()는 문자열을 파싱해서 정수로 돌려주는 함수다.
문자열 안에서 정수로 읽을 수 있는 부분이 있으면 그 값을 반환하고, 읽을 수 있는 숫자가 하나도 없으면 반환하지 못한다.

"123" → 정수 123
"안녕하세요" → 정수로 바꿀 수 없다 (결과는 NaN, 아래에서 다시 정리)

console.log(parseInt("123"));        // 123
console.log(parseInt("안녕하세요"));   // NaN

검증: prompt로 받은 값은 비교가 될까?

parseInt를 쓰기 전에, 먼저 prompt로 입력받은 값을 다른 값과 비교할 수 있는지 확인했다.
prompt로 받은 값은 항상 string이라서, 숫자(number)와 비교해 봤다.

string과 number를 비교하면 자동 형 변환이 일어나서 비교가 된다.
그런데 string과 string을 숫자로 비교하자 결과가 이상했다. '100' > '90'이 false가 나왔다.

몇 번 반복해서 확인해 보니 규칙이 보였다.

문자열끼리는 숫자의 크기가 아니라 앞 글자부터 하나씩 비교한다.
첫 글자가 같으면 두 번째 글자를 비교한다.
'100'과 '10'은 앞 두 글자가 같고 '100'이 더 길어서 true가 나온다.

console.log('100' > 90);    // true  (문자열이 숫자로 자동 변환됨)
console.log('100' > '90');  // false ('1'과 '9'를 먼저 비교)
console.log('100' > '10');  // true  ('10'까지 같고 '100'이 더 김)

prompt로 직접 입력받은 값으로 같은 실험을 하면 이렇게 된다.

let input = prompt('숫자를 입력하세요');   // 100을 입력하면 "100" (문자열)

console.log(typeof input);    // string
console.log(input > 90);      // true  (문자열 vs 숫자 → 숫자로 자동 변환)
console.log(input > '90');    // false (문자열 vs 문자열 → 앞 글자부터 비교)
console.log(input > '10');    // true  (앞 두 글자가 같고 더 긴 쪽이 큼)

비교	결과	이유
`"100" > 90`	`true`	숫자 `100`과 `90`을 비교
`"100" > "90"`	`false`	`"1"`과 `"9"`를 먼저 비교
`"100" > "10"`	`true`	`"10"`까지 같고 `"100"`이 더 김

이 부분은 나중에 입력값을 받아 대소를 비교하는 코드를 짤 때 바로 버그가 될 수 있겠다고 느꼈다.

2. parseInt와 parseFloat 적용

문자열과 숫자의 비교 특징을 확인했으니, 이제 문자를 숫자로 바꿔서 다시 비교할 차례다.

console.log(parseInt('100') > parseInt('90'));  // true (숫자로 변환 후 비교)

prompt로 입력받은 값에 parseInt와 parseFloat를 적용해 본 예제다.

let a = prompt('첫번째 숫자');     // 100 입력
let b = prompt('두번째 숫자');     // 90 입력

console.log(a > b);                              // false (문자열끼리 비교)
console.log(parseInt(a) > parseInt(b));          // true  (숫자로 바꿔서 비교)

console.log(parseInt('23'));       // 23
console.log(parseFloat('3.14'));   // 3.14
console.log(parseInt('abc'));      // NaN

실습으로 확인한 내용은 이렇다.

'23'처럼 숫자로 읽을 수 있는 문자열은 정상적으로 숫자가 된다.
'abc'처럼 정수로 만들 수 없는 문자열은 NaN 이 나온다. NaN은 Not-a-Number, 즉 "숫자가 아님"이라는 뜻이다.

추가로 정리: parseInt와 parseFloat의 차이

parseFloat는 소수점까지 읽는다.

console.log(parseInt("3.14"));      // 3     (정수만)
console.log(parseFloat("3.14"));    // 3.14  (소수점까지)
console.log(parseInt("12px"));      // 12    (숫자로 시작하면 읽을 수 있는 앞부분만)
console.log(parseInt("px12"));      // NaN   (숫자로 시작하지 않으면 NaN)

3. if...else문

그다음으로 if...else를 배웠다.
MDN 설명을 정리하면, 조건이 참이면 해당 명령문을 실행하고, 거짓이면 다른 명령문을 실행할 수 있는 구문이다.

기본 구문은 다음과 같다.

if (조건식) {
  // 조건이 참일 경우 실행
} else {
  // 조건이 거짓일 경우 실행
}

맨 처음 건 if (조건)이 참으로 평가되면 그 블록만 실행된다. 참이 아니면 아래의 else if 또는 else로 넘어간다.

if...else를 실습한 예제다. 입력받은 정수가 양수인지, 짝수인지 판별한다.

let n = parseInt(prompt('정수를 입력하세요'));   // 7 입력

if (n > 0) {
  console.log('양수');             // 7 → 양수
} else {
  console.log('0 또는 음수');
}

if (n % 2 == 0) {
  console.log('짝수');
} else {
  console.log('홀수');             // 7 → 홀수
}

입력	첫 번째 `if`	두 번째 `if`
`7`	양수	홀수
`-4`	0 또는 음수	짝수
`0`	0 또는 음수	짝수

추가로 정리: else if를 이용한 다중 조건

const score = parseInt(prompt('점수를 입력하세요'));

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('D');
}

위에서 배운 parseInt를 같이 써야, 입력받은 문자열이 숫자로 변환돼서 비교가 정확해진다.

4. 논리 연산자 (&&, ||, !)

기존에 배운 <, >, ==과는 다른 논리 연산자를 배웠다.

연산자	이름	의미
`&&`	논리곱 (and)	모든 조건이 참이어야 참
`\\|\\|`	논리합 (or)	하나라도 참이면 참
`!`	부정 (not)	참이면 거짓, 거짓이면 참

&&와 ||는 and, or의 개념이라 금방 이해가 됐다.
다만 !를 if문에 적용할 때 개념이 헷갈려서, 코드를 바꿔 가며 여러 번 시도했다. 결국 완전히 이해했다. 승리.

!를 if문에 적용하며 헷갈렸던 부분을 코드를 바꿔 가며 확인한 예제다. 같은 조건을 ! 없이, !로 쓰면 어떻게 바뀌는지 비교해 봤다.

let age = 15;

if (age >= 19) {
  console.log('성인');
} else {
  console.log('미성년자');           // 미성년자
}

if (!(age >= 19)) {                 // "19세 이상이 아니면"
  console.log('미성년자');           // 미성년자 (위와 같은 결과)
}

if (age >= 10 && age < 20) {        // 둘 다 참이어야 참
  console.log('10대');               // 10대
}

if (age < 10 || age >= 60) {        // 하나라도 참이면 참
  console.log('어린이 또는 노인');   // 출력되지 않음
}

추가로 정리: 직접 확인해 본 결과

console.log(true && false);   // false
console.log(true || false);   // true
console.log(!true);           // false

const age = 25;
const hasId = true;

if (age >= 19 && hasId) {
  console.log('입장 가능');
}

if (!(age >= 19)) {
  console.log('미성년자');       // age가 25라서 실행되지 않음
}

!가 헷갈릴 때는 조건식 전체를 괄호로 묶고 앞에 !를 붙인다고 생각하면 편했다. !(age >= 19)는 "19세 이상이 아니다"라는 뜻이다.

오후

5. switch문

오후에는 switch라는 조건문을 배웠다.
MDN 설명을 정리하면, 표현식의 결과와 일치하는 case를 찾아서, 그 지점부터 break를 만날 때까지 실행하는 구문이다. 일치하는 case가 없으면 default가 실행된다.

switch (데이터) {
  case '값1':
    // 데이터와 값1이 같을 때 실행
    break;

  case '값2':
    // 데이터와 값2가 같을 때 실행
    break;

  default:
    // 위의 case에 해당하지 않을 때 실행
}

switch를 실습한 예제 두 가지다. 첫 번째는 숫자 case, 두 번째는 문자열 case를 썼다.

// 예제 1: 요일 번호 → 요일 이름 (숫자 case)
let day = 3;

switch (day) {
  case 1:
    console.log('월요일');
    break;
  case 2:
    console.log('화요일');
    break;
  case 3:
    console.log('수요일');         // 출력
    break;
  default:
    console.log('다른 요일');
}

// 예제 2: 문자열 case
let menu = prompt('메뉴를 입력하세요');   // 커피 입력

switch (menu) {
  case '커피':
    alert('커피는 3000원');          // 출력
    break;
  case '주스':
    alert('주스는 4000원');
    break;
  default:
    alert('없는 메뉴');
}

직접 써 본 느낌은 이렇다.

if문보다 쓰기가 까다롭다. if처럼 조건식을 쓰는 게 아니라, 맨 위에 준 데이터와 case의 값이 동일해야 동작한다. 이걸 자꾸 잊게 된다.
하지만 익숙해지면 if문보다 더 자주 쓰게 될 것 같다.
break는 꼭 쓰자.

추가로 정리: break를 빼먹으면

break가 없으면 일치한 case부터 아래 코드가 계속 실행된다. 그래서 위 메모에 "break도 꼭 쓰기"라고 적어 둔 것이다.

const fruit = '사과';

switch (fruit) {
  case '사과':
    console.log('빨간색');
    // break가 없다!
  case '바나나':
    console.log('노란색');
    break;
  default:
    console.log('모르는 과일');
}
// 출력: 빨간색 → 노란색 (사과인데 바나나 코드까지 실행됨)

또 switch는 값을 비교할 때 ===(값과 타입 모두 비교)를 사용한다. Day.1에서 배운 ==와 ===의 차이가 여기서 다시 나왔다.

switch (5) {
  case '5':
    console.log('문자열 5');
    break;
  case 5:
    console.log('숫자 5');   // 이쪽이 실행됨
    break;
}

6. 복합 대입 연산자

다음은 복합 대입 연산자다.
a = a + 3, b = b - 4 같은 식을 더 짧게 쓰는 방법이다.

연산자	이름	풀어 쓴 식	줄여 쓴 식
`+=`	더하기 대입	`a = a + 3`	`a += 3`
`-=`	빼기 대입	`a = a - 3`	`a -= 3`
`*=`	곱하기 대입	`a = a * 3`	`a *= 3`
`/=`	나누기 대입	`a = a / 3`	`a /= 3`
`%=`	나머지 대입	`a = a % 3`	`a %= 3`

확실히 간편하지만, 그만큼 헷갈리거나 놓치고 넘어가기 쉬워 보였다.

복합 대입 연산자를 숫자와 문자에 각각 적용해 봤다. 코드와 결과는 아래 "실습 예제"에 정리했다.

실습하면서 알게 된 점이 있다.

숫자는 이해하기 쉬웠다.
문자는 헷갈릴 수 있다. 문자 + 문자는 앞뒤가 붙는다.
혹시 문자 - 문자는 되나 싶어서 실험했더니 NaN이 나왔다.
일단 문자는 +만 되는 것으로 이해하기로 했다.

실습 예제: 숫자와 문자에 적용한 결과

let a = 10;
a += 3;    // 13
a -= 4;    // 9
a *= 2;    // 18
a /= 3;    // 6
a %= 4;    // 2

let s = '안녕';
s += '하세요';   // '안녕하세요' (문자열은 이어 붙음)
s -= 1;          // NaN (문자열은 빼기가 안 됨)

Day.1에서 '10' - 3은 7이 나왔는데, 이번엔 NaN이다. 차이는 숫자로 바꿀 수 있는 문자열인가였다. '10'은 숫자 10으로 바뀌지만 '안녕하세요'는 바뀔 수 없다.

7. while문

반복문을 배웠다. 처음으로 배운 건 while이다.
MDN 설명을 정리하면, 조건이 참인 동안 문을 반복 실행하고, 조건은 문이 실행되기 전에 평가된다.

while (조건식) {
  // 반복할 코드
}

8. do while문

while 다음으로 do while을 배웠다.
"같은 거 아닌가?" 싶었는데, 직접 해 보니 달랐다.

do while은 문을 먼저 실행한 뒤에 조건을 평가한다. 그래서 조건이 처음부터 거짓이어도 반드시 한 번은 실행된다.

do {
  // 반복할 코드
} while (조건식);

실습하고 나니 확실히 느꼈다. 조건식이 뒤에 있으니 코드를 위에서 아래로 읽는 순서대로 일단 한 번 실행되고 나서 조건을 확인한다. "한 번은 무조건 실행하고, 그 뒤에 상황에 따라 반복"해야 하는 코드에 쓰면 좋겠다.

추가로 정리: while과 do while 비교

let n = 10;

while (n < 5) {
  console.log('while 실행');       // 출력되지 않음
}

do {
  console.log('do while 실행');    // 한 번은 출력됨
} while (n < 5);

9. for문

또 반복문이다. 에반데.
하지만 for문은 반복문 중에서 가장 많이 사용한다고 한다.

MDN 설명을 정리하면, for문은 괄호 안에 세미콜론(;)으로 구분한 세 개의 식과, 반복할 블록으로 구성된다.

for (초기값; 조건식; 증감식) {
  // 반복할 코드
}

초기값, 조건식, 증감식을 한 줄에 쓰고 들어가니 코드 파악이 while문보다 쉬웠다. 실습으로는 증감식을 활용해서 1부터 10까지 출력해 봤다.

for (let i = 1; i <= 10; i++) {
  console.log(i);   // 1, 2, 3, ... 10
}

i++는 i = i + 1, 즉 i += 1과 같은 뜻이다. 위에서 배운 복합 대입 연산자의 증가 버전이다.

다만 반복문 자체는 익숙해지는 데 시간이 조금 걸릴 것 같다. 지금은 간단한 예제지만, 실무에서는 반복할 코드가 훨씬 길고 복잡한 블록 형태일 텐데…

세 가지 반복문으로 1부터 10까지의 합을 구해 본 예제다. 같은 결과가 나온다.

// while
let sum1 = 0, i = 1;
while (i <= 10) {
  sum1 += i;
  i++;
}

// do while
let sum2 = 0, j = 1;
do {
  sum2 += j;
  j++;
} while (j <= 10);

// for
let sum3 = 0;
for (let k = 1; k <= 10; k++) {
  sum3 += k;
}

console.log(sum1, sum2, sum3);   // 55 55 55

반복 횟수가 정해져 있으면 for가 가장 간결하다. sum += i에는 위에서 배운 복합 대입 연산자가 쓰였다.

10. 실수: 무한 반복

반복문을 실습하다가 조건식을 잘못 설정해서 무한 반복이 되는 실수를 했다.
무한 반복이 되면 과부하로 컴퓨터가 멈출 수도 있다. 실수하지 않게 조심하자.

let i = 1;
while (i <= 10) {
  console.log(i);
  // i를 증가시키는 코드가 없어서 조건이 영원히 참
}

추가로 정리: 무한 반복을 막는 습관

반복문을 쓰면 조건이 언젠가 거짓이 되는지 먼저 확인한다.
while에서는 반복 안에 값을 바꾸는 코드(i++ 등)가 있는지 확인한다.
for문은 증감식을 한 줄에 쓰니 이런 실수가 줄어든다.

마무리

오늘 가장 기억에 남는 건 두 가지다.

'100' > '90'이 false: 문자열 비교는 숫자의 크기가 아니라 앞 글자부터 비교한다. 입력값을 parseInt로 바꿔야 한다는 것을 직접 실행하고 나서야 이해했다.
무한 반복 실수: 조건식을 잘못 쓰면 컴퓨터가 멈출 수 있다는 걸 몸으로 배웠다.

조건문과 반복문까지 배웠으니 이제 프로그램의 흐름을 제어할 수 있게 됐다. 다음 글에서는 이어서 정리할 예정이다.

Tags: JavaScript 조건문 반복문 개발자 학습기록

조현기

난 뭘까

이전 포스트

JavaScript_Day.1

다음 포스트

JavaScript_Day.2

JavaScript_Day.2

오전

1. parseInt: 문자열을 정수로

검증: prompt로 받은 값은 비교가 될까?

2. parseInt와 parseFloat 적용

추가로 정리: parseInt와 parseFloat의 차이

3. if...else문

추가로 정리: else if를 이용한 다중 조건

4. 논리 연산자 (&&, ||, !)

추가로 정리: 직접 확인해 본 결과

오후

5. switch문

추가로 정리: break를 빼먹으면

6. 복합 대입 연산자

실습 예제: 숫자와 문자에 적용한 결과

7. while문

8. do while문

추가로 정리: while과 do while 비교

9. for문

10. 실수: 무한 반복

추가로 정리: 무한 반복을 막는 습관

마무리

JavaScript_Day.1

JavaScript_Day.3

0개의 댓글