TIL archiving ···.ᐟ/JavaScript + TypeScript

[노트내용정리] 연산자 (Operator)

dayoung-archive 2024. 8. 28. 20:32

연산자란? 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만드는 것.

피연산자(연산의 대상)는 값으로 평가될 수 있는 표현식이어야 한다. 연산자와 피연산자의 조합으로 이루어진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이다.

 

 

📌산술 연산자 (arithmetic operator)

  • 사칙연산( *, - , + )을 다루는 가장 기본적이면서도 많이 사용하는 연산자. 
console.log(1 + 2)
console.log(12 * 7)
console.log(7 / 9)
console.log(7 % 5)  //나머지값

 

📌할당 연산자 (assignment operator)

  • 변수에 값을 대입하는 데 사용하는 연산자.
const a = 5
let b = 10
b += a // 15 (b += a === b = b + a) 
b -= a  // 5

 

📌증감 연산자 

  • 피연산자를 1씩 증가 혹은 1씩 감소시킬 때 사용하는 연산자로, 피연산자가 단 하나인 단항연산자이다.
  • i++ : 연산 진행 후, 1씩 증가
  • ++i : 1 증가 후,  연산 진행

 

📌 비교 연산자 (comparison operator) 

  • 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환
  • <= , ==, ===>=<>,  !== 

 동등연산자(==)는 느슨한 비교로, 피연산자들의 값만 같으면 참을 반환한다.

const a = 1;
const b = "1";

console.log(a == b) // true 반환.

 

일치연산자(===)는 엄격한 비교로, 피연산자들의 값과 타입이 같으면 을 반환한다.

const a = 1
const b = '1'

console.log(a === b)  // false반환

 

* 형 변환(Type conversion)에 따라 값이 달라질 수 있으므로 일치연산자(===) 활용을 권장.

 

불일치연산자(!==)는 일치연산자와 반대로 피연산자들이 다른 지를 비교한다. 값과 타입이 '다르면' 을 반환한다.

function add(num) {
    if (typeof num !== "number") throw new Error("숫자로만 입력해주세요");
    //받은 num이 number가 아니면, 에러메시지를 던져라.
    return 5 + num;
}

//--------------------------------------------

const a = 1
const b = '1'

console.log(a !== b)  // true (a와 b가 다르므로 true를 반환함)

 

📌삼항 연산자 (ternary operator)

1. ?(물음표)를 기준으로 그 앞의 값을 확인.

2. 그 값이  true면 :(콜론) 앞 부분 실행, false뒷 부분 실행.

function checkAge(age) { age >= 20 ? console.log("성인입니다") : console.log("성인이 아닙니다") }
// 입력 받은 age값이 20보다 크거나 같으면(참이면) console.log("성인입니다")
// 입력 받은 age값이 20보다 작으면(거짓이면) console.log("성인이 아닙니다")

 

 

📌 논리 연산자 (logical operator)

  •  논리식을 판단하여, 참(true)과 거짓(false)을 반환.
  • 조건문에서 거짓을 참으로 바꿔주거나(!) 다중 조건(&&, ||)을 지정해 줄 때 많이 사용.
  • &&(AND): 모든 값이 참이면 을 반환한다. (하나라도 false면 false. 첫 번째 falsy값을 반환.)
  • || (OR): 하나라도 이면 을 반환한다. (하나라도 true면 true. 첫 번째 truthy값을 반환.)
  • ! (NOT): 결과가 참이면 거짓, 거짓이면 참을 반환한다. (반대의 의미)
function createUser(name, age, gender) {
    // Case A: ||(OR)를 썼기 때문에 둘 중 하나라도 해당하면 에러메시지를 보낸다.
    if (age <= 19 || gender === "M") {
        // 나이가 19살 이하이거나, 성별이 남자면
        throw new Error("가입조건에 맞지않습니다.")
    }
    
    // Case B: &&(AND)를 썼기 때문에 둘 다 해당해야만 함수를 실행한다.
    if (age >= 20 && gender === "W") {
        // 나이가 20살 이상인지 확인하고, 성별도 남자인지 확인한다.
        // 해당 조건이 충족하는 애들에 대해서만 함수를 실행하도록.
    }
}



// * AND 연산자 : 모든 값이 true이어야 함. 하나라도 false값이 있으면 false 반환.
// * OR 연산자 : 하나라도 "true"값이 있으면 true 반환.
// * NOT 연산자 : 특정한 데이터의 반대값이 출력됨. true => false, false => true 출력.
💡 NOT연산자를 2번 써주면(!!) Boolean타입이 되어서 true인지 false인지 확인할 수 있다.
(!!a && true) 이런식으로 써주는 것을 권장

 

1. 논리연산자를 사용한 단축 평가

AND 연산자(&&)와 OR 연산자(||)가 표현식을 평가하는 도중에 평가 결과가 확정되면, 나머지 평가 과정을 생략하는 것.

 

논리곱(&&

  • 연산자(&&)를 기준으로 좌→우로 실행.
  • 모두 참이어야 참을 반환하기 때문에 우항에서 결과가 확정되고, 모두 참이면 결과를 확정짓는 우항을 그대로 반환해준다. 
  • 하나라도 거짓이면 거짓이기 때문에, 좌항에서 거짓이면 좌항을 반환하고 그대로 실행을 종료한다.

한줄요약: && 뒤의 값, 거짓  && 앞의 값 반환. (첫 번째 falsy를 찾고, 반환한다.)

 

논리합(||

  • 연산자(||)를 기준으로 좌→우로 실행.
  • 하나라도 참이면 참을 반환하기 때문에 좌항이 참이면 바로 좌항값을 반환해준다.

한줄요약: ||  앞의 값 거짓  || 뒤의 값 반환. (첫 번째 truthy를 찾고, 반환한다.)

참고 https://ko.javascript.info/logical-operators

 

 

2. Truthy와 Falsy

boolean을 기대하는 문맥 (if, && 연산자, 삼항 연산자 등)에서 true로 평가, false로 평가 되는 값

  • falsy (거짓 같은 값): ⭐ 0, undefined, false, null, NaN, ""(빈 문자열) ⭐
  • Truthy (참 같은 값): falsy를 제외한 나머지.

 


 

📌 null 병합 연산자

  • '??' : null과 undefined인지만 체크하는 연산자. (falsy한 값은 포함하지 않는다.)
  • 첫 번째 정의된(defined) 을 반환
  • a ?? b : a가 null도 undefined도 아니면 a, 그 외에는 b 반환. 
💡null병합 연산자 사용예시.
'?' 만 써서 삼항연산자를 사용하면, 0도 false로(값이 없는걸로) 취급하기 때문에, 결제정보시스템 등에서 0원인 것도
정보가 없는 것으로 취급하는 경우가 생긴다. 그럴 때
확실히 null 병합 연산자를 써주면 유용하다.

참고 https://ko.javascript.info/nullish-coalescing-operator