JS-4 (22/10/31)

[목차]

1. 조건문
2. 반복문
3. prompt() & 형변환
   
   
   
   
   
   

1. 조건문 ~ if문

[조건문의 구조]

if ( ) { } else { }

• ( ) 안에는 boolean 타입이 들어가야 한다. (비교연산자)

if (true) {
    //true일 때 실행된다.
    console.log("Hello world!")
} else {
    //false일 때 실행된다.
    console.log("false")
}

( ) 안의 내용이 true이므로 결과는 Hello world!가 출력된다.

if (1 > 2) {
    console.log("Hello world!")
} else {
    console.log("false")
}

1 > 2가 아니므로 false가 출력.

2. 반복문 ~ for문

[반복문의 구조]

for (초기값; 종료조건; 증감값){ }

• 초기값 ~ 변수선언후 할당
• 종료조건 ~ boolean 타입이어야 한다 (비교연산자)
• 증감값 ~ a++ 의 형태를 주로 쓴다.
  (초기값과 종료조건 뒤에는 ;을 통한 구분이 필요하지만
  증감값 뒤에는 ; 금물)

(if문과 for문은 그 형식을 빨리 숙달하는 것이 중요하다)

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

>
1
2
3
4
5
6
7
8
9
10

입력 결과, i가 숫자 10이 될 때까지 계속 1을 더해가면서 출력된다.

for(let j=10; j <=100; j+=30) {
    console.log(j)
}

>
10
40
70
100

j(10)이 100이 될 때까지 30씩 더해서 출력된다.

(위 for문에서 사용한 변수명 i와 j는 for문 내에서만 작동한다.
이 내용에 대해서는 다음 포스트에서 다루기로)

예제 A)


for(let d = 1; d <=5; d++) {
    console.log(d)
    console.log('hello world')
}

>
1
hello world
2
hello world
3
hello world
4
hello world
5
hello world

d가 5가 될 때까지 아래 콘솔 로그가 두 줄씩 출력된다.

추가로 for문 안에 if문을 넣는 것도 가능하다.

숫자 1부터 10까지 출력하는데, 4의 배수에서만 'hello wold'라는 문구가 찍히도록 해보자.

for(let k = 1; k <=10; k++) {
    if(k == 4) {
        console.log('hello world')
    }

}

>
hello world

else문이 빠졌기 때문에 k가 4일 때 hello world가 한번만 찍혔다.

for(let c = 1; c <=10; c++) {
    if(c == 4) {
        console.log('hello world')
    } else {
        console.log(c)
    }
}

>
1
2
3
hello world
5
6
7
8
9
10

순서대로 1 2 3 hello world 6 7 8 9 10 이 출력되었지만
이 역시 원하는 결과는 아니다.

원하는 결과를 도출할 두 가지 방법

[방법1]

for(let v = 1; v <=10; v++) {
    if(v == 4 || v == 8) {
        console.log('hello world')
    } else {
        console.log(v)
    }

}

>
1
2
3
hello world
5
6
7
hello world
9
10

[방법2]

for(let ma = 1; ma <= 10; ma++) {
    if(ma % 4 === 0) {
        console.log('hello world')
    } else {
        console.log(ma)
    }
}

>
1
2
3
hello world
5
6
7
hello world
9
10

나머지를 구하는 연산자를 활용한 두 번째 방식이 좀 더 스마트하다고 볼 수 있겠다.

for문을 응용해서 구구단 3단을 출력해보자.

for (let o=1; o <=10; o++) {
    console.log ("3 * " + o + " = " + o * 3)
}


>
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
3 * 4 = 12
3 * 5 = 15
3 * 6 = 18
3 * 7 = 21
3 * 8 = 24
3 * 9 = 27
3 * 10 = 30

원리를 이해하면 다음과 같은 응용식도 만들 수 있다.

for (let o=2; o <=10; o += 2) {
    console.log ("3 * " + o + " = " + o * 3)
}


>
3 * 2 = 6
3 * 4 = 12
3 * 6 = 18
3 * 8 = 24
3 * 10 = 30

3. prompt() & 형변환

prompt( )

prompt ("값을 입력하세요.")
console.log("Hello World!")

위 코드를 입력하면 브라우저 개발자 모드를 열었을 때 텍스트 입력창이 나타나는데
그 입력창이 꺼질 때까지 아래 코드가 실행되지 않는다.

예제 A)

let input = prompt ("내용을 입력해주세요.")

1) 변수 선언보다 대입연산자 뒤의 내용(입력창)이 먼저 실행된다.
2) 브라우저의 입력창에 입력한 내용이 input값이 된다.
3) 입력창에 javascript 입력 후 엔터.
4) 다시 console.log (input) 입력시 콘솔창에 input값인 javascript라는 문구가 출력된다.

예제 B)

let input1 = prompt ('첫번째 숫자를 입력해주세요.') //입력창에 10 입력
let input2 = prompt ('두번째 숫자를 입력해주세요.') //입력창에 20 입력

console.log(input1) // 10 출력
console.log(input2) //20 출력
console.log(input1 + input2) // 1020 출력. 

결과가 '30'이 아닌 '1020'이 출력된 것은 string 타입 데이터로 인식되었기 때문이다. (출력값이 검은색이면 string 타입. 색이 있으면 number 타입)

이를 number타입으로 고쳐서 30을 출력하려면 '형변환' (데이터타입을 바꾸는 행위) 과정을 거쳐야 한다.

방법은 두 가지가 있다.

• Number()
• parseInt() (대소문자 주의. 반드시 카멜표기법에 따라 입력해야 한다)

console. log(parseInt(input1) + parseInt(input2))
console. log(Number(input1) + Number(input2))

각각의 형변환에는 이러한 차이점이 있다.

parseInt('1000원') // 1000 출력. 글자값은 버려진다.
Number('1000원') // NaN 출력. 제대로 형변환이 이뤄지지 않는다.

parseInt('1.234') // 1 출력. 정수 이외의 값은 버려진다.
Number('1.234') // 1.234 출력. 소수점도 전부 출력된다.

사실 자바스크립트에는 사용자의 실수를 방지하기 위함인지
약간의 자동 형변환 기능이 내장되어 있다.

console.log ("10" * "20")

> 200

(형변환 과정을 거치지 않았음에도 연산값인 200이 출력되었다.)

영 믿을 것이 못되니 직접 형변환 과정을 거치도록 하자.

console.log ("10" * "20" + "30")

> 20030 // "10" * "20"은 자동형변환으로 계산되었지만 + "30"은 string 타입인 채로 연결

(**number 타입을 string 타입으로 형변환하려면 String() 사용)