(자바스크립트) 연산자

산술연산자

• 사칙연산 + - * /
• 나머지 %

  let a = 1 + 3 * (5 - 2) / 3;
  console.log(a);  // 4

  let b = 7 % 3;
  console.log(b);  // 1

• ++ --

// 뒤에 ++붙이면 값 먼저 보여주고 나중에 계산
  let a = 1;
  console.log(a++);  // 1
  console.log(a);    // 2

// 앞에 ++붙이면 계산 먼저
  let b = 1;
  console.log(++b);  // 2
  console.log(b);    // 2

---

대입연산자

• =

  let a = 5;  // a에 1을 대입

• += -= *= /=

  a += 1;     // 아래와 같은 의미
  a = a + 1 ;

  a *= 1;
  a = a * 1;

---

논리연산자

Boolean을 처리하기 위한 연산자 ( 조건문 사용할 때 유용 )

• !  NOT - 반대로 바꿈

  const a = !true;
  console.log(a);  // false

• &&  AND - 두 값이 모두 참일 때만 true

  const a = true && true;    // true
  const b = true && false;   // false
  const c = false && true;   // false
  const d = false && false;  // false

• ||  OR - 하나라도 참이면 true

  const a = true || true;    // true
  const b = true || false;   // true
  const c = false || true;   // true
  const d = false || false;  // false

• 논리연산자 처리 순서는 ! → && → ||

  const value = !(false && true || false || !true && true);
  console.log(value);  // true

---

단락 평가

• 논리연산자는 앞의 표현식을 먼저 평가한다
• 이때 단락 평가( short-circuit )를 수행함

  (거짓 표현식) && expr  // 거짓 표현식으로 단락 평가
  (참 표현식) || expr   // 참 표현식으로 단락 평가

  // "단락"이란, 위 규칙에서 expr을 평가하지 않음을 의미

• and &&

• 앞 표현식이 참이어야 뒤 표현식도 평가
  → 💥 앞 표현식이 참이면 뒤 표현식이 실행 됨
  
  ( 앞참 뒤실행 / 앞거짓 앞실행)

  const n = 7;
  (n % 5 === 0) && console.log('앞 표현식이 참일 때 실행됨')
  // 앞 표현식이 false이므로 뒤의 문자열 출력되지 않음

  console.log(false && (3 === 4));  // false
  console.log('Cat' && 'Dog');      // Dog
  console.log('Cat' && false);      // false
  console.log('' && false);         // ""
  console.log(false && '');         // false

• OR ||

• 앞 표현식 평가해서 참이면 뒤는 평가할 필요 없기때문에 실행하지 않음
  → ✨ 앞 표현식이 거짓이어야 뒤 표현식이 실행됨
  
  ( 앞참 앞실행 / 앞거짓 뒤실행 )

  const n = 7;
  (n % 5 === 0) || console.log('앞 표현식이 거짓일 때 실행됨')
  // 앞 표현식이 false이므로 뒤의 문자열 출력됨

  console.log(false || (3 === 4));  // false
  console.log('Cat' || 'Dog');      // Cat
  console.log('Cat' || false);      // Cat
  console.log('' || false);         // false
  console.log(false || '');         // ""

🏆 단락 평가 응용

• 특정 값이 유효할 때, 어떤 값을 조회해야 하는 경우에 유용

  const object = { color: 'orange' };  
  // 객체가 아닌 다른 값이 들어오면 에러 발생 -> ( object && object.color )

  const color = object.color;
  console.log(color);  // orange

  const object = null;  // (falsy)

  const color = object && object.color;
  console.log(color);  // null

  const object = { color: 'orange' };  // (truthy)

  const color = object && object.color;
  console.log(color);  // orange

💡 참고

---

삼항연산자

• ? 와 : 으로 작성함

• 하나의 표현식만 가능하기 때문에 중괄호 {} 사용할 수 없음
  
  

조건 ? 조건이 참일 때 실행되는 표현식 : 조건이 거짓일 때 실행되는 표현식

  let n = 5;
  console.log(n % 5 === 0 ? '5의 배수' : '5의 배수 아님');  // 5의 배수

• 표현식의 결과를 변수에 할당할 수도 있음

  const message = n % 5 === 0 ? '5의 배수' : '5의 배수 아님'
  console.log(message);  // 5의 배수

  const array = [];
  let text = '';
  if (array.length === 0) {
    text = '배열이 비어있음';
  } else {
    text = '배열이 비어있지 않음';
  }

  console.log(text);  // 배열이 비어있음

• 위와 같은 코드를 삼항연산자를 사용하여 간단하게 바꿀 수 있음

  const array = [];
  let text = array.length === 0 
    ? '배열이 비어있음' 
    : '배열이 비어있지 않음';
  console.log(text);  // 배열이 비어있음

---

비교연산자

동등 비교

• == 같음 - 자료형을 구분하지 않음
• != 같지 않음

  const a = 5;
  const b = '5';
  const equals = a == b;
  console.log(equals);    // true

  const a = true;
  const b = 1;
  const equals = a == b;  // true

  const a = null;
  const b = undefined;
  const equals = a == b;  // true

• === 같음 - 자료형 구분함 ( 엄밀히 구분하려면 ===가 정확 )
• !== 같지 않음

  const a = 5;
  const b = '5';
  const equals = a === b;
  console.log(equals);    // false

  const a = true;
  const b = 1;
  const equals = a === b; // false

  const a = null;
  const b = undefined;
  const equals = a === b; // false

대소 비교

• < > <= >=

  const a = 10;
  const b = 50;
  const c = 50;

  console.log(a < b);  // true
  console.log(a > b);  // false
  console.log(b >= c); // true