Javascript

[JavaScript] 자바스크립트 | 코딩의 기본 operator | if | for loop

@leem 2025. 3. 18. 19:58
이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.

1. 문자열 연결 (String Concatenation)

JavaScript에서 문자열을 결합하는 방법은 여러 가지가 있습니다.

console.log('my' + ' cat'); // 문자열 연결 → "my cat"
console.log('1' + 2); // 숫자가 문자열로 변환되어 연결됨 → "12"
console.log(`string literals: 1 + 2 = ${1 + 2}`); // 템플릿 문자열 사용 → "string literals: 1 + 2 = 3"

✅ 문자열 연결의 주요 특징

  • + 연산자를 사용하면 문자열을 결합할 수 있음.
  • 숫자와 문자열을 함께 사용하면 자동으로 문자열로 변환됨.
  • 백틱( )을 사용한 템플릿 리터럴(``${변수}`)을 사용하면 가독성이 좋아지고 표현식 삽입이 가능.

2. 숫자 연산자 (Numeric Operators)

JavaScript에서 사용할 수 있는 기본적인 산술 연산자:

 
console.log(1 + 1); // 더하기 → 2
console.log(1 - 1); // 빼기 → 0
console.log(1 / 1); // 나누기 → 1
console.log(1 * 1); // 곱하기 → 1
console.log(5 % 2); // 나머지 연산 → 1 (5를 2로 나눈 나머지)
console.log(2 ** 3); // 거듭제곱 → 2³ = 8

📌 나머지 연산자(%)는 특정 조건(짝수/홀수 판별 등)에 유용하게 사용됨.

console.log(10 % 2 === 0 ? "짝수" : "홀수"); // "짝수"

3. 증가 및 감소 연산자 (Increment and Decrement Operators)

변수의 값을 1씩 증가시키거나 감소시킬 때 사용.

let counter = 2;

const preIncrement = ++counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); // 3, 3

const postIncrement = counter++;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`); // 3, 4

const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`); // 3, 3

const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`); // 3, 2

✅ ++와 -- 연산자의 차이

  • 전위 증가(++counter): 먼저 값을 증가시키고 변수에 할당.
  • 후위 증가(counter++): 먼저 값을 변수에 할당한 후 증가.

4. 할당 연산자 (Assignment Operators)

변수에 값을 할당하는 연산자.

let x = 3;
let y = 6;

x += y; // x = x + y;
x -= y; // x = x - y;
x *= y; // x = x * y;
x /= y; // x = x / y;

✅ 복합 대입 연산자는 +=, -=, *=, /= 등을 사용하여 값을 업데이트할 때 유용.

5. 비교 연산자 (Comparison Operators)

두 값의 크기나 동등성을 비교.

console.log(10 < 6); // false
console.log(10 <= 6); // false
console.log(10 > 6); // true
console.log(10 >= 6); // true

📌 비교 연산자는 true 또는 false 값을 반환.

6. 논리 연산자 (Logical Operators)

논리 연산자는 ||(or), &&(and), !(not) 세 가지가 있습니다.

const value1 = true;
const value2 = 4 < 2;

// || (or) - 첫 번째 true 값 반환
console.log(`or: ${value1 || value2 || check()}`);

// && (and) - 첫 번째 false 값 반환
console.log(`and: ${value1 && value2 && check()}`);

function check() {
  console.log('😱 실행됨');
  return true;
}

// ! (not) - 반대 값 반환
console.log(!value1);

✅ &&와 || 연산자의 특징

  • || (OR 연산자)는 첫 번째 true 값을 찾으면 즉시 종료 (뒤에 함수가 실행되지 않음).
  • && (AND 연산자)는 첫 번째 false 값을 찾으면 즉시 종료.
  • ! (NOT 연산자)는 true → false, false → true로 변환.

7. 동등 연산자 (Equality Operators)

const stringFive = '5';
const numberFive = 5;

// == 느슨한 동등 연산자 (자동 타입 변환 발생)
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false

// === 엄격한 동등 연산자 (타입 변환 없음)
console.log(stringFive === numberFive); // false
console.log(stringFive !== numberFive); // true

📌 ==는 타입 변환을 수행하지만, ===는 엄격한 비교(타입까지 동일해야 함)를 수행.
👉 항상 === 사용 권장!

 

  • 객체 비교 (참조 비교)
const ellie1 = { name: 'ellie' };
const ellie2 = { name: 'ellie' };
const ellie3 = ellie1;


console.log(ellie1 == ellie2); // false
console.log(ellie1 === ellie2); // false
console.log(ellie1 === ellie3); // true
ellie1 == ellie2 false 서로 다른 객체 (다른 메모리 주소)
ellie1 === ellie2 false 서로 다른 객체 (참조 주소 다름)
ellie1 === ellie3 true 같은 객체를 참조 (참조 주소 동일)

8. 조건문 (Conditional Statements)

const name = 'df';
if (name === 'ellie') {
  console.log('Welcome, Ellie!');
} else if (name === 'coder') {
  console.log('You are an amazing coder!');
} else {
  console.log('unknown');
}

📌 if 문을 사용하면 조건에 따라 코드 실행 가능.

9. 삼항 연산자 (Ternary Operator)

console.log(name === 'ellie' ? 'yes' : 'no');

✅ 삼항 연산자는 간단한 조건문을 작성할 때 유용.

10. switch 문 (Switch Statement)

const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('go away!');
    break;
  case 'Chrome':
  case 'Firefox':
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}

📌 switch 문은 여러 개의 if 문을 대체할 때 유용.

11. 반복문 (Loops)

let i = 3;
while (i > 0) {
  console.log(`while: ${i}`);
  i--;
}

do {
  console.log(`do while: ${i}`);
  i--;
} while (i > 0);

for (i = 3; i > 0; i--) {
  console.log(`for: ${i}`);
}

✅ for, while, do-while을 활용하여 반복적인 작업 수행 가능.

while 조건이 true일 때 실행 0번 이상 조건을 먼저 검사
do-while 조건과 관계없이 1회 실행 최소 1번 조건을 나중에 검사
for 조건이 true일 때 실행 0번 이상 반복 횟수가 정해진 경우 유용

📌 while vs do-while 차이점

  • while: 조건이 false면 한 번도 실행되지 않을 수 있음.
  • do-while: 조건이 false라도 최소 1번 실행됨.

✅ 문자열 연결은 + 또는 템플릿 리터럴( ) 사용
✅ 산술 연산자와 비교 연산자 이해 필수
✅ 논리 연산자는 ||, &&, ! 사용
✅ === (엄격 비교) 사용 권장
✅ 조건문(if, switch)과 반복문(for, while) 숙지 필요