LGHV_3기_자바스크립트 기본 문법_JavaScript(2.2)

Pepzera·2025년 3월 17일
LG 헬로비전 DX DATA SCHOOL 3기 공부 정리웹 개발

LGHV3기_공부정리

목록 보기
27/34

Chap 02-2 자바스크립트 기분 문법

자바스크립트 기본 문법

3. 연산자

산술 연산자

수학 계산을 할 때 사용하는 연산자

종류설명예시
+두 피연산자의 값을 더한다.c = a + b
-첫 번째 피연산자 값에서 두 번째 피연산자 값을 뺀다.c = a - b
*두 피연산자의 값을 곱한다.c = a * b
/첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눈다.c = a / b
%첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눈 나머지를 구한다.c = a % b
++피연산자 1 증가a++
--피연산자 1 감소b--
  • 나누기 연산자(/) : 나눈 값 자체
  • 나머지 연산자(%) : 나눈 후에 남은 나머지 값

할당 연산자(대입 연산자)

수학 계산을 할 때 사용하는 연산자

종류설명예시
=연산자 오른쪽의 값을 왼쪽 변수에 할당함.y = x + 3
+=y = y + x를 의미y += x
-=y = y - x를 의미y -= x
*=y = y * x를 의미y *= x
/=y = y / x를 의미y /= x
%=y = y % x를 의미y %= x

비교 연산자

피연산자 2개의 값을 비교해서 true나 false로 결괏값 반환

종류설명조건식결과값
==피연산자가 서로 같으면 true3 == "3"true
===피연산자도 같고 자료형도 같으면 true3 === "3"false
!=피연산자가 서로 같지 않으면 true3 != "3"false
!==피연산자가 같지 않거나 자료형이 같지 않으면 true3 !== "3"true
<왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true3 < 4true
<=왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true3 <= 4true
>왼쪽 피연산자가 오른쪽 피연산자보다 크면 true3 > 4false
>=왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true3 >= 4false
  • == 연산자와 ! = 연산자
    • 피연산자의 자료형을 자동으로 변환해서 비교
console.log(3 == "3") // true
console.log(3 != "3") // false
  • === 연산자와 ! == 연산자
    • 피연산자의 자료형을 변환하지 않음
console.log(3 === "3") // false
console.log(3 !== "3") // true
  • 문자열의 비교
    • 문자열에 있는 문자들의 ASCII 값을 비교
    • 비교할 문자가 여러 개일 경우 맨 앞의 문자부터 하나씩 비교

논리 연산자

  • true와 false가 피연산자인 연산자
  • 조건을 처리할 때 사용
종류기호설명
OR 연산자피연산자 중 하나만 true여도 true가 됨.
AND 연산자&&피연산자가 모두 true일 경우에만 true가 됨.
NOT 연산자!피연산자의 반댓값을 지정함.

4. 조건문

if 문과 if ~ else 문

  • 피연산자 2개의 값을 비교해서 true나 false로 결괏값 반환
  • 하나의 if ~ else 문 안에 다른 if ~ else 문을 넣을 수 있음.
  • 기본형
if (조건) {
	조건 결과값이 true일 때 실행할 명령
}
if (조건) {
	조건 결과 값이 true일 때 실행할 명령
} else {
	조건 결과 값이 false일 때 실행할 명령
}
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>조건문</title>
</head>
<body>
  <script>
    let number = parseInt(prompt('숫자를 입력하세요!'))
    if (number % 5 == 0){
      alert('5의 배수 입니다!')
    } else {
      alert('5의 배수가 아닙니다!')
    }
  </script>
</body>
</html>
  • 결과 )

중첩된 if ~ else 문

  • 3의 배수 확인하기 프로그램에서 프롬프트 창에서 [취소] 눌렀을 때도 고려하기
    • [취소] 버튼을 눌렀는지 확인하고 (값이 null인지 체크)
    • 아닐 경우 → [확인] 버튼 눌렀을 때 3의 배수 체크하기
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>조건문</title>
</head>
<body>
  <script>
    let number = prompt('숫자를 입력하세요!')
    if (number !== null){
      if (number % 5 == 0){
        alert('5의 배수 입니다!')
      } else {
        alert('5의 배수가 아닙니다!')
      }
    } else {
      alert('취소버튼을 눌렀습니다.');
    }   
  </script>
</body>
</html>
  • 결과 )

조건 연산자로 조건 체크하기 (삼항 연산자)

  • 조건이 하나이고 true, false일 때 실행할 명령이 각각 1개 뿐일 때 간단하게 사용할 수 있음!
  • 기본형
    (조건) ? true일 때 실행할 명령 : false일 때 실행할 명령
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>조건문</title>
</head>
<body>
  <script>
    let number = prompt('숫자를 입력해주세요')
    if (number !== null){
	    // 삼항 연산자 사용
      (number % 5 == 0)? alert('5의 배수 입니다.'): alert('5의 배수가 아닙니다.')
    } else {
      alert('취소 버튼을 입력하셨습니다')
    }
  </script>
</body>
</html>
  • 결과 )

논리 연산자로 조건 체크하기

  • 조건을 2개 이상 체크할 경우에는 조건 연산자를 사용해 조건을 만듦.
  • 두 조건이 true(and)일 경우, 조건 1개만 true(or)일 경우처럼 여러 경우를 따질 때 논리연산자 사용

AND 연산자 (&&)

  • 피연산자 2개 중에서 false가 하나라도 있으면 결괏값은 false
op 1op 2op 1 && op 2
falsefalsefalse
falsetruefalse
truefalsefalse
truetruetrue

OR 연산자 (||)

  • 피연산자 2개 중에서 true가 하나라도 있으면 결괏값은 true

OR 연산자 (||)

피연산자 2개 중에서 true가 하나라도 있으면 결과값이 true

op 1op 2op 1
falsefalsefalse
falsetruetrue
truefalsetrue
truetruetrue

NOT 연산자 (!)

  • 피연산자를 반대로 뒤집음
op!op
falsetrue
truefalse

switch문

  • 처리할 명령이 많을 경우 switch 문이 편리
  • 단, switch문은 제한된 부분이 있음 → switch문은 case가 값 하나로 딱 떨어지는 경우만 사용 가능!
  • 기본형
    switch (조건) {
  	case 값1 : 명령 1
	  	break;
	  case 값2 : 명령 2
	  	break;
  	...
  	default: 명령 n
    }
  • 조건은 case 문의 값과 일대일로 일치해야함.
  • case 문의 명령 실행 후 switch 문 빠져나옴.
  • 조건과 일치하는 case 문이 없다면 default 문 실행.
  • default 문에는 break 문이 없음.
  • 코드 예시 )
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>세션 선택 - switch문</title>
  <link rel="stylesheet" href="css/switch.css">
</head>

<body>
  <script>
    let num = parseInt(prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인"))

    switch (num) {
      case 1 :
        document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>");
        break;
      case 2 :
        document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
        break;
      case 3 :
        document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>");
        break;
      // 1,2,3을 제외한 다른 값 입력시 '잘못입력하셨습니다!'가 뜸
      default :
        alert("잘못입력하셨습니다!")
    }
  </script>
</body>

</html>
  • 결과 )

5. 반복문

for 문

  • 반복적으로 실행해야하는 코드가 존재할 때 사용된다.
  • 기본형
for (초깃값; 조건; 증감식) {
	실행할 명령;
}
  • 초깃값
    • 카운터 변수 초기화. 초깃값은 0이나 1부터 시작하는게 대부분!
  • 조건
    • 명령을 반복하기 위해 조건 체크. 이 조건을 만족해야 다음에 오는 명령을 실행할 수 있음.
  • 증감식
    • 명령을 반복한 후 실행. 대부분은 카운터 변수를 1 증가시키는 용도로 사용됨.
  • for문의 순서
    • 초깃값 ➡️ 조건 체크 ➡️ 명령 실행 ➡️ 증감식 ➡️ 조건 체크 ➡️ … 의 순서로 진행
  • 코드 예시 ) - for문을 사용해 1부터 5까지 숫자 더하기
let num = 0
for (i=1;i<6;i++){
  num = num + i;
  console.log(`${num} = ${num-i} + ${i}`)
}
// 최종적인 num값
console.log(num)
  1. 카운터 변수 1로 설정
  2. i가 1이기 때문에 1 < 6 이라서 조건 만족함
    그래서 num = num + i;를 실행한 뒤
    i++실행 (1에서 1 증가 = 2)
  3. i가 2이기 때문에 2 < 6 이라서 조건 만족함
    그래서 num = num + i;를 실행한 뒤
    i++실행 (2에서 1 증가 = 3)
    …
  4. i가 5이기 때문에 5 < 6 이라서 조건 만족함
    그래서 num = num + i;를 실행한 뒤
    i++실행 (5에서 1 증가 = 5)
  5. i가 6이기 때문에 6 < 6 이라서 조건 불만족!
    그래서 for문을 빠져나옴
  • 결과 )

중첩된 for 문

  • for문 안에 또 다른 for문 사용하는 방법
  • 안쪽 for문을 모두 실행한 후 바깥쪽 for문 실행
  • 코드 예시 ) - 중첩된 for문을 사용해 구구단 프로그램 돌리기
for(i=1;i<10;i++){
  for(j=1;j<10;j++){
    console.log(`${i} X ${j} = ${i*j}`)
  }
  console.log("")
}

1단
1. i는 1부터 시작, 1 < 10 성립, 다음 for문으로 들어감
2. j는 1부터 시작, 1 < 10 성립, console.log 실행
(현재 i = 1, j = 1)
i++가 실행되면서 1이 2가 됨.
3. j가 2가 되면서 2 < 10 성립, console.log 실행
(현재 i = 1, j = 2)
i++가 실행되면서 2가 3이 됨.
…
9. j가 8이 되면서 8 < 10 성립, console.log 실행
(현재 i = 1, j = 8)
i++가 실행되면서 8이 9가 됨.
10. j가 9가 되면서 9 < 10 성립, console.log 실행
(현재 i = 1, j = 9)
i++가 실행되면서 9가 10이 됨.
11. j가 10이 되면서 10 < 10 성립 X
for문 빠져나옴 ➡️ i가 있는 for문으로 돌아가서
i++ 실행 ➡️ i가 1에서 2가 됨.

2단
1. i가 2부터 시작, 2 < 10 성립, 다음 for문으로 들어감
2. j는 다시 1부터 시작, 1 < 10 성립, console.log 실행
(현재 i = 2, j = 1)
i++가 실행되면서 1이 2가 됨.
3. j가 2가 되면서 2 < 10 성립, console.log 실행
(현재 i = 2, j = 2)
i++가 실행되면서 2가 3이 됨.
…
9. j가 8이 되면서 8 < 10 성립, console.log 실행
(현재 i = 2, j = 8)
10. j가 9가 되면서 9 < 10 성립, console.log 실행
(현재 i = 2, j = 9)
i++가 실행되면서 9가 10이 됨.
11. j가 10이 되면서 10 < 10 성립 X
for문 빠져나옴 ➡️ i가 있는 for문으로 돌아가서
i++ 실행 ➡️ i가 2에서 3이 됨.

3단
…

  • 결과 )



while 문

  • 조건을 체크하고 true라면 { }안의 명령 실행
    • 조건이 false라면 명령은 한 번도 실행하지 않을 수 있음!
  • 기본형
    while (조건) {
		실행할 명령
}
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>while</title>
  <style>
    body {
      font-size:2em;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <script>
    // while문을 사용해 별 표시하기
    let stars = parseInt(prompt("몇 개의 별을 표시하나요?"))
		
		// stars가 0 이상이면 true
    while(stars > 0){
      document.write("<h1>*</h1>");
      // stars 를 하나씩 차감
      stars --;
    }
  </script>
</body>
</html>
  • 결과 )

do ~ while 문

  • 일단 명령을 한 번 실행한 후 조건 체크
  • true라면 { } 안의 명령 실행, false라면 { }을 빠져나옴
    • 조건이 false라도 명령은 최소한 한 번은 실행
  • 기본형
    do {
  실행할 명령
} while (조건)
  • 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>while</title>
  <style>
    body {
      font-size:2em;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <script>
    // while문을 사용해 별 표시하기
    let stars = parseInt(prompt("몇 개의 별을 표시하나요?"))
		// 일단 무조건 한 번은 실행
    do{
      document.write("<h1>*</h1>");
      // stars 하나씩 차감
      stars --;
    } while(stars > 0) // stars가 0 이상이면 true
  </script>
</body>
</html>
  • 결과 )

break문과 continue문

break문

  • 종료 조건이 되기 전에 반복문을 빠져나와야 할 때 사용
  • 코드 예시 ) - 구구단 2단 ~ 4단만 표시하기
for (i=1; i<10; i++){
  for (j=1; j<10; j++){
    console.log(`${i} X ${j} = ${i*j}`)
  }
  console.log("")
  if (i==4){ //4단까지만 표시
    break;
  }
}
  • 결과 )

continue문

  • 조건이 해당되는 값을 만나면 반복문의 맨 앞으로 이동
    • 결과적으로 반복 과정을 한 차례 건너 뜀
  • 코드 예시 ) - 1부터 10까지 짝수만 더하기
let n = 10;
let sum = 0;

for (let i=1; i < n+1; i++){
  if(i%2 != 0){
    continue
  }
  sum = sum + i
  console.log(`sum = ${sum-i} ||| i = ${i}`)
  console.log(`${sum-i} + ${i} = ${sum}`)
  console.log("")
}
  • 결과 )
profile
Pepzera
Hi
이전 포스트

var과 let의 차이점과 호이스팅_JavaScript

다음 포스트

LGHV_3기_함수와 이벤트_JavaScript(3)

0개의 댓글