[JavaScript] 연산자

피연산자(operand)

• 피연산자는 인수(argument) 라고 불리기도 합니다.
• 할당식은 표현식인 문이다.

산술 연산자

5 \* 4; // -> 20
8 % 3; // -> 2 (나머지)

문자열 연결 연산자

"My name is" + "Kim"; // > "My name is Kim"

// 첫 번째 피연산자가 문자열인지, 두 번째 피연산자가 문자열인지는 중요하지 않습니다.
// 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환됩니다.
alert("1" + 2); // "12"
alert(2 + "1"); // "21"

할당 연산자

• 할당 연산자는 변수 값이 변하는 부수 효과가 있다.

color = "red"; // -> red

할당 연산자 체이닝

let a, b, c;
a = b = c = 2 + 2;
alert(a); // -> 4
alert(b); // -> 4
alert(c); // -> 4

복합 할당 연산자

let n = 2;
n = n + 5;
n = n \* 2;
// -> 14

let n = 2;
n += 5; // n = n + 5 → 7
n *= 2; // n = n * 2 → 14

// +=, -=, *=, /=, %= 등 다양한 복합 할당 연산자가 있음

비교 연산자

3 > 5; // -> false

다른 타입을 가진 값의 비교(동등 비교 연산자 '==')

• ==는 암묵적 형 변환(coercion) 후 값을 비교함
• ===는 형(type)과 값(value) 모두 비교함 → 대부분의 경우 === 사용을 권장

"2" > 1; // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
"01" == 1; // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.
0 == ""; // true

"5" == 5; // true
"5" === 5; // false
null == undefined; // true
null === undefined; // false

일치 연산자(타입 비교 연산자 '===')

• 대부분 '===' 연산자를 사용한다.

0 === false; // -> false, 피연산자의 형이 다르기 때문
NaN === NaN; // -> false, NaN은 유일하게 자기 자신과 일치하지 않는 연산자이다.
0 === -0; // -> true

논리 연산자 - 단축 평가 (Short-Circuit Evaluation)

• 자주 쓰이는 패턴: 변수 || 기본값, 조건 && 실행

true && false; // -> false

// OR: 앞이 true면 뒤는 보지 않음
true || alert("이건 실행 안 됨");

// AND: 앞이 false면 뒤는 보지 않음
false && alert("이것도 실행 안 됨");

// 실용 예시
let name = userName || "Anonymous"; // userName이 falsy면 "Anonymous" 사용

타입 연산자

typeof "Hi"; // -> string
typeof 3; // -> number

증가, 감소 연산자

• 피연산자의 값이 재할당되어 변경된다.

let counter = 2;
counter++; // -> +1과 동일하게 동작합니다.
console.log(counter); // -> 3

let counter = 2;
counter--; // -> -1과 동일하게 동작합니다.
console.log(counter); // -> 1

let counter = 1;
let pre = ++counter; // 전위: 증가 후 대입 → counter = 2, pre = 2
let post = counter++; // 후위: 대입 후 증가 → post = 2, counter = 3

삼항 연산자

• '물음표(question mark) 연산자’라고도 불리는 '조건부(conditional) 연산자’를 사용하면 더 짧고 간결하게 변형할 수 있습니다.
• 조건부 연산자는 물음표(?)로 표시합니다.
• 피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 부르는 사람도 있습니다.
• 자바스크립트에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일합니다.

let result = condition ? value1 : value2; // -> condition이 true라면 value1, false라면 value2

let accessAllowed = age > 18 ? true : false; // -> 18세 이상이라면, true, 아니면 false

let age = 20;
let message = age < 3
  ? "아기야 안녕?"
  : age < 18
  ? "안녕!"
  : age < 100
  ? "안녕하세요!"
  : "나이가 많으시네요!";
// 중첩 삼항 연산자는 간결하지만, 가독성이 떨어질 수 있으므로 상황에 따라 if...else를 고려

논리 연산자 (OR)

result = a || b;
true || true; // -> true
true || false; // -> true
false || true; // -> true
false || false; // -> false

논리 연산자 (AND)

result = a && b;
true || true; // -> true
true || false; // -> false
false || true; // -> false
false || false; // -> false

- 첫 번째 피연산자가 truthy이면,
- AND는 두 번째 피연산자를 반환합니다.
1 && 0; // 0
1 && 5; // 5

- 첫 번째 피연산자가 falsy이면,
- AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
null && 5; // null
0 && "아무거나 와도 상관없습니다."; // 0

논리 부정(!) 연산자 (NOT)

result = !value;
!true; // false
!0; // true

- NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있습니다.(강제 형변환)
!!"non-empty string"; // true
!!null; // false