10. JavaScript 연산자와 조건문 이해하기 | 웹 개발 기초

레트로 스타일, dall-e

 

 

JavaScript 연산자와 조건문 이해하기

 

01. 서론

1) JavaScript의 중요성

JavaScript는 웹 개발에서 핵심적인 역할을 하는 프로그래밍 언어입니다. 클라이언트 측 스크립트로 작동하며, HTML과 CSS와 함께 웹 페이지를 동적으로 만들고 사용자 인터페이스를 개선하는 데 사용됩니다. 또한 서버 측에서도 널리 사용되어 전체 애플리케이션 스택에서 중요한 위치를 차지합니다.

2) 연산자와 조건문의 역할

연산자는 변수와 값 간의 연산을 수행하는 데 사용되며, 조건문은 프로그램의 흐름을 제어하는 데 중요한 역할을 합니다. 연산자를 사용하여 값을 계산하고, 조건문을 사용하여 프로그램이 다양한 상황에서 다른 동작을 하도록 할 수 있습니다.

// 예시: 산술 연산자와 조건문을 사용한 간단한 코드
let score = 85;
if (score >= 90) {
    console.log("Excellent");
} else if (score >= 75) {
    console.log("Good");
} else {
    console.log("Needs Improvement");
}
        

위 예제에서는 산술 연산자와 조건문을 사용하여 점수에 따라 다른 메시지를 출력하는 간단한 프로그램을 보여줍니다.

 

02. JavaScript 연산자

1) 산술 연산자

산술 연산자는 수학 연산을 수행하는 데 사용됩니다. 대표적인 산술 연산자로는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%)가 있습니다.

let a = 10;
let b = 5;
console.log(a + b); // 출력: 15
console.log(a - b); // 출력: 5
console.log(a * b); // 출력: 50
console.log(a / b); // 출력: 2
console.log(a % b); // 출력: 0
        

2) 비교 연산자

비교 연산자는 두 값을 비교하여 불리언 값을 반환합니다. 동등(==), 일치(===), 부등(!=), 불일치(!==), 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=) 등의 연산자가 있습니다.

console.log(10 == "10"); // 출력: true
console.log(10 === "10"); // 출력: false
console.log(10 != "10"); // 출력: false
console.log(10 !== "10"); // 출력: true
console.log(10 > 5); // 출력: true
console.log(10 < 5); // 출력: false
console.log(10 >= 10); // 출력: true
console.log(10 <= 5); // 출력: false
        

3) 논리 연산자

논리 연산자는 논리적인 AND(&&), OR(||), NOT(!) 연산을 수행합니다. 이를 통해 조건을 결합하거나 반전시킬 수 있습니다.

let x = true;
let y = false;
console.log(x && y); // 출력: false
console.log(x || y); // 출력: true
console.log(!x); // 출력: false
        

4) 할당 연산자

할당 연산자는 변수에 값을 할당하는 데 사용됩니다. 대표적으로 등호(=), 더해서 할당(+=), 빼서 할당(-=), 곱해서 할당(*=), 나눠서 할당(/=) 등이 있습니다.

let c = 10;
c += 5; // c = c + 5;
console.log(c); // 출력: 15
c -= 3; // c = c - 3;
console.log(c); // 출력: 12
c *= 2; // c = c * 2;
console.log(c); // 출력: 24
c /= 4; // c = c / 4;
console.log(c); // 출력: 6
        

 

03. JavaScript 조건문

1) if 문

if 문은 주어진 조건이 참(true)일 때 코드를 실행합니다. 조건이 거짓(false)일 경우 코드는 실행되지 않습니다.

let number = 10;
if (number > 5) {
    console.log("The number is greater than 5.");
}
        

2) else if 문

else if 문은 이전 조건이 거짓일 경우 다른 조건을 테스트합니다. 여러 조건을 순차적으로 검사할 때 사용됩니다.

let number = 10;
if (number > 10) {
    console.log("The number is greater than 10.");
} else if (number === 10) {
    console.log("The number is 10.");
}
        

3) else 문

else 문은 이전의 모든 조건이 거짓일 때 코드를 실행합니다. if 또는 else if 조건이 참이 아닐 때 사용됩니다.

let number = 10;
if (number > 10) {
    console.log("The number is greater than 10.");
} else if (number === 10) {
    console.log("The number is 10.");
} else {
    console.log("The number is less than 10.");
}
        

4) switch 문

switch 문은 변수의 값에 따라 여러 코드 블록 중 하나를 실행합니다. 각 경우(case)에 대해 다른 코드를 실행할 수 있습니다.

let grade = 'B';
switch (grade) {
    case 'A':
        console.log("Excellent");
        break;
    case 'B':
        console.log("Good");
        break;
    case 'C':
        console.log("Fair");
        break;
    default:
        console.log("Poor");
}
        

 

04. 연산자와 조건문 실습

1) 숫자의 크기를 비교하는 조건문 작성

다음은 두 숫자의 크기를 비교하여 결과를 출력하는 예제입니다. 이 예제에서는 if, else if, else 조건문을 사용하여 숫자의 크기를 비교합니다.

let a = 7;
let b = 10;

if (a > b) {
    console.log("a is greater than b");
} else if (a < b) {
    console.log("a is less than b");
} else {
    console.log("a is equal to b");
}
        

2) 예시 코드 설명

위 코드에서 변수 a와 b의 값을 비교합니다. 조건문은 세 가지 경우를 처리합니다:

• 첫 번째 if 문은 a가 b보다 큰 경우를 처리합니다.
• else if 문은 a가 b보다 작은 경우를 처리합니다.
• else 문은 a와 b가 같은 경우를 처리합니다.

이를 통해 각 경우에 따라 적절한 메시지가 콘솔에 출력됩니다.

 

05. 결론

1) 연산자와 조건문의 중요성 재강조

JavaScript에서 연산자와 조건문은 프로그램의 흐름을 제어하고 다양한 계산을 수행하는 데 중요한 역할을 합니다. 이들을 제대로 이해하고 사용할 수 있으면 복잡한 논리를 구현하고 효율적인 코드를 작성할 수 있습니다. 연산자는 데이터 조작의 기본 도구이며, 조건문은 프로그램이 다양한 상황에 따라 적절한 동작을 하도록 합니다.

2) 추가 학습 자료와 참고 링크

• MDN Web Docs - JavaScript Expressions and Operators
• MDN Web Docs - JavaScript Control Flow and Error Handling
• W3Schools - JavaScript Operators
• W3Schools - JavaScript if else and switch

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.01 - [Study] - 04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

2024.06.30 - [Study] - 03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초

03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초

2024.06.28 - [Study] - 02. HTML 폼과 입력 요소 가이드 | 웹 개발 기초

02. HTML 폼과 입력 요소 가이드 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)