HTML,CSS,JavaScript

JavaScript 기초 2 (연산자, 제어문)

gudwns5533 2026. 6. 16. 16:27

연산자

1. 산술 연산자

+,  -,  *,  /,  %,  **

2. 대입 연산자

=,  +=,  -=,  *=,  /=,  %=

3. 비교 연산자

==,  !=,  >,  <,  >=,  <=

  • == : 값만 비교
  • === : 값 + 타입까지 비교
10 == '10' -> true
10 === '10' -> false
  • != : 값만 비교
  • !== : 값 + 타입까지 비교
10 != '10' -> false
10 !== '10' -> true  !(a === b)와 동일한 의미
// 비교 연산자
console.log(5 == "5") // true
console.log(5 === "5") // false

4. 논리 연산자

&& : AND

|| : OR

! : NOT

5. 증감 연산자

++ : 값을 1 증가

-- : 값을 1 감소

// 증감 연산자
let count = 1
count ++
console.log(count)    // count: 2
count --
console.log(count)    // count: 1
let result = ++count
console.log(result)   // result: 2
console.log(count)    // count: 2
result = count++
console.log(result)   // result: 2
console.log(count)    // count: 3

6. 문자열 연산자

+ : 문자열을 연결할 때 사용

7. 조건(삼항) 연산자

조건에 따라 다른 값을 선택

조건 ? 값1 : 값2 (조건이 true면 값1, 조건이 false면 값2)

// 조건(삼항) 연산자
let score = 85
result = score >= 60 ? "합격" : "불합격"
console.log(result) // 합격

8. 타입 관련 연산자

typeof : 변수의 타입을 반환

instanceof : 변수가 특정객체의 타입인지 확인

// 타입 관련 연산자
let num = 10
let arr = []
console.log(typeof num) // number
console.log(arr instanceof Array) // true

9. 기타 연산자

, : 여러 표현식 나열

? : 옵셔널 체이닝 (null인지 아닌지 체크)

?? : null 병합 연산자 (null일 경우 특정값을 반환

let x = (1, 2, 3, 10)  // 마지막 요소가 출력
console.log(x) // 10

let user = null
console.log(user?.name) // undefined

let value = null
let resultValue = value ?? "기본값"
console.log(resultValue) // 기본값

제어문 - 조건문

if 문
if(조건) {
    조건이 참일 때 실행
}


if(조건) {
    조건이 참일 때 실행
}else{
    조건이 거짓일 때 실행
}


if(조건1) {
    조건1이 참일 때 실행
}else if(조건2){
    조건1은 거짓이고, 조건2가 참일 때 실행
}else{
    위 모든 조건이 거짓일 때 실행
}


switch 문
여러 개의 경우(case)를 비교할 때 사용하는 조건문

switch(값) {
    case 값1:
        값이 값1과 일치할 때 실행할 코드
        break
    case 값2:
        값이 값2와 일치할 때 실행할 코드
        break
    default:
        위에 모든 case에 값이 일치하지 않을 때 실행할 코드
}

제어문 - 반복문

while 문
while(조건식){
    조건식이 true일 동안 실행될 코드
}


do - while 문
do {
    반복 실행할 코드
}while(조건식)

for(초기식; 조건식; 증감식){
    조건식이 true일 동안 반복 실행할 코드
}

// `${변수}` : Python의 f-string 처럼 사용 가능

 

<h1>while 문</h1>
<script>
    let dan = 7
    let i = 1

    while (i <= 9) {
        console.log(`${dan} * ${i} = ${dan * i}`)
        i++
    }
</script>


<h1>Do ~ while 문</h1>
<script>
    let num = 10
    do {
        console.log(`현재 num: ${num}`)
        num++
    } while (num <= 9)
</script>


<h1>for 문</h1>
<script>
    while (i <= 5) {
        console.log(`현재 i의 값:${i}`)
        i++
    }

    for (let i = 1; i <= 5; i++) {
        console.log(`현재 i의 값: ${i}`)
    }
</script>


<h1>중첩 for문 구구단</h1>
<script>
    for (let dan = 2; dan <= 9; dan++) {
        for (let i = 1; i <= 9; i++) {
            console.log(`${dan} * ${i} = ${dan * 1}`)
        }
    }
</script>


<h1>break 문</h1>
<script>
    for (let i = 1; i <= 10; i++) {
        if (i > 5) break
        console.log(`i의 값: ${i}`)
    }
</script>


<h1>continue 문</h1>
<script>
    for (let i = 1; i <= 100; i++) {
        if (i % 3 == 0) {
            continue
        }
        console.log(`i의 값: ${i}`)
    }
</script>